Klarna Payment icon not showing in footer

Store Design
1

Hello,

I have Klarna installed as a payment option on my store and it shows as connected. However the payment icon is not showing in the footer along with the rest. can anyone provide any help with this?

Thank you!

2

Hello Samrichards66

I hope this helps. Kindly like and accept as solution if it does

{% comment %}theme-check-disable UndefinedObject{% endcomment %}
{{ ‘section-footer.css’ | asset_url | stylesheet_tag }}

{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-menu.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-payment.css’ | asset_url | stylesheet_tag }}
{{ ‘component-list-social.css’ | asset_url | stylesheet_tag }}
{{ ‘component-rte.css’ | asset_url | stylesheet_tag }}
{{ ‘disclosure.css’ | asset_url | stylesheet_tag }}

{%- style -%}
.footer {
margin-top: {{ section.settings.margin_top | times: 0.75 | round: 0 }}px;
}

.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
}

@media screen and (min-width: 750px) {
.footer {
margin-top: {{ section.settings.margin_top }}px;
}

.section-{{ section.id }}-padding {
padding-top: {{ section.settings.padding_top }}px;
padding-bottom: {{ section.settings.padding_bottom }}px;
}
}
{%- endstyle -%}

{%- if section.blocks.size > 0 or section.settings.newsletter_enable or section.settings.show_social -%}
{%- if section.blocks.size > 0 -%} {%- liquid if section.blocks.size == 9 assign footer_grid_class = 'grid--3-col-tablet' elsif section.blocks.size > 6 assign footer_grid_class = 'grid--4-col-desktop' elsif section.blocks.size > 4 assign footer_grid_class = 'grid--3-col-tablet' endif -%}
{%- for block in section.blocks -%}
{%- if block.settings.heading != blank -%}

{{- block.settings.heading | escape -}}

{%- endif -%}

{%- case block.type -%}
{%- when ‘text’ -%}

{{ block.settings.subtext }}
{%- when 'link_list' -%} {%- if block.settings.menu != blank and block.settings.heading != blank -%} {%- endif -%} {%- when 'image' -%}
{%- if block.settings.image != blank -%} {%- assign image_size_2x = block.settings.image_width | times: 2 | at_most: 5760 -%} {{ block.settings.image.alt | escape }} {%- else -%} {{ 'image' | placeholder_svg_tag: 'placeholder-svg placeholder' }} {%- endif -%}
{%- endcase -%}
{%- endfor -%}
{%- endif -%}
{%- if section.settings.newsletter_enable -%}
{%- if section.settings.newsletter_heading != blank -%}

{{ section.settings.newsletter_heading | escape }}

{%- endif -%} {%- form 'customer', id: 'ContactFooter', class: 'footer__newsletter newsletter-form' -%}
{{ 'newsletter.label' | t }} {% render 'icon-arrow' %}
{%- if form.errors -%} {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%}
{%- if form.posted_successfully? -%}

{% render 'icon-success' %}{{ 'newsletter.success' | t }}

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

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

