Shopify themes, liquid, logos, and UX
Hi everyone I would like to add a new block to the Footer of the Dawn theme.
The type of block to be added is that of the Custom Liquid, which is the one already present in the Dawn theme but in the sections.
Who can explain to me how it is possible to do?
Thanks.
Solved! Go to the solution
This is an accepted solution.
@Zens Hi, Sorry for the confusion, I thought your adding a liquid code. What are you trying to add though? A paragraph? Here is the way to show the input code. After the {% case block.type %} add the code below.
Custom liquid code I believe is a way to add a piece of a code or a snippet, not just writing a paragraph. If you wish to write a paragraph then you have to <p></p>
{% when 'custom_liquid' %}
{{block.settings.custom_liquid}}
Regarding the error. Try removing the html block in the footer when you customize the theme. It should refresh. Let me know if you still have issues
can you please share store url and more details what do you need extra block
Hello @KetanKumar
https://rivivonetdawn.myshopify.com/
this is the password iwahsh
This is a test site not the one where the piece of code will go.
I would like to be able to insert an html block or, even better, a liquid block (as is already present in this topic in the sections), because I can insert useful elements for the management of the site. Clickable images etc.
Thanks
Hello @Zens , adding a new block to the footer section would require some basic knowledge of HTML and a bit of CSS.
You would need to edit the footer.liquid section and add the HTML block exactly where you want it to be positioned in the page. You can inspect the source code of your footer to determine where that would be in some instances.
Also, you might need to add some CSS styles like padding, margin, display, e.t.c to make it really fit in to the footer and not like it was just dropped on it.
can you try this way
https://shopify.dev/themes/architecture/sections/section-schema
{{ block.settings.section_html }}
schema
"type": "html",
"id": "section_html",
@KetanKumar I have added this piece of code
{
"type": "html_content",
"name": "HTML Content",
"settings": [
{
"type": "html",
"id": "html_area",
"label": "Custom HTML",
"default": "<div><p>Some HTML content</p></div>"
}
]
},
I don't know if it's the same thing you suggested to me.
I placed it in the Schema block of the Footer.liquid file.
I see the box in the settings but when I insert, for example, a piece of code it is not displayed.
Why?
Thanks
yes its current can you please check your code may something are missing
I see the difference in this piece of code that I don't have.
{{ block.settings.section_html }}
This code if I have to use it, where should I put it, in which file and where?
Thanks
footer other block code
Uhm... @KetanKumar
Unfortunately I didn't understand ... what do you mean by "other block code"?
Do I always have to insert this line
{{ block.settings.section_html }}
in the footer.liquid file or another file always in the footer? Which?
thanks.
can you please share footer code
@KetanKumar This is my footer.liquid file code
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer color-{{ section.settings.color_scheme }} gradient">
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
<div class="footer__content-top page-width">
{%- 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
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="footer-block__details-content rte">
{{ block.settings.subtext }}
</div>
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- 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 | img_url: '400x' }}"
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 -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer-block--newsletter">
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</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>
{%- endif -%}
{%- if section.settings.show_social -%}
<ul class="footer__list-social list-unstyled list-social" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" aria-describedby="a11y-external-message">
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="footer__content-bottom">
<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
</button>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for country in localization.available_countries -%}
<li class="disclosure__item" tabindex="-1">
<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 }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
</button>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for language in localization.available_languages -%}
<li class="disclosure__item" tabindex="-1">
<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 }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
<div class="footer__column footer__column--info">
{%- if section.settings.payment_enable -%}
<div class="footer__payment">
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="footer__copyright caption">
<small class="copyright__content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small class="copyright__content">{{ powered_by_link }}</small>
</div>
</div>
</div>
</div>
</footer>
{% 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('ul'),
};
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": "<p>Share store details, promotions, or brand content with your customers.</p>",
"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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
If I understand correctly, is this what needs to be changed?
Thanks
Hi @Zens, try it and let me know if the solution below works for you 🙂
Go to footer.liquid this code and look for this code:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
Right under it paste the following:
{
"type": "html",
"name": "HTML",
"settings": [
{
"type": "html",
"id": "section_html",
"default": "your code here",
"label": "HTML",
"info": "Insert custom HTML"
}
]
},
Now look for "{%- case block.type -%}" in the same footer.liquid file. Paste the following code right underneath.
{%- when 'html' -%}
<div class="footer-block__details-content rte">
{{ block.settings.section_html }}
</div>
Now save the file, go to customize -> footer and you should be able to add your custom HTML block.
Hi @TomKos
I tried to write your code but it always returns the empty box to me.
Whatever I write in the box you don't see anything on the site.
I remind you that the theme is the Dawn.
This is all the footer.liquid code that I changed with your suggestion.
the site is called
https://rivivonetdawn.myshopify.com/
this is the password 123456
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer color-{{ section.settings.color_scheme }} gradient">
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
<div class="footer__content-top page-width">
{%- 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
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'text' -%}
<div class="footer-block__details-content rte">
{{ block.settings.subtext }}
</div>
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- 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 | img_url: '400x' }}"
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 -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer-block--newsletter">
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</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>
{%- endif -%}
{%- if section.settings.show_social -%}
<ul class="footer__list-social list-unstyled list-social" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" >
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" >
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" >
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" >
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" >
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" >
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" >
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" >
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" >
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="footer__content-bottom">
<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
</button>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for country in localization.available_countries -%}
<li class="disclosure__item" tabindex="-1">
<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 }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
</button>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for language in localization.available_languages -%}
<li class="disclosure__item" tabindex="-1">
<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 }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
<div class="footer__column footer__column--info">
{%- if section.settings.payment_enable -%}
<div class="footer__payment">
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="footer__copyright caption">
<small class="copyright__content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small class="copyright__content">{{ powered_by_link }}</small>
</div>
</div>
</div>
</div>
</footer>
{% 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('ul'),
};
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": [
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
{
"type": "html_content",
"name": "HTML Content",
"settings": [
{
"type": "html",
"id": "html_area",
"label": "Custom HTML",
"default": "<div><p>Some HTML content</p></div>"
}
]
},
{
"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": "<p>Share store details, promotions, or brand content with your customers.</p>",
"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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Thanks for your patience.
Hi @Zens,
Here's how you do it. In your theme, go to Actions, then Edit code. At the left find the Section folder and open the footer.liquid. You have to add the custom liquid as a block. To do so, you need to add this code below before the "blocks": [ at your schema. Let me know if it works for you
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
Your footer {% schema %} should look like this:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
{
"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": "<p>Share store details, promotions, or brand content with your customers.</p>",
"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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Hi @made4Uo Thank you for your suggestion.
Below I copied all the code from the footer.liquid file with your changes, but it doesn't work. When I write in the box, nothing is seen on the site.
Unfortunately, as you can see, in this footer file, the HTML box that I wrote according to the suggestions of other users still appears and which now does not make me remove it because it gives me this error
Error: New schema is incompatible with the current setting value. Valore non valido per il tipo nel blocco "a1aca5dd-5b5d-4aec-a730-fb5a88b32ebd". Il tipo deve essere definito nello schema.
{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ 'section-footer.css' | asset_url | stylesheet_tag }}
<link rel="stylesheet" href="{{ 'component-newsletter.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-menu.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-payment.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-list-social.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'component-rte.css' | asset_url }}" media="print" onload="this.media='all'">
<link rel="stylesheet" href="{{ 'disclosure.css' | asset_url }}" media="print" onload="this.media='all'">
<noscript>{{ 'component-newsletter.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-menu.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-payment.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-list-social.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'component-rte.css' | asset_url | stylesheet_tag }}</noscript>
<noscript>{{ 'disclosure.css' | asset_url | stylesheet_tag }}</noscript>
<footer class="footer color-{{ section.settings.color_scheme }} gradient">
{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
<div class="footer__content-top page-width">
{%- 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
-%}
<div class="footer__blocks-wrapper grid grid--1-col grid--2-col grid--4-col-tablet {{ footer_grid_class }}">
{%- for block in section.blocks -%}
<div class="footer-block grid__item{% if block.type == 'link_list' and block.settings.heading != blank %} footer-block--menu{% endif %}" {{ block.shopify_attributes }}>
{%- if block.settings.heading != blank -%}
<h2 class="footer-block__heading">{{- block.settings.heading | escape -}}</h2>
{%- endif -%}
{%- case block.type -%}
{%- when 'link_list' -%}
{%- if block.settings.menu != blank and block.settings.heading != blank -%}
<ul class="footer-block__details-content list-unstyled">
{%- for link in block.settings.menu.links -%}
<li>
<a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
{{ link.title }}
</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'image' -%}
<div class="footer-block__details-content footer-block-image {{ block.settings.alignment }}">
{%- 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 | img_url: '400x' }}"
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 -%}
</div>
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer-block--newsletter">
{%- if section.settings.newsletter_enable -%}
<div class="footer-block__newsletter">
{%- if section.settings.newsletter_heading != blank -%}
<h2 class="footer-block__heading">{{ section.settings.newsletter_heading | escape }}</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>
{%- endif -%}
{%- if section.settings.show_social -%}
<ul class="footer__list-social list-unstyled list-social" role="list">
{%- if settings.social_twitter_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_twitter_link }}" class="link link--text list-social__link" >
{%- render 'icon-twitter' -%}
<span class="visually-hidden">{{ 'general.social.links.twitter' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_facebook_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_facebook_link }}" class="link link--text list-social__link" >
{%- render 'icon-facebook' -%}
<span class="visually-hidden">{{ 'general.social.links.facebook' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_pinterest_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_pinterest_link }}" class="link link--text list-social__link" >
{%- render 'icon-pinterest' -%}
<span class="visually-hidden">{{ 'general.social.links.pinterest' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_instagram_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_instagram_link }}" class="link link--text list-social__link" >
{%- render 'icon-instagram' -%}
<span class="visually-hidden">{{ 'general.social.links.instagram' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tiktok_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tiktok_link }}" class="link link--text list-social__link" >
{%- render 'icon-tiktok' -%}
<span class="visually-hidden">{{ 'general.social.links.tiktok' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_tumblr_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_tumblr_link }}" class="link link--text list-social__link" >
{%- render 'icon-tumblr' -%}
<span class="visually-hidden">{{ 'general.social.links.tumblr' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_snapchat_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_snapchat_link }}" class="link link--text list-social__link" >
{%- render 'icon-snapchat' -%}
<span class="visually-hidden">{{ 'general.social.links.snapchat' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_youtube_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_youtube_link }}" class="link link--text list-social__link" >
{%- render 'icon-youtube' -%}
<span class="visually-hidden">{{ 'general.social.links.youtube' | t }}</span>
</a>
</li>
{%- endif -%}
{%- if settings.social_vimeo_link != blank -%}
<li class="list-social__item">
<a href="{{ settings.social_vimeo_link }}" class="link link--text list-social__link" >
{%- render 'icon-vimeo' -%}
<span class="visually-hidden">{{ 'general.social.links.vimeo' | t }}</span>
</a>
</li>
{%- endif -%}
</ul>
{%- endif -%}
</div>
</div>
{%- endif -%}
<div class="footer__content-bottom">
<div class="footer__content-bottom-wrapper page-width">
<div class="footer__column footer__localization">
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">{{ 'localization.country_label' | t }}</h2>
<select class="localization-selector link" name="country_code" aria-labelledby="FooterCountryLabelNoScript">
{%- for country in localization.available_countries -%}
<option value="{{ country.iso_code }}" {%- if country.iso_code == localization.country.iso_code %} selected{% endif %}>
{{ country.name }} ({{ country.currency.iso_code }} {{ country.currency.symbol }})
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_country' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterCountryLabel">{{ 'localization.country_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterCountryList" aria-describedby="FooterCountryLabel">
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'icon-caret' %}
</button>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for country in localization.available_countries -%}
<li class="disclosure__item" tabindex="-1">
<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 }} <span class="localization-form__currency">({{ country.currency.iso_code }} {{ country.currency.symbol }})</span>
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}
<noscript>
{%- form 'localization', id: 'FooterLanguageFormNoScript', class: 'localization-form' -%}
<div class="localization-form__select">
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">{{ 'localization.language_label' | t }}</h2>
<select class="localization-selector link" name="locale_code" aria-labelledby="FooterLanguageLabelNoScript">
{%- for language in localization.available_languages -%}
<option value="{{ language.iso_code }}" lang="{{ language.iso_code }}" {%- if language.iso_code == localization.language.iso_code %} selected{% endif %}>
{{ language.endonym_name | capitalize }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
<button class="button button--tertiary">{{ 'localization.update_language' | t }}</button>
{%- endform -%}
</noscript>
<localization-form>
{%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}
<div class="no-js-hidden">
<h2 class="caption-large" id="FooterLanguageLabel">{{ 'localization.language_label' | t }}</h2>
<div class="disclosure">
<button type="button" class="disclosure__button localization-form__select localization-selector link link--text caption-large" aria-expanded="false" aria-controls="FooterLanguageList" aria-describedby="FooterLanguageLabel">
{{ localization.language.endonym_name | capitalize }}
{% render 'icon-caret' %}
</button>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled" hidden>
{%- for language in localization.available_languages -%}
<li class="disclosure__item" tabindex="-1">
<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 }}
</a>
</li>
{%- endfor -%}
</ul>
</div>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}">
</div>
{%- endform -%}
</localization-form>
{%- endif -%}
</div>
<div class="footer__column footer__column--info">
{%- if section.settings.payment_enable -%}
<div class="footer__payment">
<span class="visually-hidden">{{ 'sections.footer.payment' | t }}</span>
<ul class="list list-payment" role="list">
{%- for type in shop.enabled_payment_types -%}
<li class="list-payment__item">
{{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
</li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
<div class="footer__copyright caption">
<small class="copyright__content">© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }}</small>
<small class="copyright__content">{{ powered_by_link }}</small>
</div>
</div>
</div>
</div>
</footer>
{% 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('ul'),
};
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": [
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
{
"type": "html_content",
"name": "HTML Content",
"settings": [
{
"type": "html",
"id": "html_area",
"label": "Custom HTML",
"default": "<div><p>Some HTML content</p></div>"
}
]
},
{
"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": "<p>Share store details, promotions, or brand content with your customers.</p>",
"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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Thanks for your patience and suggestions.
This is an accepted solution.
@Zens Hi, Sorry for the confusion, I thought your adding a liquid code. What are you trying to add though? A paragraph? Here is the way to show the input code. After the {% case block.type %} add the code below.
Custom liquid code I believe is a way to add a piece of a code or a snippet, not just writing a paragraph. If you wish to write a paragraph then you have to <p></p>
{% when 'custom_liquid' %}
{{block.settings.custom_liquid}}
Regarding the error. Try removing the html block in the footer when you customize the theme. It should refresh. Let me know if you still have issues
Hi @made4Uo
Thanks for your patience, don't worry about the mistake but the important thing is to fix it 😉
Now I can put in the footer a box containing some custom liquid code.
In summary, so as to also be able to leave a trace for those who will come later.
The actions to be done in order to add a box with custom liquid code in the footer are.
1
Open the footer.liquid file in the Edit Code section of the Shopify theme.
2
Add after this line of code
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
This
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
3
Add after this line of code
{% case block.type %}
This
{% when 'custom_liquid' %}
{{block.settings.custom_liquid}}
Save everything and test the operation.
I hope I have not forgotten anything.
🙂
@Zens Yes. That should be it. Let me know if you have issues
Hi all, if you change the code a bit to:
Great @MARBLE-MADNESS I tried it and it works 😉
But now I have to do a new summary because otherwise those who come later will not understand much 🙂
So to recap it all ...
In order to add a liquid box in the footer with the header, these are the steps to do:
1
Open the footer.liquid file in the Edit Code section of the Shopify theme.
2
Add after this line of code
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
Enter this:
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Custom Liquid",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
3
Add after this line of code
{% case block.type %}
Enter this:
{% when 'custom_liquid' %}
{{block.settings.custom_liquid}}
Save everything and test the operation.
I hope I have not forgotten anything.
A special thanks to all those who participated in this conversation by "inventing" something useful for the community.
Thanks for your nice feedback @Zens and your work. Hope everything is fine at your end.. Have a great day 🙂
Hello, could ou be more specific where to add this code in footer.liquid?
Hi Joan, like @Zens has written in his comment above, insert the code directly after:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
Or just simple copy the following schema section and change it in your footer.liquid:
{% schema %}
{
"name": "t:sections.footer.name",
"blocks": [
/* Stefan: Added for custom HTML in footer */
{
"name": "custom liquid",
"type": "custom_liquid",
"settings": [
{
"type": "text",
"id": "heading",
"default": "Custom Liquid",
"label": "t:sections.footer.blocks.text.settings.heading.label"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
]
},
/* Stefan: END */
{
"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": "<p>Share store details, promotions, or brand content with your customers.</p>",
"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"
}
],
"default": {
"blocks": [
{
"type": "link_list"
},
{
"type": "text"
}
]
}
}
{% endschema %}
Hi Joan, ok, understand it. After you have added a section during customizing your theme, here are two examples of code you can put into the filed customized-liquid:
Example graphics and text:
<p><img alt="Alternate Text Example 1" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text one for Joan</p>
<p>
</p><p><img alt="Alternate Text 2" src="https://cdn.shopify.com/s/files/1/0603/7857/9134/files/haken_mm_color.png?v=1635323469" style="margin-right: 10px; float: left;" width="20" height="20">Example Text two for Joan</p>
Other example for a Link:
<p>Text example for Joan includes also a <br><strong>bold text</strong>.<br>And here is a link to your <b><a href="/pages/contact" style="color: #00909B" title="Whatever">Contact-Page</a></b>.<br>And a little text after all.</p>
<p>
Hope that helps, best,
Stefan
Hi Joan, should work. If not there must be something else wrong in your theme....
Best....
Stefan
Hi Joan, don't really understand it for the moment and can't see any attachment. But maybe it's better if you're open a new thread for a new case. Ohterwise it get mixed here with the footer-solution... Best, Stefan
Hi, for a customer i developed a code for a popup like this:
https://supergsund.de/products/impfstoff-weisswein-6x-750ml
Visit the page and look for:
Incl. MwSt.. Versandkosten werden an der Kasse berechnet.
If you're on the page click on "Versandkosten".
A popup appears.
If you're looking for something like this, i can give you the code.
Stefan
Starting a B2B store is a big undertaking that requires careful planning and execution. W...
By JasonH Sep 23, 2024By investing 30 minutes of your time, you can unlock the potential for increased sales,...
By Jacqui Sep 11, 2024We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024