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

[brandbuilding]

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

 

[KetanKumar]

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

[evamoon]

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

[evamoon]

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]

@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.

[KetanKumar]

@evamoon 

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

[evamoon]

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

[evamoon]

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]

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]

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]

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

{%- for locale in form.available_locales -%}

• 
  if locale.iso_code == form.current_locale.iso_code %}aria-current="true"{%
  endif %} data-value="{{ lo...
  
  
  

{%- endfor -%}

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

{%- for currency in form.available_currencies -%}

• 
  form.current_currency.iso_code %}aria-current="true"{% endif %}
  data-value="{{ currency.iso_code }}" ...
  
  
  
  
  
  
  
  
  
  

{%- endfor -%}

{%- 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]

Hello

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

[JEEcomAB]

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

[KetanKumar]

@JEEcomAB 

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

[JEEcomAB]

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

[KetanKumar]

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

[JEEcomAB]

Hello, any update about this?

[KetanKumar]

@JEEcomAB 

yes, please used this code

[JEEcomAB]

@KetanKumar 

I'm sorry, but what code?

[My70]

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]

Hello!

I have the same problem. Can you help me?

[KetanKumar]

@Steelvillage 

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

[Steelvillage]

The store url is www.stjarnviken.se 

Thank you! 

[KetanKumar]

@Steelvillage 

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

[Steelvillage]

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]

@KetanKumar 

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

Best regards

Daniel 

www.stjarnviken.se 

[KetanKumar]

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

[Steelvillage]

@KetanKumar 

Thank you.

Now it works fine. 

[KetanKumar]

@Steelvillage 

its my pleasure to help us 

[Kennect]

Hi Ketan,

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

Thanks!

[Filipa-intro]

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]

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

[Filipa-intro]

Hi, that worked perfectly!

Thanks very much for your help!

[KetanKumar]

@Filipa-intro 

its my pleasure to help us 

[Intro]

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]

@Kennect 
can you please share more details 

[Kennect]

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]

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

[PaulVale]

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]

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]

Hi!

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

Can anyone help? 

[KetanKumar]

@VWElla2022 

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

[mohammed121]

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?