Klarna logo doesn't show in 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

 

[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 

[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 

[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?