How can I correctly align payment logos on my online store's footer?

Shopify Discussion

Topic summary

A Shopify store owner encountered misaligned payment logos in their footer—logos were stacking vertically instead of displaying horizontally in a row and weren’t centered properly.

Issue Details:

  • Payment logos added via custom code to footer
  • Logos appearing underneath each other rather than side-by-side
  • Alignment not centered as intended

Solution Provided:

  • Add CSS code to assets/styles.scss.css file
  • Insert .payment_methods { width: 290px !important; } at the bottom of the stylesheet

Outcome:

  • Issue resolved successfully after implementing the CSS fix
Summarized with AI on November 25. AI used: claude-sonnet-4-5-20250929.
1

I have added payment logo’s to the footer of my Shopify store by using code. The allignment is all wrong though. It needs to be next to each other and not under and in the middle. Please could someone assist. www.theperfecttouch.co.za. The below is what I currently have:

{{ powered_by_link }}

{% if section.settings.display_payment_methods %}

{% assign enabled_payment_types = 'visa,master,payflex,mobicred,payfast_instant_eft,zapper' | remove: ' ' | split: ',' %} {% for type in enabled_payment_types %}
{{ type | payment_type_svg_tag: class:'payment-icon' }} {% endfor %}
2

@Mareze Go to assets/styles.scss.css and paste below css at bottom of file.

.payment_methods
{
width: 290px !important!
}
3

Thank you! all sorted