The majority of Shopify templates come with a default signup form at the bottom of the page. Depending on the template you're using for your store, this signup form might not be automatically integrated with Omnisend and need to be integrated manually. To do so, you will need to edit a couple of code lines on your Shopify store. 


ATTENTION:
This requires a manual modification of your store code. This means that in case you decide to remove Omnisend application from your store, you will need to manually edit the code back to its original state. Otherwise your signup form would not work correctly. 

IMPORTANT: If you are using a custom theme (purchased on Shopify theme store or 3rd party theme stores), these instructions might not be accurate. In this case we suggest contacting your theme developer and asking their help with form integration based on the instructions below.
 

Contents of this article

  1. Before you start
  2. Eligible signup forms
  3. Integrating automatically
  4. Manual integration
  5. Integrated signup form and GDPR

 

Before you start

  • This integration method allows you to collect email addresses, first names, and last names
  • You need to have the signup form present on your website prior the integration
  • This method does not provide you with a signup form, just integrates the one you already have
  • Add a Tag to organize your new signups into segments (you can use existing tags or create a new one) and send targeted communication based on the segments you create

 

Eligible signup forms

This type of integration is only available to a certain type of signup forms and might not be a solution for all cases. It works on the signup forms, that are available as a part of your website template. Usually those signup forms are available on the footer of your website, but the exact placement is not that important in this case. 

What is important, is that this form is a part of your website and is not provided by a third party. Omnisend is then able to locate it's code (sometimes automatically, sometimes with some manual help) and capture the signups.

Usually these signup forms look similar to the one shown below.

This article explains how you can integrate it on your Shopify store. If you are using BigCommerce or some other, refer to these articles:

 

Integrating automatically

Once you start the integration process, there is a high chance you will be able to do it automatically. Our handy wizard should help you to go through the process, which consists of two main steps:

  1. Checking current integration status by signing via that form
  2. Fixing the issues, if there any (manual integration)

Checking current integration status

To start checking your integration status, first you need to enable the subscribers collection (if it is not yet enabled). To do so, locate the signup form on your Forms tab and click Check & Fix. Clicking on the name of the form will not bring you to this wizard, so make sure you're clicking the button and not the signup form name.

You should now see Check now and Disable this form buttons activate. 

This means you can start checking the integration status. Follow the instructions on that page to proceed with the check of integration:

  • signup via that form using a not yet subscribed email address
  • click the Check now button to initiate the check

If you subscribe with an email address that is already on your list or if the integration is not working, you will receive an error message.
Please make sure you are testing with a completely new email address.

If the newly signed up email address goes through, you will receive a success message and start seeing the reports for this signup form.

Now you can click Edit next to the signup form to edit the success and error messages and it's design or go to check the reports. 

 

Manual integration

In case your signup form does not work out of the box, you have a couple of options:

  1. Adding frontend selectors manually.
  2. Contacting our support for help.

Adding selectors manually

Changing the needed code is simple. You will need to locate footer.liquid on your Shopify store admin (if you can't find it, refer to the developer of your design theme). Here's how you do that:

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).
  2. In the left sidebar, click the drop-down menu, then click Edit code.
  3. On the Edit HTML/CSS page, you can edit these files and add others. The page shows a list of theme files and a space for editing them. Navigate to Sections > footer.liquid

NOTE: If you are not able to locate a file in Sections > footer.liquid, please try searching for Snippets > newsletter-form.liquid or Snippets > newsletter.liquid files.
Once you have the file located, proceed with the following changes:

1. Locate:

{% form 'customer' %}

Change to:

<form class="omnisend-subscribe-form">
<!-- {% form 'customer' %} -->



2. Locate:

{% endform %}

Change to:

<!-- {% endform %} -->
</form>



3. Locate:

<input type="email" ... class="..." ...>

Update class to include "omnisend-subscribe-input-email":

<input type="email" ... class="... omnisend-subscribe-input-email" ...>


Example

For example, this code: 

{% form 'customer' %}
    {{ form.errors | default_errors }}
    {% if form.posted_successfully? %}
      <p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
    {% else %}
       <div class="input-group password__input-group">
        <input type="hidden" name="contact[tags]" value="newsletter">
        <input type="email"
          name="contact[email]"
          id="Email"
          class="input-group__field newsletter__input"
          value="{% if customer %}{{ customer.email }}{% endif %}"
          placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
          autocorrect="off"
          autocapitalize="off">        
<span class="input-group__btn">
          <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
            <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
          </button>
        </span>
      </div>
    {% endif %}
  {% endform %}

Should be updated to look the following way:

<form class="omnisend-subscribe-form">
<!-- {% form 'customer' %} -->
    {{ form.errors | default_errors }}
    {% if form.posted_successfully? %}
      <p class="form--success">{{ 'general.newsletter_form.confirmation' | t }}</p>
    {% else %}
       <div class="input-group password__input-group">
        <input type="hidden" name="contact[tags]" value="newsletter">
        <input type="email"
          name="contact[email]"
          id="Email"
          class="input-group__field newsletter__input omnisend-subscribe-input-email"
          value="{% if customer %}{{ customer.email }}{% endif %}"
          placeholder="{{ 'general.newsletter_form.email_placeholder' | t }}"
          autocorrect="off"
          autocapitalize="off">        
<span class="input-group__btn">
          <button type="submit" class="btn newsletter__submit" name="commit" id="Subscribe">
            <span class="newsletter__submit-text--large">{{ 'general.newsletter_form.submit' | t }}</span>
          </button>
        </span>
      </div>
    {% endif %}
  <!-- {% endform %} -->
</form>

Troubleshooting

In case you are not able to integrate the Newsletter footer form from your store, check our Troubleshooting article to find more information.
 

Integrated signup form and GDPR

To be able to use this kind of integration and be in line with GDPR requirements, you should make sure that your subscribers are fully aware to what they are signing up and how their data will be used. 

As we cannot collect subscriber consent via such integration (due to missing some crucial data), therefore you should make sure that your leads are informed about your use of collected data and that they approve such use. This is something that you need to have implemented from the store side, not Omnisend.

This does not apply to Omnisend provided signup forms (Popup, Signup Box, Wheel of Fortune, Landing page) as all of them are GDPR compliant.

Learn more about GDPR and compliance.

Did this answer your question?