Help adding payment icons in footer

Store Design
, ,

Topic summary

A user is attempting to add payment icons to their website footer but encountering alignment issues. They’re using a custom theme (not from Shopify’s theme store) on a password-protected site.

Initial Problem:

  • Payment icons needed in footer
  • Standard tutorials unsuccessful due to custom theme

Solution Attempted:
Another user provided Liquid code to manually insert payment icons into the footer.liquid file:

  • Navigate to Online Store > Themes > Edit Code
  • Locate footer.liquid
  • Insert code using shop.enabled_payment_types loop with payment_type_svg_tag

Current Issue:
The icons now display but are stacked vertically instead of horizontally (screenshot provided).

Proposed Fixes:

  1. Check theme customizer settings (Footer Section > Payment Method)
  2. Add CSS to align icons horizontally by targeting .list-payment .icon-list with flexbox properties

Status: Unresolved - the user reports the CSS solution did not fix the alignment problem. The discussion remains open with no working solution yet implemented.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I am needing to add the payment icons in the footer of my website. I’ve tried following the tutorials and watched a view videos but I have been unsuccessful. I’m not using a them from the Shopify them store as that may be one issue. Is anyone able to assist me with this, I attached a screenshot and I can send my store URL and give you access if needed.

My site is currently password protected but I can send the link in a message

Thanks a lot!

Screenshot 2025-02-27 at 8.07.21 PM.png
Screenshot 2025-02-27 at 8.07.21 PM.png2812×508 91 KB

2

Kindly provide your store’s URL.

3

Sure, it is www.forgiveoursins.co but it is password protected. Tried to message you.

4

Provide the password as well. I forgot to include that.

5

Yes, I received your e-mail. Messaging you now

6

Tried to email you but its back undeliverable when sending to your email address

7

You can add Payment Icons manually by editing your footer’s Liquid code.

  1. Go to Online Store > Themes
  2. Click … (three dots) next to your theme and select Edit Code
  3. Locate the file footer.liquid
  4. Insert the following code where you want the payment icons to appear:
  5. Save the changes and check if the icons appear on your store.

  {%- for type in shop.enabled_payment_types -%}
    - {{ type | payment_type_svg_tag: class: 'icon icon--full-color' }}
    
  {%- endfor -%}

I hope this answer will be helpful

8

Thank you for that. So they do show up, but they show vertical.

Screenshot 2025-02-27 at 10.06.55 PM.png
Screenshot 2025-02-27 at 10.06.55 PM.png2625×528 38.6 KB

9

Hi @corp41
Go to the Online Store > Theme > Customize > Footer Section > Payment Method

topnewyork_0-1740724931070.png
topnewyork_0-1740724931070.png305×579 18.9 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

10

@corp41 When you make your store live, the payment links will automatically show, but first, check this mark.

11
  1. Log in to your Shopify Admin Panel
  2. Go to: Online Store > Themes
  3. Find your current theme (e.g., Dawn theme).
  4. Click “Actions” and select “Edit Code”
  5. In the left-hand sidebar, locate the “Assets” folder.
  6. CSS files (e.g., base.css, theme.css)
  7. Add the provided code at the end of the file.
.list-payment .icon-list {
    display: flex;
    align-items: center;
}
12

I added this code and it did not change the alignment