Installing Newsletter Signup Form in the Footer of your Shopify site

Note: It is highly recommended that the person using these options has knowledge of custom code for websites or has a dedicated IT/Dev team to assist them. Due to the uniqueness of website builders Patch cannot guarantee or assist in all cases when using these methods. Please note these options include modifying your theme's code. 

If you have not already, install the Patch Pixel on your Shopify store by following the instructions in this article: How to install Pixel in Shopify.

Build and save a Form. For instructions on how to build a form click here.

Use the Automatic Installation option, which can be found in the Forms module -> Step 5: Installation. Follow these instructions from within your Patch account:

Locate and edit the Form you want to embed. Navigate to Step 5: Installation. Click the purple plus button in the data table within the Automatic Installation section.

The ‘Form Setup’ dialog will open.

By default, the form you are building/editing is selected.

Click the dropdown for Form Type and select ‘Embedded’.

Insert a Unique ID: Choose a unique ID to use for embedding this form onto your site. Make sure this unique ID is easily recognizable and pertains to this specific form. Unique IDs must be globally unique. An example would be embedding a form on your contact page in which a unique identifier could be #contact-page-form.

When entering the unique ID for this setting start with a '#' (hashtag) and then include a '-' (dash) in between each word you are using. 

If you do not include the # the element will throw an error and the settings cannot be saved until this is corrected.

Once you have set your unique ID you will then need to copy the script provided in the dialog. 

Base script: <div id="your-element-id"></div>

Examples: 
<div id="contact-page-form"></div>

or

<div id="blog-newsletter"></div>

Take the script you just copied and paste it into a custom code /HTML block on your site where you want the form to show. Note: Only one HTML element ID can exist per page. 

Installing Script Onto Your Site

Update the Shopify website to display the Form. Staging sites are recommended for installation.

Navigate to your Shopify store’s current Theme and then click the 3 dots menu and select Edit Code

Navigate to the 'footer.liquid file' within the Sections folder of your Liquid Theme Code.

Within <div class=”footer-block–newsletter”></div> add the code snippet you copied from Patch. You may need to experiment with the best location. For the Dawn theme, we placed it right before the div with the class footer__content_bottom.

Test the form on your website. It is recommended to use a staging store for testing purposes.