How-to Track Web Forms in Shopify

May 03, 2024 - Mike Hakob

Every form on your site serves as a bridge to reach potential clients. Neglected form submissions are the same as missed opportunities with prospective customers and the revenue they might have generated.

Research reveals the majority of your site’s visitors leave without fulfilling their intended tasks. My journey through content marketing has consistently demonstrated that there is a solution for each problem; the key is to take decisive action.

We’ll integrate FormStory with your Shopify platform. This strategy ensures you capture every lead, preventing lost opportunities caused by form issues, incomplete entries, and various technical errors.

How to Set Up FormStory in 3 Steps

Step N1: Log into your FormStory account and enter the URL containing the form you want to track.
If you don’t have an account, sign up using your Google account or create a new one by clicking “Create Account”.

formstory configuration

Step N2: Select the part of the Form you want to monitor.

Formstory configuration to select form

Step N3: Copy & paste the provided script into the <head> of your website’s source code.

Formstory tracking script
There are two options to add the custom script to the source code for Shopify users.

Method N1: With an App

This method is one of the simplest things you can do if you are a non-techy person.

Choose the right app, we suggest using XO Insert Code.

Step N1: Install as normal Shopify apps

From the Shopify app page, click “Get”.

Click “Install app”, this will install the Insert Code to Header and Footer App to your shop.

After the installation, the app panel will be embedded in your Shopify Apps page.

Step N2: Navigate to theme customize

Then click App embeds, and enable XO Insert code Header & XO Insert code Body. In our case, we will only need the “XO Insert code Header”

Step N3: Add the script from App Embeds

  • Enable the “XO Insert code Header” from the app block
  • Intert our given script to the “Custom JS Code” editor

Viola! You are now ready to track all your Shopify Forms!

Method N2: Without an App: Manually

Implementing scripts or codes, like those provided by FormStory, into <head> section of your Shopify site might sound hard, but it’s quite manageable once you break down the steps. Here’s a simplified guide to get you started.

Step 1: Backup Your Current Theme

Create a backup of your theme to be extra careful.
This way, you safeguard your site against potential mishaps.

  • Go to Online Store > Themes.
  • Under your active theme, find and click the Actions dropdown.
  • Select Duplicate to create a backup copy. Shopify will take a moment to complete the duplication.

This process ensures you have a safe copy to revert to if needed.

Step 2: Accessing Code Editor

  • Navigate to the Online Store > Themes.
  • Find your current theme and click Actions > Edit Code.

This opens up the code editor where you can tweak your Shopify store’s code.

Step 3: Inserting FormStory Script

Now, for adding the FormStory script:

  • Locate the theme.liquid file under the Layout directory.
  • Use CMD + F (Mac) or CTRL + F (Windows) to find the </head> closing tag.
  • Paste the FormStory script just before the </head> tag. If there’s code right above it, simply make some space with the ENTER key.
  • Save your changes, ensuring no other code has been altered or removed. Even a small mistake could impact your site’s functionality.

Step 4: Previewing Changes

Preview before you make any changes live:

  • Under Themes, locate your DEV theme.
  • Click Actions > Preview to see your adjustments in action.
  • If everything looks correct, you’re on the right track.

Step 5: Going Live

Satisfied with the preview? It’s time to publish:

Select Actions > Publish on your DEV theme to make it active.

Follow the naming convention to update your theme names, ensuring everything is correctly labeled as LIVE, BACKUP, and DEV for future adjustments

These steps helped you to integrate the FormStory script into your Shopify store without risking its stability. Happy tracking!

Mike Hakob

Mike Hakob is a seasoned digital marketing maven with over 15 years of mastery, and the visionary Co-Founder of FormStory. As the driving force behind Andava Digital, he has dedicated his expertise to empowering small to medium-sized businesses, crafting tailor-made websites and pioneering innovative marketing strategies. With a graduate degree in Management of Information Systems, Mike seamlessly blends the realms of technology and marketing, consistently setting new industry benchmarks and championing transformative digital narratives.