{%- endif -%}
{%- endif -%}
{%- if section.settings.enable_country_selector and localization.available_countries.size > 1 -%} {%- form 'localization', id: 'FooterCountryFormNoScript', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_country' | t }} {%- endform -%} {%- form 'localization', id: 'FooterCountryForm', class: 'localization-form' -%}

{{ 'localization.country_label' | t }}

{{ localization.country.name }} ({{ localization.country.currency.iso_code }} {{ localization.country.currency.symbol }}) {% render 'icon-caret' %}
{%- endform -%} {%- endif -%}

{%- if section.settings.enable_language_selector and localization.available_languages.size > 1 -%}

{%- form ‘localization’, id: ‘FooterLanguageFormNoScript’, class: ‘localization-form’ -%}

{{ 'localization.language_label' | t }}

{% render 'icon-caret' %}
{{ 'localization.update_language' | t }} {%- endform -%} {%- form 'localization', id: 'FooterLanguageForm', class: 'localization-form' -%}

{{ 'localization.language_label' | t }}

{{ localization.language.endonym_name | capitalize }} {% render 'icon-caret' %}
{%- endform -%} {%- endif -%}
{%- if section.settings.payment_enable -%}
{{ 'sections.footer.payment' | t }}
    {%- for type in shop.enabled_payment_types -%}
  • {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    • {%- endfor -%}
  • {{ shop.name }}
{%- endif -%}
© {{ 'now' | date: "%Y" }}, {{ shop.name | link_to: routes.root_url }} {{ powered_by_link }}
.Klarna_Payment img {width: 40px;}

{% javascript %}
class LocalizationForm extends HTMLElement {
constructor() {
super();
this.elements = {
input: this.querySelector(‘input[name=“locale_code”], input[name=“country_code”]’),
button: this.querySelector(‘button’),
panel: this.querySelector(‘.disclosure__list-wrapper’),
};
this.elements.button.addEventListener(‘click’, this.openSelector.bind(this));
this.elements.button.addEventListener(‘focusout’, this.closeSelector.bind(this));
this.addEventListener(‘keyup’, this.onContainerKeyUp.bind(this));

this.querySelectorAll(‘a’).forEach(item => item.addEventListener(‘click’, this.onItemClick.bind(this)));
}

hidePanel() {
this.elements.button.setAttribute(‘aria-expanded’, ‘false’);
this.elements.panel.setAttribute(‘hidden’, true);
}

onContainerKeyUp(event) {
if (event.code.toUpperCase() !== ‘ESCAPE’) return;

this.hidePanel();
this.elements.button.focus();
}

onItemClick(event) {
event.preventDefault();
const form = this.querySelector(‘form’);
this.elements.input.value = event.currentTarget.dataset.value;
if (form) form.submit();
}

openSelector() {
this.elements.button.focus();
this.elements.panel.toggleAttribute(‘hidden’);
this.elements.button.setAttribute(‘aria-expanded’, (this.elements.button.getAttribute(‘aria-expanded’) === ‘false’).toString());
}

closeSelector(event) {
const shouldClose = event.relatedTarget && event.relatedTarget.nodeName === ‘BUTTON’;
if (event.relatedTarget === null || shouldClose) {
this.hidePanel();
}
}
}

customElements.define(‘localization-form’, LocalizationForm);
{% endjavascript %}

{% schema %}
{
“name”: “t:sections.footer.name”,
“blocks”: [
{
“type”: “link_list”,
“name”: “t:sections.footer.blocks.link_list.name”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Quick links”,
“label”: “t:sections.footer.blocks.link_list.settings.heading.label”,
“info”: “t:sections.footer.blocks.link_list.settings.heading.info”
},
{
“type”: “link_list”,
“id”: “menu”,
“default”: “footer”,
“label”: “t:sections.footer.blocks.link_list.settings.menu.label”,
“info”: “t:sections.footer.blocks.link_list.settings.menu.info”
}
]
},
{
“type”: “text”,
“name”: “t:sections.footer.blocks.text.name”,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Heading”,
“label”: “t:sections.footer.blocks.text.settings.heading.label”
},
{
“type”: “richtext”,
“id”: “subtext”,
“default”: “

Share contact information, store details, and brand content with your customers.

”,
“label”: “t:sections.footer.blocks.text.settings.subtext.label”
}
]
},
{
“type”: “image”,
“name”: “Image”,
“settings”: [
{
“type”: “image_picker”,
“id”: “image”,
“label”: “Image”
},
{
“type”: “range”,
“id”: “image_width”,
“min”: 50,
“max”: 200,
“step”: 5,
“unit”: “px”,
“label”: “Image width”,
“default”: 100
},
{
“type”: “select”,
“id”: “alignment”,
“label”: “Image alignment on large screen”,
“options”: [
{
“value”: “”,
“label”: “Left”
},
{
“value”: “center”,
“label”: “Center”
},
{
“value”: “right”,
“label”: “Right”
}
],
“default”: “center”
}
]
}
],
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.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 %}

1 Like
3

Hi ThePrecisionist,

Thank you so much this has worked and Klarna is now showing on my site.

1 Like
4

You are welcome. I am glad to be of help

If you need further assistance, You can reach out to me

Cheers,

Tosin :blush:

5

Hi Tosin,

Where should this code be added to please?

Thank you.

6

Hi Mrflygerian,

It should be added to Sections footer.liquid
I changed the external link. I downloaded the icon and uploaded it to files in Shopify and I used the link to the uploaded image.
Hope it helped.
Best, Irina