Shopify Newsletter

About this module

A newsletter section posting to Shopify's `/contact#contact_form` with a success message block.

Installation

1. 1

   Open Shopify Admin

   Go to Online Store → Themes.

2. 2

   Edit code

   Click the ellipsis (⋯) next to your theme and choose Edit Code.

3. 3

   Create the section

   In the Sections folder, click Add a new section, name it mh-newsletter, and replace the contents with the Liquid source below.

4. 4

   Save

   Save the file. The section now appears in the Theme Customizer.

5. 5

   Add it to the page

   Open the Theme Customizer, click Add section, search for it and add it where you like.

Usage

1. 1

   Paste the section

   Create `mh-newsletter` under Sections and paste the source.

   {{ 'styles.css' | asset_url | stylesheet_tag }}
   <section class="mh-newsletter" style="background: {{ section.settings.background }}">
     <div class="mh-newsletter-inner">
       {% if section.settings.heading != blank %}
         <h2 class="mh-newsletter-title">{{ section.settings.heading }}</h2>
       {% endif %}
       {% if section.settings.subtext != blank %}
         <div class="mh-newsletter-sub">{{ section.settings.subtext }}</div>
       {% endif %}
       {% form 'customer', class: 'mh-newsletter-form' %}
         <input type="hidden" name="contact[tags]" value="newsletter" />
         <label class="mh-visually-hidden" for="mh-news-email">Email</label>
         <input
           id="mh-news-email"
           type="email"
           name="contact[email]"
           placeholder="you@example.com"
           required
           autocomplete="email"
         />
         <button type="submit">{{ section.settings.button_label }}</button>
       {% endform %}
       {% if form.posted_successfully? %}
         <p class="mh-newsletter-success">Thanks — you're on the list!</p>
       {% endif %}
     </div>
   </section>
   
   {% schema %}
   {
     "name": "MH Newsletter",
     "tag": "section",
     "settings": [
       { "type": "text", "id": "heading", "label": "Heading", "default": "Join the list" },
       { "type": "richtext", "id": "subtext", "label": "Subtext", "default": "<p>Be first to know about new products and sales.</p>" },
       { "type": "text", "id": "button_label", "label": "Button label", "default": "Subscribe" },
       { "type": "color", "id": "background", "label": "Background", "default": "#f4f4f5" }
     ],
     "presets": [{ "name": "MH Newsletter", "category": "ModuleHarbor" }]
   }
   {% endschema %}

2. 2

   Configure in the customizer

   Adjust the settings that ship with the section schema.