Shopify themes, liquid, logos, and UX
All the other payment processors show except Klarna. Is there a way to fix this? As Klarna converts the most.
Using sense theme Shopify 2.0
Solved! Go to the solution
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 |
---|---|
229 | |
147 | |
55 | |
52 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023