Re: Klarna logo doesn't show in footer

Solved

Why isn't the Klarna logo showing in my footer?

brandbuilding
Tourist
10 0 7

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

 

D85DEC29-56C5-4E69-8BD3-620F2BC252A1.jpeg

Accepted Solution (1)
KetanKumar
Shopify Partner
37293 3652 12088

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">&copy; {{ '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 %}

@brandbuilding 

can you please update

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 91 (91)
KetanKumar
Shopify Partner
37293 3652 12088

@evamoon 

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>
&copy; {{ '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 %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
evamoon
Excursionist
11 0 3

Thank you for your reply and help!!! Now I got it to show 🙂

evamoon
Excursionist
11 0 3

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.

evamoon
Excursionist
11 0 3

@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.Screenshot 2022-08-17 at 16.22.43.png

KetanKumar
Shopify Partner
37293 3652 12088

@evamoon 

its my pleasure yes you mean this image show at footer right?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
evamoon
Excursionist
11 0 3

@KetanKumar  , yes I would love to add this png to the footer aligned right under the other payment options

 

Paytrail-banneri-kaikki-maksutavat.png

evamoon
Excursionist
11 0 3
Hello again Ketankumar,

I apologize for bothering you again, but is there a away to align these
payment icons, so that Klarna is on the same height as the other ones?

Thank you so much on beforehand

[image: Screenshot 2022-08-22 at 13.22.21.png]
didrikwasson
Visitor
2 0 0

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 🙂

Proven-Salle
Tourist
3 0 1

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. 

evamoon
Excursionist
11 0 3
{%- 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 -%}


data-section-type="footer-section">
{%- if section.settings.show_newsletter -%}


{%- if section.settings.newsletter_title != blank -%}
{{ section.settings.newsletter_title }}

{%- endif -%}

{%- if section.settings.newsletter_richtext != blank -%}

{{ section.settings.newsletter_richtext }}

{%- endif -%}


{%- render 'newsletter-form', section_id: section.id, snippet_context:
'footer' -%}



{%- endif -%}



{%- if show_selectors -%}
{%- form 'localization', class: 'multi-selectors site-footer__section' -%}
{%- if locale_selector -%}


{{ 'general.language.dropdown_label' | t }}





aria-expanded="false" aria-controls="LangList"
aria-describedby="LangHeading" data-disclosure-toggle>

{{ form.current_locale.endonym_name }}






{%- endif -%}

{%- if currency_selector -%}


{{ 'general.currency.dropdown_label' | t }}





aria-expanded="false" aria-controls="CurrencyList"
aria-describedby="CurrencyHeading" data-disclosure-toggle>
{%- if section.settings.show_currency_flags -%}

{%- endif -%}

{{ form.current_currency.iso_code }} {%- if form.current_currency.symbol
-%}{{ form.current_currency.symbol }}{%- endif -%}






{%- endif -%}
{%- endform -%}
{%- endif -%}

{%- if section.settings.show_social_icons -%}

{%- render 'social-icons', social_class: 'footer__social' -%}

{%- endif -%}

{%- if linklists[section.settings.menu].links.size > 0 -%}


    {%- for link in linklists[section.settings.menu].links -%}
  • {{ link.title }}

  • {%- endfor -%}


{%- endif -%}

{%- if section.settings.show_payment_icons -%}
{%- unless shop.enabled_payment_types == empty -%}


    {%- for type in shop.enabled_payment_types -%}

  • {{ type | payment_type_svg_tag }}

  • {%- endfor -%}


{%- endunless -%}
{%- endif -%}



{%- if section.settings.show_copyright -%}

© {{ 'now' | date: '%Y' }} {{ shop.name }}
{%- if section.settings.copyright_text != blank -%}
{{ section.settings.copyright_text }}
{%- endif -%}

{%- endif -%}
{{ powered_by_link }}




{% 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": "

Let customers know about the key benefits of joining your
newsletter.

"
},
{
"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 %}
oscaandlizzy
Visitor
1 0 0

Hello

I tried saving it but I keep getting an error and it won't save

JEEcomAB
Tourist
4 0 3

Hi Ketankumar! This code doesn't work with my theme or maybe I do something wrong. Can you please help me?

KetanKumar
Shopify Partner
37293 3652 12088

@JEEcomAB 

oh sorry, can you please send your store url  so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JEEcomAB
Tourist
4 0 3

Thank you! URL: https://www.celso.se

KetanKumar
Shopify Partner
37293 3652 12088

@brandbuilding 

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;
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JEEcomAB
Tourist
4 0 3

Hello, any update about this?

KetanKumar
Shopify Partner
37293 3652 12088

@JEEcomAB 

yes, please used this code

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
JEEcomAB
Tourist
4 0 3

@KetanKumar 

I'm sorry, but what code?

My70
New Member
10 0 0

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

Steelvillage
Tourist
5 0 5

Hello!

I have the same problem. Can you help me?

 

KetanKumar
Shopify Partner
37293 3652 12088

@Steelvillage 

yes, please share store url and footer code so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Steelvillage
Tourist
5 0 5

The store url is www.stjarnviken.se 

Thank you! 

KetanKumar
Shopify Partner
37293 3652 12088

@Steelvillage 

oh sorry for that issue can you please  share footer section code so i will check and let you know 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Steelvillage
Tourist
5 0 5

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 %}

Steelvillage
Tourist
5 0 5

@KetanKumar 

I have not recieved anything from you, Are you still able to help me?

 

Best regards

Daniel 

www.stjarnviken.se 

KetanKumar
Shopify Partner
37293 3652 12088

@Steelvillage 

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 %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Steelvillage
Tourist
5 0 5

@KetanKumar 

Thank you.

Now it works fine. 

 

KetanKumar
Shopify Partner
37293 3652 12088

@Steelvillage 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kennect
Visitor
3 0 0

Hi Ketan,

 

Can you help me with integrating the Klarna logo in my footer?

Thanks!

Filipa-intro
Tourist
3 0 2

Hi, could you please help me with the same problem? Thank you very much

www.intro-clothing.com

 

<!-- /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&colon;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&colon;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 }}">&copy; {{ 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&colon;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 %}

KetanKumar
Shopify Partner
37293 3652 12088

@Filipa-intro 

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&colon;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&colon;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 }}">&copy; {{ 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&colon;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 %}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Filipa-intro
Tourist
3 0 2

Hi, that worked perfectly!

 

Thanks very much for your help!

KetanKumar
Shopify Partner
37293 3652 12088

@Filipa-intro 

its my pleasure to help us 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Intro
Tourist
7 1 1

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.

KetanKumar
Shopify Partner
37293 3652 12088

@Kennect 
can you please share more details 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Kennect
Visitor
3 0 0

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!

Moft125551
Visitor
2 0 0

@KetanKumar I need your help too can I have your contact?

PaulVale
Visitor
1 0 0

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 }} &copy; {{ 'now' | date: "%Y" }} {{ shop.name | link_to: '/' }}. &nbsp;{% 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



KristiAtKlarna
Shopify Partner
205 14 39

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)

VWElla2022
Tourist
7 0 1

Hi!

We have the same problem too. We have the Prestige theme.

Can anyone help? 

KetanKumar
Shopify Partner
37293 3652 12088

@VWElla2022 

oh sorry for that issue can you please share footer section code so i will check and update

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

mohammed121
Visitor
1 0 0

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?