This guide will walk through the process of installing your signup form to a Shopify-powered website.
NOTE: You’ll need website admin or editor access as you will need to edit your site's code base. If you’re not sure how to access your website’s code, you may need to consult your website software’s support documentation.
Locate Your Form's JS Snippet
Access your signup form’s JavaScript code snippet by navigating to the Install section in the form builder. Your form’s snippet will be automatically generated when you save your form. Click Copy Code to copy the snippet to your clipboard.
Copy and Paste Your Code to Your Shopify Website
You can paste your form’s code snippet and display your form wherever you’d like it to appear on your website or a specific page, such as a particular product page or a blog post.
Pop-Ups: To display your form across your entire website
- Log into Shopify and navigate to Online Store in the left menu. Go to your store’s Themes.
- Under Live Theme, hit Actions and select Edit Code.
- Open the “theme.liquid” file. Then, paste the DojoMojo form snippet directly above the closing </head> tag. The JavaScript in the header will load the script in the order in which it is listed. We recommend placing the snippet right before the closing header tag so that the form loads last.
NOTE: For Pop-Ups, this method will display the form across your website (e.g. the homepage, product pages, etc). Learn how to install the form on specific pages.
- Hit Save.
Pop-Ups: To display your form on a specific page
To display your form solely on specific pages or exclude it from certain pages, head back to the form builder in DojoMojo > Setup > Behavior > URL Targeting. From there, you'll be able to define the display rules for your form.
You can also simply install the form on a specific web page by locating the individual Template file for the page you want to display the signup form. In the page’s Template file, copy the DojoMojo JavaScript and paste it right before the closing </div> container.
Embeds: To display your form on a specific page
Embedded forms, unlike pop-ups, are baked directly into your site's content, so you'll only want to display the form on specific pages designed to collect subscriber data.
- In your theme.liquid file, find the <head> tag.
- Paste the form's snippet just before the closing </head> tag.
- Then, paste the snippet on the specific page you'd like the form to appear using a custom HTML block.