Follow

Forms in Shopify with CleverReach Plugin

Before you start

First of all you will need to download and install our CleverReach® E-Mail marketing plugin for Shopify: 

https://apps.shopify.com/official-cleverreach-app?surface_detail=featured&surface_inter_position=1&surface_intra_position=1&surface_type=home

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 form will be automatically created for you and linked to your synchronization Shopify list. In this list you will find your shopify email addresses.

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. 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 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.

  mceclip0.png

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.

mceclip2.png

You will be presented with different section types. One of them will be CleverReach® forms. Please choose the one you wish to insert into page and click “Add”.

mceclip3.png

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.

mceclip4.png

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).

mceclip5.png

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.

mceclip6.png

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:

mceclip7.png

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.

mceclip8.png

After saving, please click on “View” button to see the page on storefront. Now you will see CleverReach® form inside the page:

mceclip9.png

 

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).

  mceclip10.png

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.

mceclip11.png

Please go back to the shop administration and open Online Store -> Themes -> Current Theme -> Customize.

mceclip12.png

When the theme editor is opened please click on Theme actions -> Edit code menu item.

mceclip13.png

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.

mceclip14.png

The form will appear to all pages of your selected page type (e.g. product, blog, collection):

mceclip15.png

 

 

Copying an existing form in CleverReach

If you have an existing form that you would like to use in your Shopify integration, you can copy that form in your CleverReach account. All settings and styles will be copied to the new form.

  1. Click on the drop-down menu next to the desired form.

Unbenannt_1.png

2. Please be so kind and click on the “Copy” menu item.

Unbenannt_2.png

3. Enter the new form name and select recipient list used by Shopify integration (Shopify - <store-name>).

Unbenannt_3.png

4. The new created form is ready for use within your shop now:

Unbenannt_4.png

 Have fun with our plugin and start with your Shopify E-Mail marketing right now! :-)

Have more questions? Submit a request

Comments