Before you start
First off all you need to download and install our CleverReach plugin for Shopify:
Besides you will have to be authorized with CleverReach® and complete initial synchronization in order to use CleverReach® forms in Shopify.
During initial synchronization, a default form will be automatically created for you and linked to your synchronization list of Shopify.
You can also create other forms in your CleverReach Account. When you would like to use them in Shopify you have to chose your recipient list "Shopify" while creating the form.
Inserting form through the theme editor in Shopify
To insert a CleverReach® form to the storefront using the theme editor please be so kind and click on “Online Store” (1) and then on "Themes" (2).
It will show you the current theme that is active in the shop. You can edit the page layout. Please click on “Customize” (3) to edit the page.
This step will open up the theme editor where you can view all the sections that are currently presented on the homepage. To add a new section please be so kind and click on the “Add Section” button at the bottom of that list.
You will be presented with different section types. One of them will be CleverReach® forms. Here, all the forms connected to your current account will be displayed. Please choose the one you wish to insert into page and click “Add”.
On the next window, you can edit the form heading (1) and subheading (2), as well as the form look on CleverReach® (3). Clicking on the link will take you directly to the form in your CleverReach® account where you can add more elements to the form.
You can view live changes to the form on the page on the right side (4).
Once you are satisfied with how the form looks, you can save changes and publish the theme.
Now your form is ready and you can get more and more subscribers for your newsletter.
Inserting form to pages
The second option to insert CleverReach® form to your Shopify page is to copy a form snippet and manually insert it to the page code. Please be so kind and go to the forms section on the application dashboard page within Shopify. There you have to choose the form you wish to insert.
Please click on the three dots icon (“...”) for more options (1) and click “Add form” in the dropdown menu (2).
In the dialog that opens, you will see the HTML code snippet that should be inserted into the page you wish to see your form on. Please click on the “Copy” button to copy that code to clipboard.
Please be so kind and go back to the shop administration and open up the page (blog, product, collection etc.) you want to insert your CleverReach® form into for editing. You will see a standard text editor, which you can edit normally. It would also be possible to edit the code itself and to add custom HTML elements into it.
Inside the editor, please click on the button with the tags (“<>”) to open the page code:
The editor content will change and you will now be able to see the HTML code of all the elements inside that page. All you have to do now is to paste the snippet you copied before anywhere inside the code and save changes.
After saving, please click on “View” button to see the page on storefront. Now you will see CleverReach® form inside the page:
Inserting form to theme pages (this workaround is only for advanced users who are familiar with the HTML code)
The third option to insert a CleverReach® form to theme page is to copy the form snippet and manually insert it to the theme code.
On the application dashboard page within Shopify please be so kind and go to the forms section.
In the next step you will have to choose the form you wish to insert, click three dots icon (“...”) for more options (1) and click “Add form” in the dropdown menu (2).
In the dialog that opens, you will see the HTML code snippet that should be inserted into the page you wish to see your form on. Click on “Copy” button to copy that code to clipboard.
Please go back to the shop administration and open Online Store -> Themes -> Current Theme -> Customize.
When the theme editor is opened please click on Theme actions -> Edit code menu item.
In the next step you will have to choose the theme page type (blog, product, collection etc.) from the right file picker and paste the CleverReach form snippet to the desired place.
The form will appear to all pages of your selected page type (e.g. product, blog, collection):