Before you start
First of all you will need to download and install our CleverReach E-Mail marketing plugin for Shopify
Besides you will have to be authorized with CleverReach and complete initial synchronization in order to use your CleverReach® forms in Shopify.
During initial synchronization, a default responsive form will be automatically created for you and linked to your Shopify list. In this list you will find your shopify email addresses.
You can also create other forms in your charged CleverReach account. When you would like to use them in Shopify you have to chose your recipient list "Shopify" while creating the form. How you can copy an existing form you can find further down in this post.
Inserting form through the theme editor in Shopify
To insert a CleverReach form to the storefront using the theme editor you firstly will have to click on “Online Store” and then on "Themes".
It will show you the current theme that is active in the shop. You can edit the page layout. You need to click on “Customize” 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 you need to 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. Now you have to choose the form you wish to insert into page and click “Add”.
On the next window, you can edit the form heading and subheading, as well as the form look on CleverReach®. Clicking on the link will take you directly to the form in your CleverReach® account where you can add more elements to the form if you would like to.
You can view live changes to the form on the page on the right side.
Once you are satisfied with how the form looks, you can save changes and publish the theme.
Now your form is insert to your shop 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. First of all you have to go to the forms section on the application dashboard page within Shopify. There you have to choose the form you wish to insert.
In the next step you will have to click on the three dots icon (“...”) for more options and to click “Add form” in the dropdown menu.
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. With clicking on the “Copy” button you copy that code.
Now you will have to 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 xou e. g. you have to 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 you can click on the “View” button to see the page on storefront and you will see the form inside your 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 you will have to go to the Forms section.
In the next step you have to choose the form you wish to insert, click three dots icon (“...”) for more options and then click on “Add form” in the dropdown menu.
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.
Now you need to go back to the shop administration and open Online Store -> Themes -> Customize.
When the theme editor is opened 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):
Now the form is on your page and new recipients can subscribe easy and quick for your newsletter.
Copying an existing form in CleverReach
If you have an existing form that you would like to use in your Shopify integration, you have the opportunity to copy that form in your chargeable CleverReach account. All settings and styles will be copied to the new form and you can create as much as forms as you like and need.
In the first step you have to click on the drop-down menu next to the desired form.
2nd step you will have to click on the Copy menu item.
3rd step: Now you will have to enter the new form name and select the recipient list used by our Shopify plugin (Shopify - <store-name>).
The new created form is ready to use within your shop now:
Finished - you can insert your copied form on every Shopify page you would like to.
By the way, you can quickly and easily send the next newsletter to your customers from Shopify. To do this, please be so kind and click on the tab "More actions" under "Customers". There you have a button to send the next newsletter quickly and easily to your recipients:
If you have any questions, please feel free to contact our support team at any time.
Have fun with our plugin and start with your Shopify E-Mail marketing right now! :-)