Adding Payment Icon in Footer for Shopify 2.0 (Broadcast theme)

Raza58
New Member
4 0 0

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.

https://community.shopify.com/c/technical-q-a/why-don-t-my-payment-icons-show-up-in-footer-settings/...

 

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

Replies 3 (3)

kaiyaa
Explorer
254 19 24

Hello @Raza58 

please replace your code with this


{%- 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 -%}

 

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Was I helpful? Buy me a coffee
For fast response Message me
Need Help Message me
Raza58
New Member
4 0 0

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 }}"
            >&copy; {{ 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 %}

 

Raza58
New Member
4 0 0

Any update on this.