HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Change the default sorting of a collection
    • Combined listings app
    • Customize the checkout
    • Remove 'Powered by Shopify' in Copyright
    • Remove text Tax included and Shipping calculated at checkout below the product price
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to show the payment icons
  • Why are icons not showing up/ missing
  • Choose which payment icons to display
  • Make sure you enable the payment icons in your Footer
  • Edit the code for your payment icons
  1. FAQs

Show Payment icons

Everything you need to know about the payment icons

PreviousSet up quantity rules and volume pricing in B2B

Last updated 2 months ago

How to show the payment icons

Payment icons can be displayed on:

  • Product page > Product information section > Payment info block.

  • Footer

Why are icons not showing up/ missing

Only payment options accepted through Shopify Payments will automatically display their icons in the footer.

What Can You Do?

  • Contact Shopify Support: For the latest information and potential workarounds, we suggest you contact Shopify Support. They can provide the most up-to-date details on the payment method icon display.

  • Theme Customization: If you're comfortable with code editing, Hyper theme allows manual customization of the footer section to display icons for third-party gateways.

Choose which payment icons to display

If you want to add or remove payment icons in the Footer without changing your payment settings, then you can edit your theme code by following our steps below.

Make sure you enable the payment icons in your Footer

  1. Click Footer.

  2. Check the Show payment icons checkbox.

  3. Click Save.

Edit the code for your payment icons

In this step, you will change the way that payment icons are assigned to your Footer.

By default, your theme shows icons associated with the payment gateway you have enabled in the Shopify payments settings.

With this customization, you can manually add or remove the payment icons that you want to display.

Steps:

  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. Find the following code in the file:

{%- for type in shop.enabled_payment_types -%}

Replace that code with the following:

{% 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 shown on your online store.

You can edit the list of payment providers to suit your needs.

.

Go to the .

and copy the icon's name that you need from that list, without the .svg extension.

✍️
Learn more about Shopify Payments here
theme editor
Review the list of available values