Introduction
Welcome back to OptiXpert blogpost ! In today’s tutorial, I’ll show you how
to add newsletter block inside in footer section. Shopify’s free themes like Dawn, Refresh, and Sense don’t have a built-in
option to do this. But don’t worry ! In this video, I’ll guide you step by
step on how to add newsletter block inside in footer section.
General Steps for Adding Newsletter Block In Footer Section
Step 1: Duplicate Your Theme Files
Before making any changes to your Shopify theme files, always duplicate your theme. This ensures you have a backup in case anything goes wrong during the customization process.
- Go to your Shopify dashboard.
- Navigate to Online Store > Themes.
-
In the “Current theme” section, click on Actions > Duplicate.
Step 2: Customize The Footer.liquid File
For adding the newsletter block in the footer section small code change is required. In this step i will guide you step by step process for the code changes.
- In the Shopify admin, go to Online Store > Themes
-
Click Actions > Edit code for your active theme.
-
Now open the footer.liquid file
- Remove the block of code from footer.liquid which is attached below.
- In next step copy the block of code which is attached below.
-
Now Search the "{% case block.type %}" & "{% endcase %}"in footer.liquid file and paste the copied code in
between the search case section.
- Now save the footer.liquid file.
- Now add the below code in the footer section schema block.
-
As a final step customize the footer section.
Code Snippet 1
<div
class="footer-block--newsletter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if section.settings.newsletter_enable -%}
<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 }}"
>
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
{{- 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
>
<span class="svg-wrapper">
{{- 'icon-success.svg' | inline_asset_content -}}
</span>
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
{%- if shop.features.follow_on_shop? and section.settings.enable_follow_on_shop -%}
<div class="footer__follow-on-shop">
{{ shop | login_button: action: 'follow' }}
</div>
{%- endif -%}
{%- if section.settings.show_social and has_social_icons -%}
{%- render 'social-icons', class: 'footer__list-social' -%}
{%- endif -%}
</div>
Code Snippet 2
{%- when 'newsletter' -%}
<div
class="footer-block--newsletter{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
{% if settings.animations_reveal_on_scroll %}
data-cascade
{% endif %}
>
{%- if block.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if block.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading inline-richtext">
{{ block.settings.newsletter_heading }}
</h2>
{%- endif -%}
{%- if block.settings.newsletter_description != blank -%}
<p class="inline-richtext">
{{ block.settings.newsletter_description }}
</p>
{% 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 }}"
>
<span class="svg-wrapper">
{{- 'icon-arrow.svg' | inline_asset_content -}}
</span>
</button>
</div>
{%- if form.errors -%}
<small class="newsletter-form__message form__message" id="ContactFooter-error">
<span class="svg-wrapper">
{{- 'icon-error.svg' | inline_asset_content -}}
</span>
{{- 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
>
<span class="svg-wrapper">
{{- 'icon-success.svg' | inline_asset_content -}}
</span>
{{- 'newsletter.success' | t }}
</h3>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
{%- if shop.features.follow_on_shop? and block.settings.enable_follow_on_shop -%}
<div class="footer__follow-on-shop">
{{ shop | login_button: action: 'follow' }}
</div>
{%- endif -%}
{%- if block.settings.show_social and has_social_icons -%}
{%- render 'social-icons', class: 'footer__list-social' -%}
{%- endif -%}
</div>
Code Snippet 3
{
"type": "newsletter",
"name": "Newsletter",
"settings": [
{
"type": "inline_richtext",
"id": "newsletter_heading",
"default": "Subscribe to our emails",
"label": "t:sections.footer.settings.newsletter_heading.label"
},
{
"type": "richtext",
"id": "newsletter_description",
"default": "t:sections.footer.blocks.text.settings.subtext.default",
"label": "Newsletter Description"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__9.content",
"info": "t:sections.footer.settings.header__9.info"
},
{
"type": "checkbox",
"id": "enable_follow_on_shop",
"default": true,
"label": "t:sections.footer.settings.enable_follow_on_shop.label"
},
{
"type": "checkbox",
"id": "newsletter_enable",
"default": true,
"label": "t:sections.footer.settings.newsletter_enable.label"
},
{
"type": "header",
"content": "t:sections.footer.settings.header__2.content",
"info": "t:sections.footer.settings.header__2.info"
},
{
"type": "checkbox",
"id": "show_social",
"default": true,
"label": "t:sections.footer.settings.show_social.label"
}
]}
Special Offer:-
Are you looking to elevate your Shopify store with a stunning,
premium quality theme? Look no further! I am offering a selection of
top-notch Shopify themes designed to enhance your online presence and
boost sales—all at affordable prices.
Whether you're starting a new store or revamping an existing one, my premium themes are tailored to meet your needs, ensuring a seamless shopping experience for your customers. With responsive designs, customizable features, and SEO-friendly layouts, you can attract more visitors and convert them into loyal customers.
Don’t miss out on the opportunity to give your Shopify store the professional look it deserves! Contact me today for more information and to find the perfect theme for your business.
Whether you're starting a new store or revamping an existing one, my premium themes are tailored to meet your needs, ensuring a seamless shopping experience for your customers. With responsive designs, customizable features, and SEO-friendly layouts, you can attract more visitors and convert them into loyal customers.
Don’t miss out on the opportunity to give your Shopify store the professional look it deserves! Contact me today for more information and to find the perfect theme for your business.
Tushar Garg
tushar.garg.earningac@gmail.com
tushar.garg.earningac@gmail.com
Looking for something specific? Drop me a message.