Shopify themes, liquid, logos, and UX
All the other payment processors show except Klarna. Is there a way to fix this? As Klarna converts the most.
Using sense theme Shopify 2.0
Solved! Go to the solution
This is an accepted solution.
{% 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>
{%- 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 -%}
<footer class="footer color-{{ section.settings.color_scheme }} gradient section-{{ section.id }}-padding">
{%- 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_2x = block.settings.image_width | times: 2 | at_most: 5760 -%}
<img
srcset= "{{ block.settings.image | image_url: width: block.settings.image_width }}, {{ block.settings.image | image_url: width: image_size_2x }} 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 -%}
</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 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 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 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 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 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 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 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 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 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 isolate">
{%- 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 text-body" 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>
<div class="disclosure__list-wrapper" hidden>
<ul id="FooterCountryList" role="list" class="disclosure__list list-unstyled">
{%- 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>
</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 text-body" 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>
<div class="disclosure__list-wrapper" hidden>
<ul id="FooterLanguageList" role="list" class="disclosure__list list-unstyled">
{%- 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>
</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 -%}
<li class="list-payment__item Klarna_Payment">
<img class= "icon icon--full-color" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Klarna_Payment_Badge.svg" alt="{{ shop.name }}" itemprop="logo">
</li>
</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>
<style>
.Klarna_Payment img {width: 40px;}
</style>
{% 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": "<p>Share contact information, store details, and 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.all.colors.accent_1.label"
},
{
"value": "accent-2",
"label": "t:sections.all.colors.accent_2.label"
},
{
"value": "background-1",
"label": "t:sections.all.colors.background_1.label"
},
{
"value": "background-2",
"label": "t:sections.all.colors.background_2.label"
},
{
"value": "inverse",
"label": "t:sections.all.colors.inverse.label"
}
],
"default": "background-1",
"label": "t:sections.all.colors.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 %}
can you please update
yes, please add this code
{%- liquid
assign show_selectors = false
assign currency_selector = false
assign locale_selector = false
if section.settings.show_currency_selector and shop.enabled_currencies.size > 1
assign currency_selector = true
endif
if section.settings.show_locale_selector and shop.enabled_locales.size > 1
assign locale_selector = true
endif
if currency_selector or locale_selector
assign show_selectors = true
endif
-%}
{%- if settings.color_newsletter == settings.color_body_bg -%}
{%- style -%}
.site-footer__section--newsletter {
padding: 0;
}
{%- endstyle -%}
{%- endif -%}
<footer class="site-footer text-center" data-section-id="{{ section.id }}" data-section-type="footer-section">
{%- if section.settings.show_newsletter -%}
<div class="site-footer__section site-footer__section--newsletter" data-aos>
<div class="page-width">
{%- if section.settings.newsletter_title != blank -%}
<div class="h2 appear-delay">{{ section.settings.newsletter_title }}</div>
{%- endif -%}
{%- if section.settings.newsletter_richtext != blank -%}
<div class="rte rte--block appear-delay-1">
{{ section.settings.newsletter_richtext }}
</div>
{%- endif -%}
<div class="appear-delay-2">
{%- render 'newsletter-form', section_id: section.id, snippet_context: 'footer' -%}
</div>
</div>
</div>
{%- endif -%}
<div class="page-width">
{%- if show_selectors -%}
{%- form 'localization', class: 'multi-selectors site-footer__section' -%}
{%- if locale_selector -%}
<div class="multi-selectors__item">
<h2 class="visually-hidden" id="LangHeading">
{{ 'general.language.dropdown_label' | t }}
</h2>
<div class="disclosure" data-disclosure-locale>
<button type="button" class="faux-select disclosure__toggle" aria-expanded="false" aria-controls="LangList" aria-describedby="LangHeading" data-disclosure-toggle>
<span class="multi-picker__label">
{{ form.current_locale.endonym_name }}
</span>
</button>
<ul id="LangList" class="disclosure-list" data-disclosure-list>
{%- for locale in form.available_locales -%}
<li class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
{{ locale.endonym_name }}
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input>
</div>
</div>
{%- endif -%}
{%- if currency_selector -%}
<div class="multi-selectors__item">
<h2 class="visually-hidden" id="CurrencyHeading">
{{ 'general.currency.dropdown_label' | t }}
</h2>
<div class="disclosure" data-disclosure-currency>
<button type="button" class="faux-select disclosure__toggle" aria-expanded="false" aria-controls="CurrencyList" aria-describedby="CurrencyHeading" data-disclosure-toggle>
{%- if section.settings.show_currency_flags -%}
<span class="currency-flag currency-flag--small" data-flag="{{ form.current_currency.iso_code }}" aria-hidden="true"></span>
{%- endif -%}
<span class="multi-picker__label">
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</span>
</button>
<ul id="CurrencyList" class="disclosure-list" data-disclosure-list>
{%- for currency in form.available_currencies -%}
<li class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}">
<a class="disclosure-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
{%- if section.settings.show_currency_flags -%}
<span class="currency-flag" data-flag="{{ currency.iso_code }}" aria-hidden="true"></span>
{%- endif -%}
<span class="multi-picker__label">
{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}
</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" value="{{ form.current_currency.iso_code }}" data-disclosure-input>
</div>
</div>
{%- endif -%}
{%- endform -%}
{%- endif -%}
{%- if section.settings.show_social_icons -%}
<div class="site-footer__section">
{%- render 'social-icons', social_class: 'footer__social' -%}
</div>
{%- endif -%}
{%- if linklists[section.settings.menu].links.size > 0 -%}
<div class="site-footer__section">
<ul class="no-bullets inline-list site-footer__linklist">
{%- for link in linklists[section.settings.menu].links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- endfor -%}
</ul>
</div>
{%- endif -%}
{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}
<div class="site-footer__section">
<ul class="inline-list payment-icons">
{%- for type in shop.enabled_payment_types -%}
<li class="icon--payment">
{{ type | payment_type_svg_tag }}
</li>
{%- endfor -%}
<li class="list-payment__item Klarna_Payment">
<img class= "icon icon--full-color" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Klarna_Payment_Badge.svg" alt="{{ shop.name }}" itemprop="logo">
</li>
</ul>
</div>
{%- endunless -%}
{%- endif -%}
<div class="site-footer__section site-footer__copyright">
{%- if section.settings.show_copyright -%}
<span>
© {{ 'now' | date: '%Y' }} {{ shop.name }}
{%- if section.settings.copyright_text != blank -%}
{{ section.settings.copyright_text }}
{%- endif -%}
</span>
{%- endif -%}
<span class="footer__powered_by">{{ powered_by_link }}</span>
</div>
</div>
</footer>
<style>
.Klarna_Payment img {width: 40px;}
</style>
{% schema %}
{
"name": "Footer",
"settings": [
{
"type": "header",
"content": "Newsletter"
},
{
"type": "checkbox",
"id": "show_newsletter",
"label": "Show newsletter signup",
"info": "Customers who subscribe will have their email address added to the 'accepts marketing' [customer list](/admin/customers?query=&accepts_marketing=1).",
"default": true
},
{
"type": "text",
"id": "newsletter_title",
"label": "Newsletter heading",
"default": "Sign up and save"
},
{
"type": "richtext",
"id": "newsletter_richtext",
"label": "Text",
"default": "<p>Let customers know about the key benefits of joining your newsletter.</p>"
},
{
"type": "header",
"content": "Language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [currency settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "checkbox",
"id": "show_currency_flags",
"label": "Show currency flags",
"default": true
},
{
"type": "header",
"content": "Additional footer content"
},
{
"type": "checkbox",
"id": "show_social_icons",
"label": "Show social icons",
"default": true
},
{
"type": "link_list",
"id": "menu",
"label": "Choose a menu",
"default": "footer",
"info": "Optional. This menu won't show dropdown items"
},
{
"type": "checkbox",
"id": "show_payment_icons",
"label": "Show payment icons"
},
{
"type": "checkbox",
"id": "show_copyright",
"label": "Show copyright"
},
{
"type": "text",
"id": "copyright_text",
"label": "Additional copyright text"
}
]
}
{% endschema %}
Thank you for your reply and help!!! Now I got it to show 🙂
Hi again KetanKumar and sorry to bother you again.
I now got Klarna to show (however the image is slightly below the other Payment options). But because I am also missing other various payment methods that are not showing (Paytrail) I am wondering if there'd be a snippet of code to add so that I can add a png image of the various payment methods.
I truly appreciate your help and input.
@KetanKumar Hi again. So I am attaching here a screenshot of the png I'd like to add to the footer showing all the various payment methods. Is there a way to do this? Thanks again a million.
its my pleasure yes you mean this image show at footer right?
@KetanKumar , yes I would love to add this png to the footer aligned right under the other payment options
Hi Ketan. I am having issues with this same thing for my store www.southwaythrills.com store password is "twowts"
How do I make klarna and vipps2.0 visible? I use the payed theme symmetry
Thanks 🙂
Hi - not sure whether this chat is still "active" but I'm struggling to add the Klarna payment icon to my footer. If I send through my URL and footer code, would you be able to help me with this, please? Many thanks in advance.
Let customers know about the key benefits of joining your
newsletter.
Hello
I tried saving it but I keep getting an error and it won't save
Hi Ketankumar! This code doesn't work with my theme or maybe I do something wrong. Can you please help me?
oh sorry, can you please send your store url so i will check and let you know
yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
li.list-payment__item {
line-height: 0;
vertical-align: middle;
}
Hello, any update about this?
yes, please used this code
Hello I have also the same problem, I have the Impulse theme. I want a Klarna Payment Icon in my footer:( Can you help me please:)
Best Regards,
Muhammed Yilmaz
Hello!
I have the same problem. Can you help me?
yes, please share store url and footer code so i will check and let you know
oh sorry for that issue can you please share footer section code so i will check and let you know
Hello!
Sorry for the delay.
I think this is the right code.
<script
type="application/json"
data-section-type="static-footer"
data-section-id="{{ section.id }}"
>
</script>
<footer class="footer" role="contentinfo">
<div class="footer__wrapper">
<div class="footer-blocks">
{% for block in section.blocks %}
<div class="footer-block" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}<h2 class="footer-block__title">{{ block.settings.title }}</h2>{% endif %}
{% case block.type %}
{% when 'menu' %}
{% comment %}Inject footer-menu begin{% endcomment %}
<ul class="footer-menu">
{% for link in linklists[block.settings.footer_menu].links %}
<li class="footer-menu__item">
<a class="footer-menu__link" href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% comment %}Inject footer-menu end{% endcomment %}
{% when 'text' %}
{% comment %}Inject footer-text begin{% endcomment %}
<div class="footer-text">{{ block.settings.caption }}</div>
{% comment %}Inject footer-text end{% endcomment %}
{% when 'social' %}
{% comment %}Inject footer-social-media begin{% endcomment %}
<div class="footer-social-media">
{% render 'social-links' %}
</div>
{% comment %}Inject footer-social-media end{% endcomment %}
{% when 'newsletter' %}
{% comment %}Inject footer-newsletter begin{% endcomment %}
{% form 'customer', id: 'footer-newsletter', class: 'footer-newsletter' %}
{% if form.posted_successfully? %}
<script>
window.location = "#footer-newsletter";
</script>
<p class="footer-newsletter__message footer-newsletter__message--success">{{ 'layout.footer.newsletter_thanks' | t }}</p>
{% else %}
{% if block.settings.caption != blank %}<div class="footer-newsletter__caption">{{ block.settings.caption }}</div>{% endif %}
<div class="footer-newsletter__wrapper">
<input
id="contact_tags"
type="hidden"
name="contact[tags]"
value="prospect,newsletter"
/>
<input
class="footer-newsletter__email"
type="email"
name="contact[email]"
placeholder="{{ 'general.email_placeholder' | t }}"
/>
<button
class="footer-newsletter__submit"
type="submit"
>
{% render 'icon-library', id: 'icon-arrow-right' %}
</button>
</div>
{% endif %}
{% endform %}
{% comment %}Inject footer-newsletter end{% endcomment %}
{% endcase %}
</div>
{% endfor %}
</div>
<div class="footer-navigation-attribution">
{% assign additional_menu = section.settings.subfooter_menu %}
{% if additional_menu %}
<ul class="footer-navigation">
{% for link in linklists[additional_menu].links %}
<li class="footer-navigation__item">
<a class="footer-navigation__link" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<p class="footer-attribution">
{% capture year %}
{{ "now" | date: "%Y" }}
{% endcapture %}
{% capture shopName %}
{{ shop.name | link_to: routes.root_url }}.
{% endcapture %}
{% capture attribution %}{{ 'layout.footer.copyright_html' | t: year: year, shop_name: shopName }} {{ powered_by_link }}{% endcapture %}
{{ attribution }}
</p>
</div>
<div class="footer-crossborder-payment">
{% assign currency_selector = section.settings.show_currency_selector %}
{% assign locale_selector = section.settings.show_locale_selector %}
{% if currency_selector or locale_selector %}
<div class="footer-cross-border">
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border begin{% endcomment %}
{% form 'localization' %}
{% if locale_selector and form.available_locales.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language begin{% endcomment %}
<div class="selectors-form__item">
<div class="disclosure" data-disclosure-locale>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-disclosure-toggle>
{{ form.current_locale.endonym_name }}
</button>
<ul id="lang-list" class="disclosure-list" data-disclosure-list>
{% for locale in form.available_locales %}
<li>
<a class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ locale.endonym_name }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language end{% endcomment %}
{% endif %}
{% if currency_selector and form.available_currencies.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-currency begin{% endcomment %}
<div class="selectors-form__item">
<div class="disclosure" data-disclosure-currency>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</button>
<ul id="currency-list" class="disclosure-list" data-disclosure-list>
{% for currency in form.available_currencies %}
<li>
<a class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-disclosure-input/>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-cross-border/multi-currency end{% endcomment %}
{% endif %}
{% endform %}
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border end{% endcomment %}
</div>
{% endif %}
{% if shop.enabled_payment_types.size > 0 and section.settings.payment_icons %}
<div class="footer-payment-types">
{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag: class: 'footer-payment-types__icon' }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"max_blocks": 4,
"settings": [
{
"type": "link_list",
"id": "subfooter_menu",
"label": "Menu",
"default": "footer",
"info": "This menu does not support nesting"
},
{
"type": "checkbox",
"id": "payment_icons",
"label": "Show payment icons"
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency Selector",
"info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
}
],
"blocks": [
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Menu"
},
{
"type": "link_list",
"id": "footer_menu",
"label": "Menu",
"default": "footer",
"info": "This menu does not support nesting"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text"
},
{
"type": "richtext",
"id": "caption",
"label": "Text",
"default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>"
}
]
},
{
"type": "social",
"name": "Social media",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Social media",
"info": "Configure your social media under “General settings” in “Social media”."
}
],
"limit": 1
},
{
"type": "newsletter",
"name": "Newsletter",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "caption",
"label": "Text",
"default": "<p>Say a bit about your brand, a specific product, or promotion.</p>"
}
],
"limit": 1
}
]
}
{% endschema %}
I have not recieved anything from you, Are you still able to help me?
Best regards
Daniel
oh sorry for that issue can you please try this code
<script
type="application/json"
data-section-type="static-footer"
data-section-id="{{ section.id }}"
>
</script>
<footer class="footer" role="contentinfo">
<div class="footer__wrapper">
<div class="footer-blocks">
{% for block in section.blocks %}
<div class="footer-block" {{ block.shopify_attributes }}>
{% if block.settings.title != blank %}<h2 class="footer-block__title">{{ block.settings.title }}</h2>{% endif %}
{% case block.type %}
{% when 'menu' %}
{% comment %}Inject footer-menu begin{% endcomment %}
<ul class="footer-menu">
{% for link in linklists[block.settings.footer_menu].links %}
<li class="footer-menu__item">
<a class="footer-menu__link" href="{{ link.url }}">
{{ link.title }}
</a>
</li>
{% endfor %}
</ul>
{% comment %}Inject footer-menu end{% endcomment %}
{% when 'text' %}
{% comment %}Inject footer-text begin{% endcomment %}
<div class="footer-text">{{ block.settings.caption }}</div>
{% comment %}Inject footer-text end{% endcomment %}
{% when 'social' %}
{% comment %}Inject footer-social-media begin{% endcomment %}
<div class="footer-social-media">
{% render 'social-links' %}
</div>
{% comment %}Inject footer-social-media end{% endcomment %}
{% when 'newsletter' %}
{% comment %}Inject footer-newsletter begin{% endcomment %}
{% form 'customer', id: 'footer-newsletter', class: 'footer-newsletter' %}
{% if form.posted_successfully? %}
<script>
window.location = "#footer-newsletter";
</script>
<p class="footer-newsletter__message footer-newsletter__message--success">{{ 'layout.footer.newsletter_thanks' | t }}</p>
{% else %}
{% if block.settings.caption != blank %}<div class="footer-newsletter__caption">{{ block.settings.caption }}</div>{% endif %}
<div class="footer-newsletter__wrapper">
<input
id="contact_tags"
type="hidden"
name="contact[tags]"
value="prospect,newsletter"
/>
<input
class="footer-newsletter__email"
type="email"
name="contact[email]"
placeholder="{{ 'general.email_placeholder' | t }}"
/>
<button
class="footer-newsletter__submit"
type="submit"
>
{% render 'icon-library', id: 'icon-arrow-right' %}
</button>
</div>
{% endif %}
{% endform %}
{% comment %}Inject footer-newsletter end{% endcomment %}
{% endcase %}
</div>
{% endfor %}
</div>
<div class="footer-navigation-attribution">
{% assign additional_menu = section.settings.subfooter_menu %}
{% if additional_menu %}
<ul class="footer-navigation">
{% for link in linklists[additional_menu].links %}
<li class="footer-navigation__item">
<a class="footer-navigation__link" href="{{ link.url }}">{{ link.title }}</a>
</li>
{% endfor %}
</ul>
{% endif %}
<p class="footer-attribution">
{% capture year %}
{{ "now" | date: "%Y" }}
{% endcapture %}
{% capture shopName %}
{{ shop.name | link_to: routes.root_url }}.
{% endcapture %}
{% capture attribution %}{{ 'layout.footer.copyright_html' | t: year: year, shop_name: shopName }} {{ powered_by_link }}{% endcapture %}
{{ attribution }}
</p>
</div>
<div class="footer-crossborder-payment">
{% assign currency_selector = section.settings.show_currency_selector %}
{% assign locale_selector = section.settings.show_locale_selector %}
{% if currency_selector or locale_selector %}
<div class="footer-cross-border">
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border begin{% endcomment %}
{% form 'localization' %}
{% if locale_selector and form.available_locales.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language begin{% endcomment %}
<div class="selectors-form__item">
<div class="disclosure" data-disclosure-locale>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-disclosure-toggle>
{{ form.current_locale.endonym_name }}
</button>
<ul id="lang-list" class="disclosure-list" data-disclosure-list>
{% for locale in form.available_locales %}
<li>
<a class="disclosure-list__item {% if locale.iso_code == form.current_locale.iso_code %}disclosure-list__item--current{% endif %}" href="#" lang="{{ locale.iso_code }}" {% if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{% endif %} data-value="{{ locale.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ locale.endonym_name }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-disclosure-input/>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-cross-border/multi-language end{% endcomment %}
{% endif %}
{% if currency_selector and form.available_currencies.size > 1 %}
{% comment %}Inject @pixelunion/shopify-cross-border/multi-currency begin{% endcomment %}
<div class="selectors-form__item">
<div class="disclosure" data-disclosure-currency>
<button type="button" class="disclosure__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-disclosure-toggle>
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</button>
<ul id="currency-list" class="disclosure-list" data-disclosure-list>
{% for currency in form.available_currencies %}
<li>
<a class="disclosure-list__item {% if currency.iso_code == form.current_currency.iso_code %}disclosure-list__item--current{% endif %}" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-disclosure-option>
<span class="disclosure-list__option">{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-disclosure-input/>
</div>
</div>
{% comment %}Inject @pixelunion/shopify-cross-border/multi-currency end{% endcomment %}
{% endif %}
{% endform %}
{% comment %}Inject @pixelunion/shopify-cross-border/cross-border end{% endcomment %}
</div>
{% endif %}
{% if shop.enabled_payment_types.size > 0 and section.settings.payment_icons %}
<div class="footer-payment-types">
{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag: class: 'footer-payment-types__icon' }}
{% endfor %}
<span class="list-payment__item Klarna_Payment">
<img class= "icon icon--full-color" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Klarna_Payment_Badge.svg" alt="{{ shop.name }}" itemprop="logo">
</span>
</div>
{% endif %}
</div>
</div>
</footer>
<style>
.Klarna_Payment img {width: 40px;}
</style>
{% schema %}
{
"name": "Footer",
"max_blocks": 4,
"settings": [
{
"type": "link_list",
"id": "subfooter_menu",
"label": "Menu",
"default": "footer",
"info": "This menu does not support nesting"
},
{
"type": "checkbox",
"id": "payment_icons",
"label": "Show payment icons"
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency Selector",
"info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
}
],
"blocks": [
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Menu"
},
{
"type": "link_list",
"id": "footer_menu",
"label": "Menu",
"default": "footer",
"info": "This menu does not support nesting"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text"
},
{
"type": "richtext",
"id": "caption",
"label": "Text",
"default": "<p>Use this section to welcome customers to your store, say a bit about your brand, or share news and seasonal promotions.</p>"
}
]
},
{
"type": "social",
"name": "Social media",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Social media",
"info": "Configure your social media under “General settings” in “Social media”."
}
],
"limit": 1
},
{
"type": "newsletter",
"name": "Newsletter",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "caption",
"label": "Text",
"default": "<p>Say a bit about your brand, a specific product, or promotion.</p>"
}
],
"limit": 1
}
]
}
{% endschema %}
its my pleasure to help us
Hi Ketan,
Can you help me with integrating the Klarna logo in my footer?
Thanks!
Hi, could you please help me with the same problem? Thank you very much
<!-- /sections/footer.liquid -->
{%- liquid
assign blocks_size = section.blocks.size
assign image_background = section.settings.image
assign logo = section.settings.logo
assign anchor_logo = section.settings.anchor_logo
assign text_color = settings.footer_text
assign animation_duration = 800
-%}
{%- style -%}
.site-footer-wrapper {
--PT: {{ section.settings.padding_top }}px;
--PB: {{ section.settings.padding_bottom }}px;
--item-count: {{ blocks_size }};
--text: {{ text_color }};
--text-a35: {{ text_color | color_modify: 'alpha', 0.35 }};
--text-a75: {{ text_color | color_modify: 'alpha', 0.75 }};
{%- if image_background -%}
background-color: transparent;
{%- endif -%}
}
{%- endstyle -%}
<footer class="site-footer-wrapper section-padding" data-section-id="{{ section.id }}" data-section-type="footer">
{%- if image_background -%}
{%- render 'image-background', img_object: image_background, frame_height_class: 'footer__image', bg_position: section.settings.bg_position -%}
{%- endif -%}
<div class="site-footer {{ section.settings.width }}">
{%- if logo -%}
{%- liquid
assign image = logo
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
assign img_alt = image.alt | default: shop.name | strip_html | escape
-%}
<div class="footer__logo__wrapper">
<a href="{{ routes.root_url }}" class="footer__logo" style="width: {{ section.settings.logo_image_width }}px;">
<div class="image__holder lazy-image" style="padding-top: {{ img_ratio }}%; background-image: url({{ image | img_url: '1x1' }});">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-aspectratio="{{ image.aspect_ratio }}"
data-parent-fit="contain"
alt="{{ img_alt }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '1240x' }}" alt="{{ img_alt }}">
</noscript>
</div>
</a>
</div>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<div class="footer__blocks">
{%- for block in section.blocks -%}
{%- liquid
assign title = block.settings.title
assign text = block.settings.text
assign show_social_links = block.settings.show_social_links
-%}
{%- case block.type -%}
{%- when 'linklist' -%}
{%- assign linklist = linklists[block.settings.linklist] -%}
{%- assign linklist_title = title | default: linklist.title -%}
<div class="footer__block footer__block--menu" {{ block.shopify_attributes }}>
{%- if linklist_title != blank -%}
<h2 class="h5 footer__block__title">{{ linklist_title | escape }}</h2>
{%- endif -%}
{%- if linklist != blank -%}
<ul class="footer__quicklinks unstyled">
{%- for link in linklist.links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- when 'page' -%}
{%- assign page = pages[block.settings.page] -%}
{%- if page == blank or page.empty? -%}
<div class="footer__block footer__block--page" {{ block.shopify_attributes }}>
<h2 class="h5 footer__block__title">{{ shop.name }}</h2>
<div class="rte">{{ 'home_page.onboarding.no_content' | t }}</div>
</div>
{%- else -%}
<div class="footer__block footer__block--page" {{ block.shopify_attributes }}>
<h2 class="h5 footer__block__title">{{ page.title | escape }}</h2>
<div class="rte">{{ page.content }}</div>
</div>
{%- endif -%}
{%- when 'social' -%}
<div class="footer__block footer__block--social" {{ block.shopify_attributes }}>
{%- assign social_accounts = 'Instagram, Facebook, Twitter, TikTok, Pinterest, Tumblr, YouTube, Vimeo, Linkedin, Snapchat, Feed' | split: ', ' -%}
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title | escape }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte footer__social__text">{{ text }}</div>
{%- endif -%}
<ul class="social">
{%- render 'social-icon' for social_accounts as social -%}
</ul>
</div>
{%- when 'text' -%}
<div class="footer__block footer__block--text" {{ block.shopify_attributes }}>
{%- if block.settings.image -%}
{%- liquid
assign image = block.settings.image
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
assign img_alt = image.alt | default: shop.name | strip_html | escape
-%}
<div class="footer__block__image" style="width: {{ block.settings.image_width }}px;">
<div class="image__holder lazy-image" style="padding-top: {{ img_ratio }}%; background-image: url({{ image | img_url: '1x1' }});">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-aspectratio="{{ image.aspect_ratio }}"
data-parent-fit="contain"
alt="{{ img_alt }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '480x' }}" alt="{{ img_alt }}">
</noscript>
</div>
</div>
{%- endif -%}
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title | escape }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte">{{ text }}</div>
{%- endif -%}
</div>
{%- when 'newsletter' -%}
<div class="footer__block footer__block--newsletter" {{ block.shopify_attributes }}>
<div class="footer__newsletter__wrapper">
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte footer__newsletter__text">{{ text }}</div>
{%- endif -%}
{%- render 'newsletter-form' block: block, footer: true -%}
{%- if show_social_links -%}
{%- render 'social-icons' -%}
{%- endif -%}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer__bottom">
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector -%}
<div class="footer__bottom__item">
<!-- /partials/cross-border.liquid -->
{%- form 'localization', class: 'popout--footer' -%}
{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
<div>
<h2 class="visually-hidden" id="lang-heading">
{{ 'layout.footer.language' | t }}
</h2>
<div class="popout" data-popout>
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-popout-toggle>
{{ localization.language.endonym_name }}
</button>
<ul id="lang-list" class="popout-list" data-popout-list>
{% for language in localization.available_languages %}
<li class="popout-list__item {% if language == localization.language %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" lang="{{ locale.iso_code }}" {% if language == localization.language %}aria-current="true"{% endif %} data-value="{{ language.iso_code }}" data-popout-option>
<span>{{ language.endonym_name }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="language_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-popout-input/>
</div>
</div>
{%- endif -%}
{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
<div>
<h2 class="visually-hidden" id="currency-heading">
{{ 'layout.footer.currency' | t }}
</h2>
<div class="popout" data-popout>
{% if section.settings.type == 'currency' %}
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-popout-toggle>
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</button>
<ul id="currency-list" class="popout-list" data-popout-list>
{% for currency in form.available_currencies %}
<li class="popout-list__item {% if currency.iso_code == form.current_currency.iso_code %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-popout-option>
<span>{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-popout-input/>
{% endif %}
{% if section.settings.type == 'country' %}
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-popout-toggle>
{{ localization.country }} ({{ localization.country.iso_code }}) - {{ localization.country.currency.symbol }}
</button>
<ul id="currency-list" class="popout-list" data-popout-list>
{% for country in localization.available_countries %}
<li class="popout-list__item {% if country == localization.country %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" {% if country == localization.country %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-popout-option>
<span>{{ country.name }} ({{ country.iso_code }}) - {{ country.currency.symbol }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="country_code" id="CurrencySelector" value="{{ localization.country.iso_code }}" data-popout-input/>
{% endif %}
</div>
</div>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
<div class="footer__bottom__item">
<ul class="footer__copyright inline-list">
<li>
<a href="{{ shop.secure_url }}">© {{ shop.name }} {{ 'now' | date: "%Y" }}</a>
</li>
{% for link in linklists[section.settings.footer_secondary_linklist].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<!-- The following lines fix Lighthouse security warnings on the Shopify link.-->
{%- liquid
assign powered_by_link_html = powered_by_link
if powered_by_link_html contains 'rel="'
assign powered_link_rel_text = powered_by_link_html | split: 'rel="'
assign powered_link_rel_text = powered_link_rel_text[1] | split: '"' | first
assign powered_link_rel = 'rel="' | append: powered_link_rel_text | append: '"'
assign powered_by_link_html = powered_by_link_html | replace_first: powered_link_rel, ''
endif
if powered_by_link_html contains '<a '
assign powered_by_link_html = powered_by_link_html | replace: '<a ', '<a rel="noopener" '
endif
assign powered_by_link = powered_by_link_html
-%}
<!-- Remove the following line to delete 'Powered by Shopify' from your footer -->
<!-- Do not delete below this line -->
</ul>
</div>
{%- if section.settings.footer_payment_enable -%}
{%- unless shop.enabled_payment_types == empty -%}
<div class="footer__bottom__item">
<ul class="footer__payment payment-icons inline-list">
{%- for type in shop.enabled_payment_types -%}
<li>{{ type | payment_type_svg_tag: class:'payment-icon' }}</li>
{%- endfor -%}
</ul>
</div>
{%- endunless -%}
{%- endif -%}
</div>
{%- if anchor_logo -%}
{%- liquid
assign image = anchor_logo
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
-%}
<div class="footer__anchor__logo__wrapper">
<a href="{{ routes.root_url }}" class="footer__anchor__logo"
data-aos="hero"
data-aos-duration="{{ animation_duration }}"
data-aos-easing="ease-out-quart">
<div class="image__holder lazy-image" style="background-image: url({{ image | img_url: '1x1' }}); padding-top: {{ img_ratio }}%;">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-parent-fit="contain"
alt="{{ image.alt | default: shop.name | strip_html | escape }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '1240x' }}" alt="{{ image.alt | default: shop.name | strip_html | escape }}">
</noscript>
</div>
</a>
</div>
{%- endif -%}
</div>
{%- comment -%} Section background image {%- endcomment -%}
{%- if image_background -%}
{%- assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 -%}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
{%- endif -%}
</footer>
{% schema %}
{
"name": "Footer",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wrapper--full",
"options": [
{ "value": "wrapper", "label": "Normal" },
{ "value": "wrapper--full", "label": "Wide" }
]
},
{
"label": "Logo",
"type": "image_picker",
"id": "logo"
},
{
"type": "range",
"id": "logo_image_width",
"label": "Logo width (in pixels)",
"min": 50,
"max": 400,
"step": 5,
"unit": "px",
"default": 150
},
{
"type": "header",
"content": "Optional background image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "bg_position",
"label": "Position",
"default": "center-center",
"info": "Requires the 'Image parallax' setting to be disabled",
"options": [
{ "label": "Top", "value": "center-top" },
{ "label": "Right", "value": "right-center" },
{ "label": "Center", "value": "center-center" },
{ "label": "Left", "value": "left-center" },
{ "label": "Bottom", "value": "center-bottom" }
]
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"default": 75
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Bottom bar"
},
{
"type": "link_list",
"id": "footer_secondary_linklist",
"label": "Link List",
"info": "This menu won't show dropdown items."
},
{
"type": "checkbox",
"id": "footer_payment_enable",
"label": "Show payment types",
"default": true
},
{
"type": "header",
"content": "language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "select",
"id": "type",
"label": "Type",
"options": [
{
"value": "currency",
"label": "Currency"
},
{
"value": "country",
"label": "Country"
}
]
},
{
"type": "header",
"content": "Anchor logo"
},
{
"label": "Image",
"type": "image_picker",
"id": "anchor_logo"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 75
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 65
}
],
"blocks" : [
{
"type": "linklist",
"name": "Link list",
"settings": [
{
"type": "link_list",
"id": "linklist",
"label": "Link list",
"default": "footer",
"info": "This menu won't show dropdown items."
},
{
"type": "text",
"id": "title",
"label": "Title"
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "checkbox",
"id": "show_name",
"label": "Show name field",
"default": false
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Join"
},
{
"type": "select",
"id": "button_color",
"label": "Button color",
"info": "Full width button only",
"default": "btn--neutral",
"options": [
{ "value": "btn--primary", "label": "Bright accent" },
{ "value": "btn--secondary", "label": "Secondary accent" },
{ "value": "btn--link", "label": "Link color" },
{ "value": "btn--neutral", "label": "Text color" },
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" }
]
},
{
"type": "checkbox",
"id": "show_social_links",
"label": "Show social icons",
"info": "Edit your social settings and accounts in [Theme settings](/admin/themes/current/editor?context=theme)",
"default": false
}
]
},
{
"type": "social",
"name": "Social",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Edit your social settings and accounts in [Theme settings](/admin/themes/current/editor?context=theme)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Social"
},
{
"type": "richtext",
"id": "text",
"label": "Text"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"label": "Image width (in pixels)",
"min": 50,
"max": 400,
"step": 5,
"unit": "px",
"default": 150
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Share store details, promotions, or brand content with your customers.</p>"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"id": "page",
"type": "page",
"label": "Page"
}
]
}
]
}
{% endschema %}
oh sorry for late here can you please try this code
<!-- /sections/footer.liquid -->
{%- liquid
assign blocks_size = section.blocks.size
assign image_background = section.settings.image
assign logo = section.settings.logo
assign anchor_logo = section.settings.anchor_logo
assign text_color = settings.footer_text
assign animation_duration = 800
-%}
{%- style -%}
.site-footer-wrapper {
--PT: {{ section.settings.padding_top }}px;
--PB: {{ section.settings.padding_bottom }}px;
--item-count: {{ blocks_size }};
--text: {{ text_color }};
--text-a35: {{ text_color | color_modify: 'alpha', 0.35 }};
--text-a75: {{ text_color | color_modify: 'alpha', 0.75 }};
{%- if image_background -%}
background-color: transparent;
{%- endif -%}
}
{%- endstyle -%}
<footer class="site-footer-wrapper section-padding" data-section-id="{{ section.id }}" data-section-type="footer">
{%- if image_background -%}
{%- render 'image-background', img_object: image_background, frame_height_class: 'footer__image', bg_position: section.settings.bg_position -%}
{%- endif -%}
<div class="site-footer {{ section.settings.width }}">
{%- if logo -%}
{%- liquid
assign image = logo
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
assign img_alt = image.alt | default: shop.name | strip_html | escape
-%}
<div class="footer__logo__wrapper">
<a href="{{ routes.root_url }}" class="footer__logo" style="width: {{ section.settings.logo_image_width }}px;">
<div class="image__holder lazy-image" style="padding-top: {{ img_ratio }}%; background-image: url({{ image | img_url: '1x1' }});">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-aspectratio="{{ image.aspect_ratio }}"
data-parent-fit="contain"
alt="{{ img_alt }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '1240x' }}" alt="{{ img_alt }}">
</noscript>
</div>
</a>
</div>
{%- endif -%}
{%- if section.blocks.size > 0 -%}
<div class="footer__blocks">
{%- for block in section.blocks -%}
{%- liquid
assign title = block.settings.title
assign text = block.settings.text
assign show_social_links = block.settings.show_social_links
-%}
{%- case block.type -%}
{%- when 'linklist' -%}
{%- assign linklist = linklists[block.settings.linklist] -%}
{%- assign linklist_title = title | default: linklist.title -%}
<div class="footer__block footer__block--menu" {{ block.shopify_attributes }}>
{%- if linklist_title != blank -%}
<h2 class="h5 footer__block__title">{{ linklist_title | escape }}</h2>
{%- endif -%}
{%- if linklist != blank -%}
<ul class="footer__quicklinks unstyled">
{%- for link in linklist.links -%}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{%- endfor -%}
</ul>
{%- endif -%}
</div>
{%- when 'page' -%}
{%- assign page = pages[block.settings.page] -%}
{%- if page == blank or page.empty? -%}
<div class="footer__block footer__block--page" {{ block.shopify_attributes }}>
<h2 class="h5 footer__block__title">{{ shop.name }}</h2>
<div class="rte">{{ 'home_page.onboarding.no_content' | t }}</div>
</div>
{%- else -%}
<div class="footer__block footer__block--page" {{ block.shopify_attributes }}>
<h2 class="h5 footer__block__title">{{ page.title | escape }}</h2>
<div class="rte">{{ page.content }}</div>
</div>
{%- endif -%}
{%- when 'social' -%}
<div class="footer__block footer__block--social" {{ block.shopify_attributes }}>
{%- assign social_accounts = 'Instagram, Facebook, Twitter, TikTok, Pinterest, Tumblr, YouTube, Vimeo, Linkedin, Snapchat, Feed' | split: ', ' -%}
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title | escape }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte footer__social__text">{{ text }}</div>
{%- endif -%}
<ul class="social">
{%- render 'social-icon' for social_accounts as social -%}
</ul>
</div>
{%- when 'text' -%}
<div class="footer__block footer__block--text" {{ block.shopify_attributes }}>
{%- if block.settings.image -%}
{%- liquid
assign image = block.settings.image
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
assign img_alt = image.alt | default: shop.name | strip_html | escape
-%}
<div class="footer__block__image" style="width: {{ block.settings.image_width }}px;">
<div class="image__holder lazy-image" style="padding-top: {{ img_ratio }}%; background-image: url({{ image | img_url: '1x1' }});">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-aspectratio="{{ image.aspect_ratio }}"
data-parent-fit="contain"
alt="{{ img_alt }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '480x' }}" alt="{{ img_alt }}">
</noscript>
</div>
</div>
{%- endif -%}
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title | escape }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte">{{ text }}</div>
{%- endif -%}
</div>
{%- when 'newsletter' -%}
<div class="footer__block footer__block--newsletter" {{ block.shopify_attributes }}>
<div class="footer__newsletter__wrapper">
{%- if title != blank -%}
<h2 class="h5 footer__block__title">{{ title }}</h2>
{%- endif -%}
{%- if text != blank -%}
<div class="rte footer__newsletter__text">{{ text }}</div>
{%- endif -%}
{%- render 'newsletter-form' block: block, footer: true -%}
{%- if show_social_links -%}
{%- render 'social-icons' -%}
{%- endif -%}
</div>
</div>
{%- endcase -%}
{%- endfor -%}
</div>
{%- endif -%}
<div class="footer__bottom">
{%- if section.settings.show_locale_selector or section.settings.show_currency_selector -%}
<div class="footer__bottom__item">
<!-- /partials/cross-border.liquid -->
{%- form 'localization', class: 'popout--footer' -%}
{%- if section.settings.show_locale_selector and shop.published_locales.size > 1 -%}
<div>
<h2 class="visually-hidden" id="lang-heading">
{{ 'layout.footer.language' | t }}
</h2>
<div class="popout" data-popout>
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="lang-list" aria-describedby="lang-heading" data-popout-toggle>
{{ localization.language.endonym_name }}
</button>
<ul id="lang-list" class="popout-list" data-popout-list>
{% for language in localization.available_languages %}
<li class="popout-list__item {% if language == localization.language %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" lang="{{ locale.iso_code }}" {% if language == localization.language %}aria-current="true"{% endif %} data-value="{{ language.iso_code }}" data-popout-option>
<span>{{ language.endonym_name }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="language_code" id="LocaleSelector" value="{{ form.current_locale.iso_code }}" data-popout-input/>
</div>
</div>
{%- endif -%}
{%- if section.settings.show_currency_selector and shop.enabled_currencies.size > 1 -%}
<div>
<h2 class="visually-hidden" id="currency-heading">
{{ 'layout.footer.currency' | t }}
</h2>
<div class="popout" data-popout>
{% if section.settings.type == 'currency' %}
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-popout-toggle>
{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol -%}{{ form.current_currency.symbol }}{%- endif -%}
</button>
<ul id="currency-list" class="popout-list" data-popout-list>
{% for currency in form.available_currencies %}
<li class="popout-list__item {% if currency.iso_code == form.current_currency.iso_code %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" {% if currency.iso_code == form.current_currency.iso_code %}aria-current="true"{% endif %} data-value="{{ currency.iso_code }}" data-popout-option>
<span>{{ currency.iso_code }} {%- if currency.symbol -%}{{ currency.symbol }}{%- endif -%}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="currency_code" id="CurrencySelector" value="{{ form.current_currency.iso_code }}" data-popout-input/>
{% endif %}
{% if section.settings.type == 'country' %}
<button type="button" class="popout__toggle" aria-expanded="false" aria-controls="currency-list" aria-describedby="currency-heading" data-popout-toggle>
{{ localization.country }} ({{ localization.country.iso_code }}) - {{ localization.country.currency.symbol }}
</button>
<ul id="currency-list" class="popout-list" data-popout-list>
{% for country in localization.available_countries %}
<li class="popout-list__item {% if country == localization.country %}popout-list__item--current{% endif %}">
<a class="popout-list__option" href="#" {% if country == localization.country %}aria-current="true"{% endif %} data-value="{{ country.iso_code }}" data-popout-option>
<span>{{ country.name }} ({{ country.iso_code }}) - {{ country.currency.symbol }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="country_code" id="CurrencySelector" value="{{ localization.country.iso_code }}" data-popout-input/>
{% endif %}
</div>
</div>
{%- endif -%}
{%- endform -%}
</div>
{%- endif -%}
<div class="footer__bottom__item">
<ul class="footer__copyright inline-list">
<li>
<a href="{{ shop.secure_url }}">© {{ shop.name }} {{ 'now' | date: "%Y" }}</a>
</li>
{% for link in linklists[section.settings.footer_secondary_linklist].links %}
<li><a href="{{ link.url }}">{{ link.title }}</a></li>
{% endfor %}
<!-- The following lines fix Lighthouse security warnings on the Shopify link.-->
{%- liquid
assign powered_by_link_html = powered_by_link
if powered_by_link_html contains 'rel="'
assign powered_link_rel_text = powered_by_link_html | split: 'rel="'
assign powered_link_rel_text = powered_link_rel_text[1] | split: '"' | first
assign powered_link_rel = 'rel="' | append: powered_link_rel_text | append: '"'
assign powered_by_link_html = powered_by_link_html | replace_first: powered_link_rel, ''
endif
if powered_by_link_html contains '<a '
assign powered_by_link_html = powered_by_link_html | replace: '<a ', '<a rel="noopener" '
endif
assign powered_by_link = powered_by_link_html
-%}
<!-- Remove the following line to delete 'Powered by Shopify' from your footer -->
<!-- Do not delete below this line -->
</ul>
</div>
{%- if section.settings.footer_payment_enable -%}
{%- unless shop.enabled_payment_types == empty -%}
<div class="footer__bottom__item">
<ul class="footer__payment payment-icons inline-list">
{%- for type in shop.enabled_payment_types -%}
<li>{{ type | payment_type_svg_tag: class:'payment-icon' }}</li>
{%- endfor -%}
<li class="list-payment__item Klarna_Payment">
<img class= "icon icon--full-color" src="https://upload.wikimedia.org/wikipedia/commons/4/40/Klarna_Payment_Badge.svg" alt="{{ shop.name }}" itemprop="logo">
</li>
</ul>
</div>
{%- endunless -%}
{%- endif -%}
</div>
{%- if anchor_logo -%}
{%- liquid
assign image = anchor_logo
assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.'
assign img_ratio = 1 | divided_by: image.aspect_ratio | times: 100 | round: 2
-%}
<div class="footer__anchor__logo__wrapper">
<a href="{{ routes.root_url }}" class="footer__anchor__logo"
data-aos="hero"
data-aos-duration="{{ animation_duration }}"
data-aos-easing="ease-out-quart">
<div class="image__holder lazy-image" style="background-image: url({{ image | img_url: '1x1' }}); padding-top: {{ img_ratio }}%;">
<img class="lazyload"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
data-src="{{ img_url }}"
data-sizes="auto"
data-parent-fit="contain"
alt="{{ image.alt | default: shop.name | strip_html | escape }}">
<noscript>
<img class="no-js-image" src="{{ image | img_url: '1240x' }}" alt="{{ image.alt | default: shop.name | strip_html | escape }}">
</noscript>
</div>
</a>
</div>
{%- endif -%}
</div>
{%- comment -%} Section background image {%- endcomment -%}
{%- if image_background -%}
{%- assign overlay_opacity = section.settings.overlay_opacity | times: 0.01 -%}
<div class="image-overlay" style="background-color:{{ section.settings.overlay_color }} !important; opacity:{{ overlay_opacity }};"></div>
{%- endif -%}
</footer>
<style>
.Klarna_Payment img {width: 40px;}
</style>
{% schema %}
{
"name": "Footer",
"max_blocks": 5,
"settings": [
{
"type": "select",
"id": "width",
"label": "Width",
"default": "wrapper--full",
"options": [
{ "value": "wrapper", "label": "Normal" },
{ "value": "wrapper--full", "label": "Wide" }
]
},
{
"label": "Logo",
"type": "image_picker",
"id": "logo"
},
{
"type": "range",
"id": "logo_image_width",
"label": "Logo width (in pixels)",
"min": 50,
"max": 400,
"step": 5,
"unit": "px",
"default": 150
},
{
"type": "header",
"content": "Optional background image"
},
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "select",
"id": "bg_position",
"label": "Position",
"default": "center-center",
"info": "Requires the 'Image parallax' setting to be disabled",
"options": [
{ "label": "Top", "value": "center-top" },
{ "label": "Right", "value": "right-center" },
{ "label": "Center", "value": "center-center" },
{ "label": "Left", "value": "left-center" },
{ "label": "Bottom", "value": "center-bottom" }
]
},
{
"type": "range",
"id": "overlay_opacity",
"label": "Opacity",
"min": 0,
"max": 100,
"step": 5,
"unit": "%",
"default": 75
},
{
"type": "color",
"id": "overlay_color",
"label": "Overlay color",
"default": "#fff"
},
{
"type": "header",
"content": "Bottom bar"
},
{
"type": "link_list",
"id": "footer_secondary_linklist",
"label": "Link List",
"info": "This menu won't show dropdown items."
},
{
"type": "checkbox",
"id": "footer_payment_enable",
"label": "Show payment types",
"default": true
},
{
"type": "header",
"content": "language selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Currency selector",
"info": "To add a currency, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_currency_selector",
"label": "Show currency selector",
"default": true
},
{
"type": "select",
"id": "type",
"label": "Type",
"options": [
{
"value": "currency",
"label": "Currency"
},
{
"value": "country",
"label": "Country"
}
]
},
{
"type": "header",
"content": "Anchor logo"
},
{
"label": "Image",
"type": "image_picker",
"id": "anchor_logo"
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 75
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 65
}
],
"blocks" : [
{
"type": "linklist",
"name": "Link list",
"settings": [
{
"type": "link_list",
"id": "linklist",
"label": "Link list",
"default": "footer",
"info": "This menu won't show dropdown items."
},
{
"type": "text",
"id": "title",
"label": "Title"
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Subscribers are under 'Accepts Marketing' in your [customer admin](/admin/customers)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Subscribe to get special offers, free giveaways, and once-in-a-lifetime deals.</p>"
},
{
"type": "checkbox",
"id": "show_name",
"label": "Show name field",
"default": false
},
{
"type": "text",
"id": "button_text",
"label": "Button text",
"default": "Join"
},
{
"type": "select",
"id": "button_color",
"label": "Button color",
"info": "Full width button only",
"default": "btn--neutral",
"options": [
{ "value": "btn--primary", "label": "Bright accent" },
{ "value": "btn--secondary", "label": "Secondary accent" },
{ "value": "btn--link", "label": "Link color" },
{ "value": "btn--neutral", "label": "Text color" },
{ "value": "btn--black", "label": "Black" },
{ "value": "btn--white", "label": "White" }
]
},
{
"type": "checkbox",
"id": "show_social_links",
"label": "Show social icons",
"info": "Edit your social settings and accounts in [Theme settings](/admin/themes/current/editor?context=theme)",
"default": false
}
]
},
{
"type": "social",
"name": "Social",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Edit your social settings and accounts in [Theme settings](/admin/themes/current/editor?context=theme)"
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Social"
},
{
"type": "richtext",
"id": "text",
"label": "Text"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "image_picker",
"id": "image",
"label": "Image"
},
{
"type": "range",
"id": "image_width",
"label": "Image width (in pixels)",
"min": 50,
"max": 400,
"step": 5,
"unit": "px",
"default": 150
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Text"
},
{
"type": "richtext",
"id": "text",
"label": "Text",
"default": "<p>Share store details, promotions, or brand content with your customers.</p>"
}
]
},
{
"type": "page",
"name": "Page",
"settings": [
{
"id": "page",
"type": "page",
"label": "Page"
}
]
}
]
}
{% endschema %}
Hi, that worked perfectly!
Thanks very much for your help!
its my pleasure to help us
Hi Ketan,
We had to update our theme so we lost this alteration. Also it's not showing any of our payment methods at the footer on this new verson. Would you be able to help again?
Thanks very much.
@Kennect
can you please share more details
Yes, yesterday I integrated Klarna via an API. I want to place the Klarna icon in my footer, next to the regular Shopify Payments icons. This is possible, but with some customization of the Footer.liquid. I would like some assistance from you.
Hope you can help me!
Hi Ketan
Here is our Footer code:
{%- liquid
assign locale_selector = false
assign country_selector = false
if section.settings.show_country_selector and localization.available_countries.size > 1
assign country_selector = true
endif
if section.settings.show_locale_selector and localization.available_languages.size > 1
assign locale_selector = true
endif
case section.blocks.size
when 0
when 1
assign column_width = 'desktop-12 tablet-6 mobile-3'
when 2
assign column_width = 'desktop-6 tablet-3 mobile-3'
when 3
assign column_width = 'desktop-4 tablet-3 mobile-3'
when 4
assign column_width = 'desktop-3 tablet-3 mobile-3'
endcase
-%}
{% if locale_selector or country_selector %}
{{ 'component-footer-disclosures.css' | asset_url | stylesheet_tag }}
{% endif %}
<div class="footer-section" data-section-id="{{ section.id }}" data-section-type="footer-section">
<footer>
<div id="footer-wrapper">
<div id="footer" class="row" >
{% for block in section.blocks %}
<section class="footer-block block-{{ block.id }}" {{ block.shopify_attributes }}>
{% case block.type %}
{% when 'menu' %}
<div class="footer-sect">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
<ul>
{% for link in linklists[block.settings.footer_nav].links %}
<li>{{ link.title | link_to: link.url }}</li>
{% endfor %}
</ul>
<style>
@media (min-width: 980px) {
.footer-block.block-{{ block.id }} {
flex-grow: 1;
flex-basis: 180px;
}
}
@media (max-width: 740px) {
.footer-block.block-{{ block.id }} {
display: inline-block;
width: 49%;
margin-top: 40px;
}
}
</style>
</div>
{% when 'newsletter' %}
<div class="footer-sect">
<h3 class="h4">{{ block.settings.title | escape }}</h3>
{{ block.settings.mailing_subheading }}
<div id="footer_signup">
{% form 'customer' %}
{{ form.errors | default_errors }}
{% if form.posted_successfully? %}
<p class="success">{{ 'general.password_page.thanks' | t }}</p>
{% else %}
<input type="hidden" name="contact[tags]" value="prospect, password page">
<input type="email" name="contact[email]" id="footer-EMAIL" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}">
<input type="submit" id="footer-subscribe" value="{{ 'general.newsletter_form.submit' | t }}">
{% endif %}
{% endform %}
<style>
@media (min-width: 980px) {
.footer-block.block-{{ block.id }} {
flex-grow: 2;
flex-basis: 400px
}
}
@media (max-width: 740px) {
.footer-block.block-{{ block.id }} {
margin-top: 40px;
}
}
</style>
</div>
</div>
{% when 'text' %}
<div class="footer-sect">
{%- if block.settings.title != blank -%}<h3 class="h4">{{ block.settings.title | escape }}</h3>{%- endif -%}
{%- if block.settings.bottom_logo != blank -%}
<img class="logo-image" src="{{ block.settings.bottom_logo | img_url: '400x' }}" alt="{{ shop.name }}">
{%- endif -%}
{%- if block.settings.footer_text != blank -%}
<div class="rte">
{{ block.settings.footer_text }}
</div>
{%- endif -%}
<style>
@media (min-width: 980px) {
.footer-block.block-{{ block.id }} {
flex-grow: 2;
flex-basis: 400px
}
}
.footer-block.block-{{ block.id }} .logo-image {
max-width: {{ block.settings.bottom_logo_max_width }}px;
width: {{ block.settings.bottom_logo_max_width }}px;
}
</style>
</div>
{% endcase %}
</section>
{% endfor %}
</div>
<div id="bottom-footer" class="row">
<div class="footer-left">
{% if section.settings.show_social_icons %}
<div class="clear"></div>
{% render 'social-icons',
wrapper: '.footer-left',
fill_color: 'var(--footer-icons-color)',
social_grid: 'desktop-12 tablet-6 mobile-3' %}
{% endif %}
<div id="copy" class="desktop-12 tablet-6 mobile-3">
<p>
{% if section.settings.show_copyright %}{{ 'general.footer.copyright' | t }} © {{ 'now' | date: "%Y" }} {{ shop.name | link_to: '/' }}. {% endif %}{{ powered_by_link }}
</p>
</div>
</div>
<div class="footer-right">
{% if locale_selector or country_selector %}
<div class="disclosures desktop-12 tablet-6 mobile-3">
<div class="selectors-form">
{%- if locale_selector -%}
<div class="selectors-form__item">
<noscript>
{%-
form 'localization',
id: 'FooterLanguageFormNoScript',
class: 'localization-form selectors-form',
data-disclosure-form: ''
-%}
<h2 class="visually-hidden" id="FooterLanguageLabelNoScript">
{{ 'general.currency.dropdown_label' | t }}
</h2>
<div class="selectors-form__select">
<select
name="locale_code"
class="localization-selector button"
aria-labelledby="FooterLanguageLabelNoScript">
<option value="" disabled>{{ 'general.language.dropdown_label' | t }}</option>
{%- 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 'snip-icons',
type: 'apollo',
icon: 'down-carrot',
size: '8px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</div><!-- /.selectors-form__select -->
<button class="localization-form__noscript-btn">
{% render 'snip-icons',
type: 'apollo',
icon: 'checkmark',
size: '12px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</button>
{%- endform -%}
</noscript>
{%-
form 'localization',
id: 'FooterLanguageForm',
class: 'localization-form selectors-form',
data-disclosure-form: ''
-%}
<div class="disclosure" data-disclosure-locale>
<div class="no-js-hidden">
<h2 class="visually-hidden" id="FooterLanguageLabel">
{{ 'general.language.dropdown_label' | t }}
</h2>
<button
type="button"
class="disclosure__toggle"
aria-expanded="false"
aria-controls="FooterLanguageList"
aria-describedby="FooterLanguageLabel"
data-disclosure-toggle>
{{ localization.language.endonym_name | capitalize }}
{% render 'snip-icons',
type: 'apollo',
icon: 'down-carrot',
size: '8px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</button>
<ul id="FooterLanguageList" class="disclosure-list" data-disclosure-list>
{%- for language in localization.available_languages -%}
<li
class="disclosure-list__item {% if language.iso_code == localization.language.iso_code %}disclosure-list__item--current{% endif %}">
<a
class="disclosure-list__option"
href="#"
hreflang="{{ language.iso_code }}"
title="{{ language.endonym_name | capitalize }}"
lang="{{ language.iso_code }}"
{% if language.iso_code == localization.language.iso_code %}
aria-current="true"
{% endif %}
data-value="{{ language.iso_code | capitalize }}"
data-disclosure-option>
{{ language.endonym_name | capitalize }}
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="locale_code" value="{{ localization.language.iso_code }}" data-disclosure-input/>
</div><!-- /.no-js-hidden -->
</div><!-- /.disclosure -->
{%- endform -%}
</div><!-- /.selectors-form__item -->
{%- endif -%}
{%- if country_selector -%}
<div class="selectors-form__item">
<noscript>
{%-
form 'localization',
id: 'FooterCountryFormNoScript',
class: 'localization-form selectors-form',
data-disclosure-form: ''
-%}
<h2 class="visually-hidden" id="FooterCountryLabelNoScript">
{{ 'general.currency.dropdown_label' | t }}
</h2>
<div class="selectors-form__select">
<select
class="localization-selector button"
name="country_code"
aria-labelledby="FooterCountryLabelNoScript">
<option value="" disabled>{{ 'general.currency.dropdown_label' | t }}</option>
{%- 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 'snip-icons',
type: 'apollo',
icon: 'down-carrot',
size: '8px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</div><!-- /.selectors-form__select -->
<button class="localization-form__noscript-btn">
{% render 'snip-icons',
type: 'apollo',
icon: 'checkmark',
size: '12px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</button>
{% endform %}
</noscript>
{%-
form 'localization',
id: 'FooterCountryForm',
class: 'localization-form selectors-form',
data-disclosure-form: ''
-%}
<div class="disclosure" data-disclosure-country>
<div class="no-js-hidden">
<h2 class="visually-hidden" id="FooterCountryLabel">
{{ 'general.currency.dropdown_label' | t }}
</h2>
<button
type="button"
class="disclosure__toggle"
aria-expanded="false"
aria-controls="FooterCountryList"
aria-describedby="FooterCountryLabel"
data-disclosure-toggle>
{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }})
{% render 'snip-icons',
type: 'apollo',
icon: 'down-carrot',
size: '8px',
fill: 'var(--footer-text)',
hover: 'var(--footer-background)' %}
</button>
<ul
id="FooterCountryList"
class="disclosure-list"
data-disclosure-list>
{% for country in localization.available_countries %}
<li class="disclosure-list__item {% if country.iso_code == localization.country.iso_code %}disclosure-list__item--current{% endif %}">
<a
class="disclosure-list__option"
href="#"
title="{{ country.iso_code }}"
{% if country.iso_code == localization.country.iso_code %}
aria-current="true"
{% endif %}
data-value="{{ country.iso_code }}"
data-disclosure-option>
{{ country.name }} <span class="localization-form__currency">{{ country.currency.iso_code }} {{ country.currency.symbol }}</span>
</a>
</li>
{%- endfor -%}
</ul>
<input type="hidden" name="country_code" value="{{ localization.country.iso_code }}" data-disclosure-input/>
</div><!-- /.no-js-hidden -->
</div><!-- /.disclosure -->
{% endform %}
</div><!-- /.selectors-form__item -->
{%- endif -%}
</div><!-- /.selectors_form -->
</div><!-- /.disclosures -->
{% endif %}
{% if section.settings.show_credit_cards %}
<div id="payment" class="credit desktop-12 tablet-6 mobile-3">
{% for type in shop.enabled_payment_types %}
{{ type | payment_type_svg_tag: class:'payment-icon' }}
{% endfor %}
</div>
{% endif %}
</div>
</div>
</div>
</footer>
<style>
#footer .footer-sect {
text-align: {{ section.settings.text_alignment }};
{% if section.settings.text_alignment == 'center' %}
margin-left: auto;
margin-right: auto;
{% endif %}
}
#footer-wrapper {
text-align: {{ section.settings.footer_text_align }};
}
@media (min-width: 980px) {
#footer {
display: flex;
}
.footer-block + .footer-block {
margin-left: 3%;
}
}
div#bottom-footer {
display: flex;
margin: 0 auto;
padding-top: 32px;
border-top: 1px solid {{ settings.footer_border }};
margin-top: 64px;
align-items: flex-end;
}
div#bottom-footer .footer-left {
width: 50%;
text-align: left;
}
div#bottom-footer .footer-right {
width: 50%;
text-align: right;
}
div#bottom-footer #copy p {
text-align: left;
margin: 0;
}
div#bottom-footer #payment {
text-align: right;
margin-top: 16px;
}
div#bottom-footer #footer-icons {
margin: 0;
}
div#bottom-footer #footer-icons i {
font-size: 19px;
}
div#bottom-footer div#copy {
margin-top: 21px;
text-transform: capitalize;
}
@media (min-width: 980px) {
#footer #payment {
text-align: {{ section.settings.footer_text_align }};
}
#footer ul#footer-icons {
text-align: {{ section.settings.footer_text_align }};
}
{% if section.settings.footer_text_align == 'left' %}
#footer ul#footer-icons li:first-child {
margin-left: 0;
padding-left: 0;
}
#footer .selectors-form {
justify-content: flex-start;
flex-wrap: nowrap;
}
{% endif %}
}
@media (max-width: 740px) {
div#bottom-footer {
flex-wrap: wrap;
}
div#bottom-footer .footer-left {
width: 100%;
text-align: left;
order:2;
margin-top: 31px;
}
div#bottom-footer .footer-right {
width: 100%;
text-align: left;
order: 1;
}
div#bottom-footer .selectors-form {
justify-content: flex-start;
margin: 0;
}
div#bottom-footer #payment {
text-align: left;
}
div#bottom-footer .footer-section .disclosure__toggle {
height: 44px;
width: 80px;
}
section.footer-block {
vertical-align: top;
}
}
</style>
</div>
{% schema %}
{
"name": "Footer",
"max_blocks": 4,
"settings": [
{
"type": "select",
"id": "footer_text_align",
"label": "Footer text align",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "checkbox",
"id": "show_credit_cards",
"label": "Show payment icons",
"default": true,
"info": "The icons that show are determined by your store's payment settings."
},
{
"type": "checkbox",
"id": "show_social_icons",
"label": "Show social icons",
"default": true
},
{
"type": "checkbox",
"id": "show_copyright",
"label": "Show site name and copyright",
"default": true
},
{
"type": "header",
"content": "Language Selector",
"info": "To add a language, go to your [language settings.](/admin/settings/languages)"
},
{
"type": "checkbox",
"id": "show_locale_selector",
"label": "Show language selector",
"default": true
},
{
"type": "header",
"content": "Country/Region Selector",
"info": "To add a country/region, go to your [payment settings.](/admin/settings/payments)"
},
{
"type": "checkbox",
"id": "show_country_selector",
"label": "Show country/region selector",
"default": true
}
],
"blocks": [
{
"type": "menu",
"name": "Menu",
"settings": [
{
"type": "link_list",
"id": "footer_nav",
"label": "Choose a menu",
"info": "This menu won't show dropdown items"
},
{
"type": "text",
"id": "title",
"label": "Menu title",
"default": "Explore"
}
]
},
{
"type": "newsletter",
"name": "Newsletter signup",
"limit": 1,
"settings": [
{
"type": "text",
"id": "title",
"label": "Mailing list section title",
"default": "Connect"
},
{
"type": "richtext",
"id": "mailing_subheading",
"label": "Mailing list subheading",
"default": "<p>Join our mailing list for updates</p>"
}
]
},
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Text title",
"default": "About"
},
{
"id": "footer_text",
"type": "richtext",
"label": "Text",
"default": "<p>Adding text to your footer helps introduce your business to new customers.</p>"
},
{
"type": "image_picker",
"id": "bottom_logo",
"label": "Show logo image"
},
{
"type": "range",
"id": "bottom_logo_max_width",
"min": 100,
"max": 600,
"step": 10,
"unit": "px",
"label": "Logo image width",
"default": 300
}
]
}
]
}
{% endschema %}
Can you please add a Klarna logo for us too?
Thanks
Paul
Seems likely that issue would be related to Shopify liquid code:
shop.enabled_payment_types
documented at: public docs: https://shopify.dev/api/liquid/objects/shop#shop-enabled_payment_types
As Klarna is migrating from our previous HPSDK integration to Shopify's new payments integration (https://docs.klarna.com/platform-solutions/shopify/payments/klarna-payments/), please let me know if there is something Klarna can configure be included in shop.enabled_payment_types
(as this issue is affecting other merchants & themes also)
Hi!
We have the same problem too. We have the Prestige theme.
Can anyone help?
oh sorry for that issue can you please share footer section code so i will check and update
Yes I experience that problem too have do not know how to apply that code have tried that myself and I also use the sense theme someone who can help me?
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024