The Shopify Dawn theme includes a newsletter section and the ability to add a 'full-width' newsletter form in the footer. However, by default, Dawn does not include the newsletter form as a block which can be added as a column in the footer. This post explains how this can be added.
As the Dawn footer already has a newsletter form we can just move this form into a block In setions/footer.liquid.
These changes are for Dawn 15.0.
Add a new block
In setions/footer.liquid the block loop starts at line 69: {%- for block in section.blocks -%}.
At line 104 we can add a new block: {%- when 'newsletter' -%}.
Then we can move the newsletter code from lines 169-230 to the block:
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading inline-richtext">{{ section.settings.newsletter_heading }}</h2>
{%- endif -%}
{%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<div class="newsletter-form__field-wrapper">
<div class="field">
<input
id="NewsletterForm--{{ section.id }}"
type="email"
name="contact[email]"
class="field__input"
value="{{ form.email }}"
aria-required="true"
autocorrect="off"
autocapitalize="off"
autocomplete="email"
{% if form.errors %}
autofocus
aria-invalid="true"
aria-describedby="ContactFooter-error"
{% elsif form.posted_successfully? %}
aria-describedby="ContactFooter-success"
{% endif %}
placeholder="{{ 'newsletter.label' | t }}"
required
>
<label class="field__label" for="NewsletterForm--{{ section.id }}">
{{ 'newsletter.label' | t }}
</label>
<button
type="submit"
class="newsletter-form__button field__button"
name="commit"
id="Subscribe"
aria-label="{{ 'newsletter.button_label' | t }}"
>
{% render 'icon-arrow' %}
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">
{%- render 'icon-error' -%}
{{- form.errors.translated_fields.email | capitalize }}
{{ form.errors.messages.email -}}
</small>
{%- endif -%}
</div>
{%- if form.posted_successfully? -%}
<h3
class="newsletter-form__message newsletter-form__message--success form__message"
id="ContactFooter-success"
tabindex="-1"
autofocus
>
{% render 'icon-success' -%}
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{%- endform -%}
</div>
We can now delete the newsletter enabled check that enclosed the newsletter logic:
{%- if section.settings.newsletter_enable -%}
{%- endif -%}
For the heading text, we need to change the settings referrence from section.settings to block.settings:
{%- if block.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading inline-richtext">{{ block.settings.newsletter_heading }}</h2>
{%- endif -%}
Settings
Now we can delete the defult newsletter settings (lines 437-448):
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "inline_richtext",
"id": "newsletter_heading",
"default": "t:sections.footer.settings.newsletter_heading.default",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
Finally, in the blocks settings, we can add the settings for the newsletter section:
"blocks": [
{
"type": "newsletter",
"name": "Newsletter Block",
"settings": [
{
"type": "inline_richtext",
"id": "newsletter_heading",
"label": "Heading",
"default": "Subscribe to our emails"
}
]
},
We can now push the theme changes to the Shopify store. After that, in the theme editor we can add the new newsletter block.