Articles on: Popups

How to Add Embedded Forms to a Shopify Store

The success of marketing campaigns heavily depends on how quickly you acquire new subscribers. With Automizely Marketing, you can embed a customizable form on your Shopify store for turning store visitors into subscribers. Follow the below-given steps to add an embedded form.

👨‍🎨 Design your form first

Go to the ‘Popups & forms’ section > Tap on ‘Create new form campaign’ and choose the ‘Embedded form’ template

Now, you will see three tabs — ‘Settings,’ ‘Text,’ and ‘Style’ — so start entering the required details to get your form ready

⚙️ Begin with the ‘Settings’ tab

This tab comprises 6 sections:

Name: In case you want to give your embedded form a specific name, mention it in the field. Otherwise, you can leave this section with its default entry: ‘Embedded form’

Coupon: If you want to offer a coupon to new subscribers, define it manually. In case you already have a coupon campaign created, choose it from the dropdown menu

Countdown: If you want to create urgency, tap on ‘Enable’ and set the settings of your countdown timer. Else, let it be disabled.

Timing: Click on ‘Fixed’ and define the time if you want to keep your embedded form active for a particular period. Otherwise, let the radio button stick to ‘Ongoing’

Embed code: In this field, a line of code will appear as soon as you save or publish your embedded form

Audience targeting: In case you have a particular audience, set the filters accordingly. Click here to learn full details

✍️ Switch to the ‘Text’ tab

This tab consists of two sections:

First step

Header and Description: Define the content of your embedded form in these fields
Form: Specify which information you want to collect with the help of an embedded form
Primary action: Give your form button a name
Text: Enter additional content right below the form button if you want to give store visitors an extra dose of encouragement

Success step

Header and Description: Mention the content that you want to show right after collecting the required information
Action: Click on ‘Show’ to add a button to tempt new subscribers to buy from your store

🎨 Define colors for your embedded form in the ‘Style’ tab to give your brand touch

This tab has 3 sections:

Display: It’s all about setting form size, content alignment, and text font

Layout: It lets you add an image to your embedded form

Colors: You can set colors regarding the form background, text, countdown timer, and action buttons

Check all your settings for one last time and then publish your form. Once done, copy the code generated automatically in the ‘Embed code’ section of the ‘Settings’ tab.

Note that the same code can't be used multiple times for a particular page, however, you can use it for different pages. In case want to show multiple embedded forms on a specific page, you must create them separately and add the codes as explained below.

👨‍💻 Make changes to your Shopify store’s settings

Go to your Shopify store’s ‘Themes’ section > Click on the ‘Customize’ button

Choose the page in which you want to add the embedded form > Tap on the ‘Add section’

Now, if you are using a Shopify theme 1.0, select ‘Custom Liquid’ and paste your copied HTML code. In the case of a Shopify theme 2.0, select the ‘Automizely Embedded Form’ and paste the form ID

Please note that embed code and form ID are two different things. The form ID is what you see under double quotes of your embedded form code. For example, if your form code is this < div id="blahblah"> </div>, your form ID will be blahblah.

Hit the ‘Save’ button to let your embedded form go live

🤔 What should I do if there's no 'Custom Liquid' option?

It happens with some Shopify themes 1.0. But don't worry, a workaround is available:

➡️ For Debut, Narrative, and Supply themes

Choose Custom content option instead of looking for Custom Liquid → Click on the Add block option → Select Custom HTML → Paste your copied code → Hit the Save button
⚠️ Don't forget to change the container width of the Custom HTML block to 100%. By default, it is set to 50%.

➡️ For Minimal, Brooklyn, Venture, Boundless, and Simple themes

Choose Custom HTML option instead of looking for Custom Liquid → Paste your copied code → Hit the Save button
⚠️ Don't forget to change the container width of the Custom HTML block to 100%. By default, it is set to 50%.

➡️ For themes (like Express) that don't offer 'Custom code' option

On the off chance that you are using a theme that doesn't let you use custom code to add embedded form, the process is a bit complicated. Here's what you need to do:

Scenario 1: Adding the embedded form to all your Shopify pages

Go to the 'Themes' section of your Shopify admin > Click on 'Actions' and choose the 'Edit code' option

Look for theme.liquid file and then search </main>} in it. Once done, paste your embedded code right above it like this:

Scenario 2: Adding the embedded form to collection/product pages

For collection pages, go to collection.liquid file and paste the embedded form code in the end

For product pages, go to product.liquid file and paste the embedded form code in the end

Scenario 3: Willing to add the embedded form to any specific location of Shopify pages

If you have a specific location in mind for your embedded form, kindly connect with our chat support team and explain your requirement. We recommend not trying to do this on your own because you may end up messing the entire page layout. So, either use the above methods or contact us.

Besides this, if you're encountering any other issue while embedding a form on your Shopify store, discuss it with our chat support team right away

Updated on: 26/07/2022

Was this article helpful?

Share your feedback


Thank you!