Add a newsletter signup page to a Shopify Store using the default Newsletter signup and contact database

4.5/5 - (2 votes)

In my spare time, one of the things I do is help out someone with their Shopify store.  As part of their marketing strategy, they needed to add a newsletter signup page that integrates with the default Shopify experience, adding customers to the ‘accepts email marketing’ list.

There is a widget built-in that can be added to most themes; however, because of [reasons], we needed to add a hard URL and a page that could be referenced (instead of just an input box and a text form).

So, here’s a crib course on how to do it (I’m not a Shopify guru, but I apparently play one on TV).

      1. Navigate to the Shopify admin center.
      2. Expand Online Store and select Themes.
      3. On the Live theme, expand Actions and select Edit code.
      4. Under Templates, click Add a new template.
      5. Under Create a new template for, select page.
      6. Under Template type, select liquid.
      7. Under File name, add a value that describes the kind of page template you’re creating, and click Create template.
      8. Delete all of the code that’s on the page and replace it with the following:
        <div class="page-width">
        <div class="grid">
        <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
        <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
        <p>{{ page.content }} </p>
        </div>
        
        <div class="newsletter-section{% if section.settings.show_background %} index-section--newsletter-background{% endif %}">
        <div class="page-width text-center">
        <div class="section-header text-center">
        {% if section.settings.title != blank %}
        <label for="Email" class="h2">{{ section.settings.title | escape }}</label>
        {% endif %}
        {% if section.settings.subtitle != blank %}
        <p>{{ section.settings.subtitle | escape }}</p>
        {% endif %}
        </div>
        {% 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 %}
        </div>
        </div>
        
        <div class="rte">
        {{ page.content }}
        </div>
        </div>
        </div>
        </div>
      9. Click Save.
      10. Under Online Store, click Pages.
      11. Click Add page in the upper-right hand portion of the page.
      12. Add a Title, and then edit the Content area to say whatever you want.
      13. Under Online store Theme template, select the new template name you just created.
      14. When finished, click Save.

You should then be able to preview the page and see what changes need to be made.

Good luck! Hopefully this helps some noob Shopify folks like myself! 🙂

author avatar
Aaron Guilmette
Helping companies conquer inferior technology since 1997. I spend my time developing and implementing technology solutions so people can spend less time with technology. Specialties: Active Directory and Exchange consulting and deployment, Virtualization, Disaster Recovery, Office 365, datacenter migration/consolidation, cheese.