Shopify themes, liquid, logos, and UX
To continue receiving payouts, you need to secure your account by turning on two-step authentication. If two-step authentication is not turned on your payouts will be paused. Learn more
All the other payment processors show except Klarna. Is there a way to fix this? As Klarna converts the most.
Using sense theme Shopify 2.0
Solved! Go to the solution
Thank you for your reply and help!!! Now I got it to show 🙂
Hi again KetanKumar and sorry to bother you again.
I now got Klarna to show (however the image is slightly below the other Payment options). But because I am also missing other various payment methods that are not showing (Paytrail) I am wondering if there'd be a snippet of code to add so that I can add a png image of the various payment methods.
I truly appreciate your help and input.
@KetanKumar Hi again. So I am attaching here a screenshot of the png I'd like to add to the footer showing all the various payment methods. Is there a way to do this? Thanks again a million.
its my pleasure yes you mean this image show at footer right?
@KetanKumar , yes I would love to add this png to the footer aligned right under the other payment options
Hi Ketan. I am having issues with this same thing for my store www.southwaythrills.com store password is "twowts"
How do I make klarna and vipps2.0 visible? I use the payed theme symmetry
Thanks 🙂
Hi, I also need to add the klarna logo ( smaller one with the rest of the payment options at the footer of my page, what exactly do I need to click on to be able to place that code? Could I have a step by step please
many thanks
Hi Ketankumar! This code doesn't work with my theme or maybe I do something wrong. Can you please help me?
oh sorry, can you please send your store url so i will check and let you know
yes, please add this code
1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
li.list-payment__item {
line-height: 0;
vertical-align: middle;
}
yes, please used this code
Hello,
Could you please help me, I have the same problem. I can add every payment method logo to the footer except for Klarna. Could you help me with the coding to add the Klarna payment method logo? I work with the prestige theme.
this is my Footer coding:
{%- if template.name == 'page' or template.name == 'blog' or template == 'customers/account' or template == 'customers/order' or template == 'customers/addresses' -%}
{%- assign add_top_margin = true -%}
{%- else -%}
{%- assign add_top_margin = false -%}
{%- endif -%}
<footer id="section-{{ section.id }}" class="Footer {% if section.blocks.size <= 2 %}Footer--center{% endif %} {% if add_top_margin %}Footer--withMargin{% endif %}" role="contentinfo">
<div class="Container">
{%- if section.blocks.size > 0 -%}
<div class="Footer__Inner">
{%- for block in section.blocks -%}
<div class="Footer__Block Footer__Block--{{ block.type }}" {{ block.shopify_attributes }}>
{%- case block.type -%}
{%- when 'text' -%}
{%- if block.settings.title != blank -%}
<h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
{%- endif -%}
{%- if block.settings.content != blank -%}
<div class="Footer__Content Rte">
{{ block.settings.content }}
</div>
{%- endif -%}
{%- if block.settings.show_social_media -%}
{% include 'social-media', class: 'Footer__Social', spacing: 'loose' %}
{%- endif -%}
{%- when 'links' -%}
{%- assign linklist = linklists[block.settings.menu] -%}
{%- if linklist != empty -%}
<h2 class="Footer__Title Heading u-h6">{{ linklist.title | escape }}</h2>
<ul class="Linklist">
{%- for link in linklist.links -%}
<li class="Linklist__Item">
<a href="{{ link.url }}" class="Link Link--primary">{{ link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'newsletter' -%}
{%- if block.settings.title != blank -%}
<h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
{%- endif -%}
{%- if block.settings.content != blank -%}
<div class="Footer__Content Rte">
{{ block.settings.content }}
</div>
{%- endif -%}
{%- form 'customer', id: 'footer-newsletter', class: 'Footer__Newsletter Form' -%}
{%- if form.posted_successfully? -%}
<p class="Form__Alert Alert Alert--success">{{ 'footer.newsletter.success' | t }}</p>
{%- else -%}
{%- if form.errors -%}
<p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
{%- endif -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'footer.newsletter.input' | t }}" placeholder="{{ 'footer.newsletter.input' | t }}" required>
<button type="submit" class="Form__Submit Button Button--primary">{{ 'footer.newsletter.submit' | t }}</button>
{%- endif -%}
{%- endform -%}
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="Footer__Aside">
<div class="Footer__Copyright">
<a href="{{ shop.url }}" class="Footer__StoreName Heading u-h7 Link Link--secondary">© {{ shop.name }}</a>
<!--{%- capture maestrooo_link -%}<a href="https://www.maestrooo.com" class="Link Link--primary" target="_blank" rel="noopener">Maestrooo</a>{%- endcapture -%}
<p class="Footer__ThemeAuthor">{{ 'footer.general.credits_html' | t: maestrooo_link: maestrooo_link }} | {{ powered_by_link | replace: '<a', '<a class="Link Link--primary"' }}</p>
</div> -->
{%- if section.settings.show_payment_methods -%}
{%- capture payment_methods -%}
{%- for type in shop.enabled_payment_types -%}
<li class="HorizontalList__Item">{{ type | payment_type_svg_tag }}</li>
{%- endfor -%}
{%- endcapture -%}
{%- if payment_methods != blank -%}
<ul class="Footer__PaymentList HorizontalList">
{{ payment_methods }}
</ul>
{%- endif -%}
{%- endif -%}
</div>
</div>
</footer>
{% schema %}
{
"name": "Footer",
"class": "shopify-section--footer",
"settings": [
{
"type": "checkbox",
"id": "show_payment_methods",
"label": "Show payment methods",
"info": "Payment method icons are automatically displayed based on your Shopify payment methods.",
"default": true
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "About the shop"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "<p>Use this text area to tell your customers about your brand and vision. You can change it in the theme settings.</p>"
},
{
"type": "checkbox",
"id": "show_social_media",
"label": "Show social media",
"info": "Make sure to have properly configured your social media in the theme settings.",
"default": true
}
]
},
{
"type": "links",
"name": "Links",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"info": "This menu won't show dropdown items."
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "<p>A short sentence describing what someone will receive by subscribing</p>"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {}
},
{
"type": "links",
"settings": {
"menu": "footer"
}
},
{
"type": "newsletter",
"settings": {}
}
]
}
}
{% endschema %}
yes, please update this code
{%- if template.name == 'page' or template.name == 'blog' or template == 'customers/account' or template == 'customers/order' or template == 'customers/addresses' -%}
{%- assign add_top_margin = true -%}
{%- else -%}
{%- assign add_top_margin = false -%}
{%- endif -%}
<footer id="section-{{ section.id }}" class="Footer {% if section.blocks.size <= 2 %}Footer--center{% endif %} {% if add_top_margin %}Footer--withMargin{% endif %}" role="contentinfo">
<div class="Container">
{%- if section.blocks.size > 0 -%}
<div class="Footer__Inner">
{%- for block in section.blocks -%}
<div class="Footer__Block Footer__Block--{{ block.type }}" {{ block.shopify_attributes }}>
{%- case block.type -%}
{%- when 'text' -%}
{%- if block.settings.title != blank -%}
<h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
{%- endif -%}
{%- if block.settings.content != blank -%}
<div class="Footer__Content Rte">
{{ block.settings.content }}
</div>
{%- endif -%}
{%- if block.settings.show_social_media -%}
{% include 'social-media', class: 'Footer__Social', spacing: 'loose' %}
{%- endif -%}
{%- when 'links' -%}
{%- assign linklist = linklists[block.settings.menu] -%}
{%- if linklist != empty -%}
<h2 class="Footer__Title Heading u-h6">{{ linklist.title | escape }}</h2>
<ul class="Linklist">
{%- for link in linklist.links -%}
<li class="Linklist__Item">
<a href="{{ link.url }}" class="Link Link--primary">{{ link.title | escape }}</a>
</li>
{%- endfor -%}
</ul>
{%- endif -%}
{%- when 'newsletter' -%}
{%- if block.settings.title != blank -%}
<h2 class="Footer__Title Heading u-h6">{{ block.settings.title | escape }}</h2>
{%- endif -%}
{%- if block.settings.content != blank -%}
<div class="Footer__Content Rte">
{{ block.settings.content }}
</div>
{%- endif -%}
{%- form 'customer', id: 'footer-newsletter', class: 'Footer__Newsletter Form' -%}
{%- if form.posted_successfully? -%}
<p class="Form__Alert Alert Alert--success">{{ 'footer.newsletter.success' | t }}</p>
{%- else -%}
{%- if form.errors -%}
<p class="Form__Alert Alert Alert--error">{{ form.errors.messages['email'] }}</p>
{%- endif -%}
<input type="hidden" name="contact[tags]" value="newsletter">
<input type="email" name="contact[email]" class="Form__Input" aria-label="{{ 'footer.newsletter.input' | t }}" placeholder="{{ 'footer.newsletter.input' | t }}" required>
<button type="submit" class="Form__Submit Button Button--primary">{{ 'footer.newsletter.submit' | t }}</button>
{%- endif -%}
{%- endform -%}
{%- endcase -%}
</div>
{%- endfor -%}
</div>
{%- endif -%}
<div class="Footer__Aside">
<div class="Footer__Copyright">
<a href="{{ shop.url }}" class="Footer__StoreName Heading u-h7 Link Link--secondary">© {{ shop.name }}</a>
<!--{%- capture maestrooo_link -%}<a href="https://www.maestrooo.com" class="Link Link--primary" target="_blank" rel="noopener">Maestrooo</a>{%- endcapture -%}
<p class="Footer__ThemeAuthor">{{ 'footer.general.credits_html' | t: maestrooo_link: maestrooo_link }} | {{ powered_by_link | replace: '<a', '<a class="Link Link--primary"' }}</p>
</div> -->
{%- if section.settings.show_payment_methods -%}
{%- capture payment_methods -%}
{%- for type in shop.enabled_payment_types -%}
<li class="HorizontalList__Item">{{ type | payment_type_svg_tag }}</li>
{%- endfor -%}
{%- endcapture -%}
{%- if payment_methods != blank -%}
<ul class="Footer__PaymentList HorizontalList">
{{ payment_methods }}
<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>
{%- endif -%}
{%- endif -%}
</div>
</div>
</footer>
<style>
.Klarna_Payment img {width: 40px;}
</style>
{% schema %}
{
"name": "Footer",
"class": "shopify-section--footer",
"settings": [
{
"type": "checkbox",
"id": "show_payment_methods",
"label": "Show payment methods",
"info": "Payment method icons are automatically displayed based on your Shopify payment methods.",
"default": true
}
],
"blocks": [
{
"type": "text",
"name": "Text",
"settings": [
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "About the shop"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "<p>Use this text area to tell your customers about your brand and vision. You can change it in the theme settings.</p>"
},
{
"type": "checkbox",
"id": "show_social_media",
"label": "Show social media",
"info": "Make sure to have properly configured your social media in the theme settings.",
"default": true
}
]
},
{
"type": "links",
"name": "Links",
"settings": [
{
"type": "link_list",
"id": "menu",
"label": "Menu",
"info": "This menu won't show dropdown items."
}
]
},
{
"type": "newsletter",
"name": "Newsletter",
"limit": 1,
"settings": [
{
"type": "paragraph",
"content": "Customers who subscribe will have their email address added to the \"accepts marketing\" [customer list](/admin/customers?query=&accepts_marketing=1)."
},
{
"type": "text",
"id": "title",
"label": "Heading",
"default": "Newsletter"
},
{
"type": "richtext",
"id": "content",
"label": "Text",
"default": "<p>A short sentence describing what someone will receive by subscribing</p>"
}
]
}
],
"default": {
"blocks": [
{
"type": "text",
"settings": {}
},
{
"type": "links",
"settings": {
"menu": "footer"
}
},
{
"type": "newsletter",
"settings": {}
}
]
}
}
{% endschema %}
Thank you very much @KetanKumar ! Super fast response and i now have the Klarna logo in my footer! I wish you a great day!
I have one more question, is it possible to put the logo next to the other logo's instead underneath?
its my pleasure to help us
I have one more question, is it possible to put the logo next to the other logo's instead underneath?
please share screenshot where did you add
User | RANK |
---|---|
118 | |
97 | |
73 | |
72 | |
46 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022