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).
-
-
- Navigate to the Shopify admin center.
- Expand Online Store and select Themes.
- On the Live theme, expand Actions and select Edit code.
- Under Templates, click Add a new template.
- Under Create a new template for, select page.
- Under Template type, select liquid.
- Under File name, add a value that describes the kind of page template you’re creating, and click Create template.
- 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>
- Click Save.
- Under Online Store, click Pages.
- Click Add page in the upper-right hand portion of the page.
- Add a Title, and then edit the Content area to say whatever you want.
- Under Online store | Theme template, select the new template name you just created.
- 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! 🙂