Follow

Shopify forms - Inserting form through theme editor

Before you start, please install our app for the connection between Shopify and CleverReach.

Once you have installed and synchronized the app for the first time, a recipient list and a form for your Shopify users will be automatically created in CleverReach. You can of course create additional forms for your Shopify list in CleverReach and integrate them into your shop if you would like to. More information you will find here.

You can integrate a form into your shop through the Theme Editor, as a Proxy Page and the form can be integrated into every page.

To insert the CleverReach® form into the storefront using the Theme Editor, go to the "Themes" section under "Online Shop". There you will see the current theme that is active in the shop. To edit the page layout, please go to "Customize".

Screenshot_1.png

That will open up the theme editor where you can view all the sections that are currently present on your page. To add a new section click on the “Add Section” button at the bottom of that list.

Screenshot_2.png

You will be presented with different section types, one of them will be CleverReach® forms. Here, all the forms connected to your current Shopify list in CleverReach will be displayed. Choose the one you wish to insert into the page and click “Add”.

Screenshot_3.png

In the next window, you can edit the form heading and subheading as well as the appearance of the form on CleverReach®.

If you click on the link "Edit in CleverReach" you will be taken directly to the form editing in CleverReach, where you can add further query options in the form. You can see live changes to the form on the right side. If you are satisfied with the design of the form, you can save the changes and publish the theme.

Screenshot_4.png

Now your customers can quickly and easily register for your newsletter.

Advanced version inserting form with theme editor:

You also have the option to insert a CleverReach® form to the theme page via copying the form snippet and manually inserting it to the theme code. On the application dashboard page within Shopify you will have to go to the forms section, choose the form you wish to insert, click three dots icon (“...”) for more options (1) and click “Add form” in the dropdown menu (2).

Screenshot_ADV_1.png

In the dialog that opens, you will see a HTML code snippet that should be inserted into the page you wish to see your form on. Click on the “Copy” button to copy that code to the clipboard.

Screenshot_ADV_2.png

Go back to shop administration and open Online Store -> Themes -> Current Theme -> Customize.

Screenshot_ADV_3.png

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

Screenshot_ADV_4.png

Select theme page type (blog, product, collection etc.) from the right file picker and paste CleverReach form snippet to the desired place.

Screenshot_ADV_5.png

Inserted pages will appear to all pages of selected page type (e.g. product, blog, collection).

Screenshot_ADV_6.png 

Now your customers can quickly and easily register for your newsletter.

 


Further possibilities to add a CleverReach form to Shopify:

  1. Inserting in Pages
  2. Insert as proxy page
Have more questions? Submit a request

Comments