How to Add Embedded Forms to a Shopify Store
Plans: All plans Platforms: Shopify
The success of marketing campaigns heavily depends on how quickly you acquire new subscribers. With AfterShip Email, 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.
Log into your AfterShip Email account and navigate to the Popups & forms section > Tap on Create new form campaign and choose an Embedded form of your choice.
Now, you will see three tabs — Settings, Text, and Style — so start entering the required details to get your form ready.
This tab comprises of 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 Enabled 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.
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
This tab has 3 sections:
Display: It’s all about setting the 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 you want to show multiple embedded forms on a specific page, you must create them separately and then add the codes as explained below.
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
It happens with some Shopify themes 1.0. But don't worry, a workaround is available:
For Debut, Narrative, and Supply themes
Choose the 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 the 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 a 'Custom code' option
If you are using a theme that doesn't let you use custom code to add embedded form, 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 into the end
For product pages, go to product.liquid file and paste the embedded form code into 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 requirements. We recommend not trying to do this on your own because you may end up messing with 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.
Overview
The success of marketing campaigns heavily depends on how quickly you acquire new subscribers. With AfterShip Email, 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
Log into your AfterShip Email account and navigate to the Popups & forms section > Tap on Create new form campaign and choose an Embedded form of your choice.
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 of 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 Enabled 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 it your brand touch
This tab has 3 sections:
Display: It’s all about setting the 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 you want to show multiple embedded forms on a specific page, you must create them separately and then 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 the 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 the 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 a 'Custom code' option
If you are using a theme that doesn't let you use custom code to add embedded form, 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 into the end
For product pages, go to product.liquid file and paste the embedded form code into 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 requirements. We recommend not trying to do this on your own because you may end up messing with 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: 23/04/2024
Thank you!