Display payment method icons at the footer

Display payment method icons at the footer

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
  3. In the Sections directory, click footer.liquid. If your theme doesn't include this file, then click theme.liquid in the Layout directory.
  4. Find the following code in the file:
Idea
{% for type in shop.enabled_payment_types %}

Replace that code with the following:
Idea
{% assign enabled_payment_types = 'visa,master,american_express,paypal' | remove: ' ' | split: ',' %}
{% for type in enabled_payment_types %}

In the code that you just pasted, there is a list of payment providers separated by commas: visa,master,american_express,paypal. The payment providers that you include in this list will determine which payment icons display on your online store. You can edit the list of payment providers to suit your needs. Review the list of available values and copy the name of each icon that you need from that list, without the .svg extension. Common values are listed below: - afterpay - american_express - apple_pay - bitcoin - dankort - diners_club - discover - dogecoin - dwolla - facebook_pay - forbrugsforeningen - google_pay - ideal - jcb - klarna - klarna-pay-later - litecoin - maestro - master - paypal - shopify_pay - sofort - unionpay - visa
  1. Click Save.


    • Related Articles

    • Add additional social media icons in the footer

      Step 1 : Go to Online Store->Theme->Edit code->Config->settings_schema.json -> find where social media icons has been placed , as shown in the attached file, then insert the given code there: { "type": "text", "id": "social_linkedin_link", "label": ...

    • Adjust footer layout to center on mobile view

      In the footer section, add the following in the custom css: @media only screen and (max-width: 749px) { .list-menu__item { justify-content: center; } .footer-block.grid__item.scroll-trigger.animate--slide-in { text-align: center; } ...

    • Remove the header and footer from a specific landing page

      Add this code before </body> tag in your theme.liquid file: {% if page.handle == 'x' %} <style> .header, footer {display: none;} </style> {% endif %}

    • Make copyright in the footer to center

      From your Shopify admin dashboard, click on "Online Store" and then "Themes". Find the theme that you want to edit and click on "Actions" and then "Edit code". In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on ...

    • Reduce menu link padding in the footer

      In the footer section, add the following in the custom css: .list-menu__item--link { padding: 0px; }