Hi everyone,
I am trying to better lay out my footer using Dawn theme.
I would like 3 columns - 1 - Customer Care, 2 - Info, 3 - Newsletter sign up.
Can anyone please help me how to get the newsletter on the right hand column?
Thanks!
Please share the store URL.
Hello @designbymeg ,
Could you please share your store URL so we can check the issue and let you know the exact solution for the problem?
Regards,
CedCommerce
Hello @designbymeg ,
Thank you for your response.
To fix this issue, you need to replace the footer.liquid file code with the below-provided code.
.footer-block--newsletter{display: block !important; margin-top: 0;}{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ ‘section-footer.css’ | asset_url | stylesheet_tag }}
{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘disclosure.css’ | asset_url | stylesheet_tag }}
{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}
@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}
.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
{%- if section.blocks.size > 0 -%}
{%- liquid
if section.blocks.size == 9
assign footer_grid_class = ‘grid–3-col-tablet’
elsif section.blocks.size > 6
assign footer_grid_class = ‘grid–4-col-desktop’
elsif section.blocks.size > 4
assign footer_grid_class = ‘grid–3-col-tablet’
endif
-%}
{%- for block in section.blocks -%}
{%- if block.settings.heading != blank -%}
{{- block.settings.heading | escape -}}
{%- endif -%}
{%- case block.type -%}
{%- when ‘text’ -%}
{{ block.settings.subtext }}
{%- when ‘link_list’ -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
-
{{ link.title }}
{%- for link in block.settings.menu.links -%}
{%- endfor -%}
{%- endif -%}
{%- when ‘image’ -%}
{%- if block.settings.image != blank -%}
{%- assign image_size = block.settings.image_width | append: ‘x’ -%}
<img
srcset= “{{ block.settings.image | img_url: image_size }}, {{ block.settings.image | img_url: image_size, scale: 2 }} 2x”
src=“{{ block.settings.image | image_url: width: 400 }}”
alt=“{{ block.settings.image.alt | escape }}”
loading=“lazy”
width=“{{ block.settings.image.width }}”
height=“{{ block.settings.image.height }}”
style=“max-width: min(100%, {{ block.settings.image_width }}px);”
{%- else -%}
{{ ‘image’ | placeholder_svg_tag: ‘placeholder-svg placeholder’ }}
{%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- if section.settings.newsletter_enable -%}
{%- if section.settings.newsletter_heading != blank -%}
{{ section.settings.newsletter_heading | escape }}
{%- endif -%}
{%- form ‘customer’, id: ‘ContactFooter’, class: ‘footer__newsletter newsletter-form’ -%}
<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
{{ ‘newsletter.label’ | t }}
{% render ‘icon-arrow’ %}
{%- if form.errors -%}
{% render ‘icon-error’ %}{{ form.errors.translated_fields[‘email’] | capitalize }} {{ form.errors.messages[‘email’] }}
{%- endif -%}
{%- if form.posted_successfully? -%}
{% render 'icon-success' %}{{ 'newsletter.success' | t }}
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- if section.settings.show_social -%}
-
{%- render ‘icon-twitter’ -%}
{{ ‘general.social.links.twitter’ | t }}
-
{%- render ‘icon-facebook’ -%}
{{ ‘general.social.links.facebook’ | t }}
-
{%- render ‘icon-pinterest’ -%}
{{ ‘general.social.links.pinterest’ | t }}
-
{%- render ‘icon-instagram’ -%}
{{ ‘general.social.links.instagram’ | t }}
-
{%- render ‘icon-tiktok’ -%}
{{ ‘general.social.links.tiktok’ | t }}
-
{%- render ‘icon-tumblr’ -%}
{{ ‘general.social.links.tumblr’ | t }}
-
{%- render ‘icon-snapchat’ -%}
{{ ‘general.social.links.snapchat’ | t }}
-
{%- render ‘icon-youtube’ -%}
{{ ‘general.social.links.youtube’ | t }}
-
{%- render ‘icon-vimeo’ -%}
{{ ‘general.social.links.vimeo’ | t }}
{%- if settings.social_twitter_link != blank -%}
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
{%- form ‘localization’, id: ‘FooterCountryFormNoScript’, class: ‘localization-form’ -%}
{{ 'localization.country_label' | t }}
{% render ‘icon-caret’ %}
{{ ‘localization.update_country’ | t }}
{%- endform -%}
{%- form ‘localization’, id: ‘FooterCountryForm’, class: ‘localization-form’ -%}
{{ 'localization.country_label' | t }}
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render ‘icon-caret’ %}
-
<a class=“link link–text disclosure__link caption-large{% if country.iso_code == localization.country.iso_code %} disclosure__link–active{% endif %} focus-inset” href=“#”{% if country.iso_code == localization.country.iso_code %} aria-current=“true”{% endif %} data-value=“{{ country.iso_code }}”>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
{%- for country in localization.available_countries -%}
{%- endfor -%}
{%- endform -%}
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
{%- form ‘localization’, id: ‘FooterLanguageFormNoScript’, class: ‘localization-form’ -%}
{{ 'localization.language_label' | t }}
{% render ‘icon-caret’ %}
{{ ‘localization.update_language’ | t }}
{%- endform -%}
{%- form ‘localization’, id: ‘FooterLanguageForm’, class: ‘localization-form’ -%}
{{ 'localization.language_label' | t }}
{{ localization.language.endonym_name | capitalize }}
{% render ‘icon-caret’ %}
-
<a class=“link link–text disclosure__link caption-large{% if language.iso_code == localization.language.iso_code %} disclosure__link–active{% endif %} focus-inset” href=“#” hreflang=“{{ language.iso_code }}” lang=“{{ language.iso_code }}”{% if language.iso_code == localization.language.iso_code %} aria-current=“true”{% endif %} data-value=“{{ language.iso_code }}”>
{{ language.endonym_name | capitalize }}
{%- for language in localization.available_languages -%}
{%- endfor -%}
{%- endform -%}
{%- endif -%}
{%- if section.settings.payment_enable -%}
{{ ‘sections.footer.payment’ | t }}
-
{{ type | payment_type_svg_tag: class: ‘icon icon–full-color’ }}
{%- for type in shop.enabled_payment_types -%}
{%- endfor -%}
{%- endif -%}
© {{ ‘now’ | date: “%Y” }}, {{ shop.name | link_to: routes.root_url }}
{{ powered_by_link }}
{% javascript %}
class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector(‘input[name=“locale_code”], input[name=“country_code”]’),
button: this.querySelector(‘button’),
panel: this.querySelector(‘.disclosure__list-wrapper’),
};
this.elements.button.addEventListener(‘click’, this.openSelector.bind(this));
this.elements.button.addEventListener(‘focusout’, this.closeSelector.bind(this));
this.addEventListener(‘keyup’, this.onContainerKeyUp.bind(this));
this.querySelectorAll(‘a’).forEach(item => item.addEventListener(‘click’, this.onItemClick.bind(this)));
}
hidePanel() {
this.elements.button.setAttribute(‘aria-expanded’, ‘false’);
this.elements.panel.setAttribute(‘hidden’, true);
}
onContainerKeyUp(event) {
if (event.code.toUpperCase() !== ‘ESCAPE’) return;
this.hidePanel();
this.elements.button.focus();
}
onItemClick(event) {
event.preventDefault();
const form = this.querySelector(‘form’);
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}
openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute(‘hidden’);
this.elements.button.setAttribute(‘aria-expanded’, (this.elements.button.getAttribute(‘aria-expanded’) === ‘false’).toString());
}
closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === ‘BUTTON’;
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}
customElements.define(‘localization-form’, LocalizationForm);
{% endjavascript %}
{% schema %}
{
“name”: “t:sections.footer.name”,
“blocks”: [
{
“type”: “link_list”,
“name”: “t:sections.footer.blocks.link_list.name”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Quick links”,
“label”: “t:sections.footer.blocks.link_list.settings.heading.label”,
“info”: “t:sections.footer.blocks.link_list.settings.heading.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “footer”,
“label”: “t:sections.footer.blocks.link_list.settings.menu.label”,
“info”: “t:sections.footer.blocks.link_list.settings.menu.info”
}
]
},
{
“type”: “text”,
“name”: “t:sections.footer.blocks.text.name”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Heading”,
“label”: “t:sections.footer.blocks.text.settings.heading.label”
},
{
“type”: “richtext”,
“id”: “subtext”,
“default”: “
Share contact information, store details, and brand content with your customers.
”,“label”: “t:sections.footer.blocks.text.settings.subtext.label”
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 50,
“max”: 200,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 100
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Image alignment on large screen”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
}
]
}
],
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.footer.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.footer.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.footer.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.footer.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.footer.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.footer.settings.color_scheme.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__1.content”,
“info”: “t:sections.footer.settings.header__1.info”
},
{
“type”: “checkbox”,
“id”: “newsletter_enable”,
“default”: true,
“label”: “t:sections.footer.settings.newsletter_enable.label”
},
{
“type”: “text”,
“id”: “newsletter_heading”,
“default”: “Subscribe to our emails”,
“label”: “t:sections.footer.settings.newsletter_heading.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”: false,
“label”: “t:sections.footer.settings.show_social.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__3.content”,
“info”: “t:sections.footer.settings.header__4.info”
},
{
“type”: “checkbox”,
“id”: “enable_country_selector”,
“default”: true,
“label”: “t:sections.footer.settings.enable_country_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__5.content”,
“info”: “t:sections.footer.settings.header__6.info”
},
{
“type”: “checkbox”,
“id”: “enable_language_selector”,
“default”: true,
“label”: “t:sections.footer.settings.enable_language_selector.label”
},
{
“type”: “header”,
“content”: “t:sections.footer.settings.header__7.content”
},
{
“type”: “checkbox”,
“id”: “payment_enable”,
“default”: true,
“label”: “t:sections.footer.settings.payment_enable.label”
},
{
“type”: “header”,
“content”: “t:sections.all.spacing”
},
{
“type”: “range”,
“id”: “margin_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.footer.settings.margin_top.label”,
“default”: 0
},
{
“type”: “header”,
“content”: “t:sections.all.padding.section_padding_heading”
},
{
“type”: “range”,
“id”: “padding_top”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_top”,
“default”: 36
},
{
“type”: “range”,
“id”: “padding_bottom”,
“min”: 0,
“max”: 100,
“step”: 4,
“unit”: “px”,
“label”: “t:sections.all.padding.padding_bottom”,
“default”: 36
}
],
“default”: {
“blocks”: [
{
“type”: “link_list”
},
{
“type”: “text”
}
]
}
}
{% endschema %}
Note:- Duplicate your current theme then make these changes.
Hope it resolves your issue. Please connect with us if you need any more help.
All the best,
CedCommerce
Hi @Cedcommerce
Is it possible to have the newsletter sign up on the right to fill that space? Rather than underneath?
Thanks!
URL is
Hello @designbymeg ,
Hope you are doing well!
Yes, it is. Also, we have shared the updated code that will move the newsletter to the right side, you need to replace your footer.liquid file code with the code we provided in the last reply and then update the footer settings.
Please inbox us with your query if you need any further help.
Regards,
CedCommerce