Knowledge Base

Integrate Your Standard Shopify Signup Form

The majority of Shopify templates come with a default signup form at the bottom of the page. This signup form is not automatically integrated with Soundest and needs 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 Soundest application from your store, you will need to manually edit the code back to it's original state. Otherwise your signup form would not work correctly. 

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.

Changing the needed code is simple. You will need to locate footer.liquid on your Shopify store admin. 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="soundest-subscribe-form">
<!-- {% form 'customer' %} -->

2. Locate:

{% endform %}

Change to:

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

3. Locate:

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

Update class to include "soundest-subscribe-input":

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

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="soundest-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 soundest-subscribe-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 %} -->

</form>

Instructions are not helping? Feel free to contact us at support@soundest.com for help!

Was this article helpful?
Yes No
Thank you for your feedback!