Shopify themes, liquid, logos, and UX
I would like to add payment icons in the Footer.I have third party payment integration(PhonePe) with my Shopify 2.0(Broadcast theme) store which doesn't show payment icon by default. I followed another thread having the same question but it is not applicable for Shopify 2.0.
For your info, I am not able to see any text called 'payment' in 'footer.liquid' but i have below snippet in section-'supporting-menu.liquid'
{%- if section.settings.footer_payment_enable -%}
{%- unless shop.enabled_payment_types == empty -%}
<div class="supporting-menu__item supporting-menu__item--payment">
<ul class="supporting-menu__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 -%}
I would like to add these icons with text like 'Your payment is secure with us'.
Appreciate your help on this
Thanks for the reply, but it didn't work. Below is the complete code from the file 'supporting-menu.liquid', after the change. As you suggested I just removed the if condition from the code snippet. Please correct me if i am doing anything wrong
<!-- /sections/section-supporting-menu.liquid -->
{%- liquid
assign languages = false
assign countries = false
assign show_locale_selector = section.settings.show_locale_selector
assign show_country_selector = section.settings.show_country_selector
assign show_country_name = section.settings.show_country_name
assign show_country_flag = section.settings.show_country_flag
if show_locale_selector and localization.available_languages.size > 1
assign languages = true
endif
if show_country_selector and localization.available_countries.size > 1
assign countries = true
endif
-%}
{%- style -%}
#SupportingMenu--{{ section.id }} {
--PT: {{ section.settings.padding_top }}px;
--PB: {{ section.settings.padding_bottom }}px;
}
{%- endstyle -%}
<section
id="SupportingMenu--{{ section.id }}"
class="supporting-menu section-padding"
data-section-id="{{ section.id }}"
data-section-type="supporting-menu"
>
<div class="supporting-menu__inner wrapper--full-padded">
{%- if languages or countries -%}
<div class="supporting-menu__item supporting-menu__item--localization">
{%- render 'localization',
unique: section.id,
show_locale_selector: show_locale_selector,
show_country_selector: show_country_selector,
show_country_flag: show_country_flag,
show_country_name: show_country_name,
class: 'footer',
show_icon: true
-%}
</div>
{%- endif -%}
<div class="supporting-menu__item supporting-menu__item--copyright">
<ul class="supporting-menu__copyright inline-list">
<li>
<a href="{{ shop.secure_url }}"
>© {{ shop.name }}
{{ 'now' | date: '%Y' -}}
</a>
</li>
{% for link in linklists[section.settings.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>
{%- unless shop.enabled_payment_types == empty -%}
<div class="supporting-menu__item supporting-menu__item--payment">
<ul class="supporting-menu__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 -%}
</div>
</section>
{% schema %}
{
"name": "Supporting menu",
"limit": 1,
"settings": [
{
"type": "header",
"content": "Bottom bar"
},
{
"type": "link_list",
"id": "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": "Country/Region selector",
"info": "To add a country/region, go to your [markets settings](/admin/settings/markets)."
},
{
"type": "checkbox",
"id": "show_country_selector",
"label": "Show country/region selector",
"default": true
},
{
"type": "checkbox",
"id": "show_country_name",
"label": "Show country name",
"default": false
},
{
"type": "checkbox",
"id": "show_country_flag",
"label": "Show country flag",
"default": true
},
{
"type": "header",
"content": "Section padding"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding top",
"default": 30
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 1,
"unit": "px",
"label": "Padding bottom",
"default": 30
}
],
"presets": [
{
"name": "Supporting menu",
"category": "Text"
}
],
"enabled_on": {
"groups": ["footer"]
}
}
{% endschema %}
Any update on this.
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025