How can I compress and align payment icons to the right?

Store Design

Topic summary

A user seeks help compressing footer payment icons and aligning them to the right side of their Shopify store. They’ve added code to footer.liquid but the implementation isn’t working as intended.

Current Issue:

  • Payment icons in the footer need to be compressed and right-aligned
  • The user shared their website URL for troubleshooting

Proposed Solution:
A community member suggested creating a wrapper div (named “country-payment”) to contain both the country selector and payment icons, then applying CSS:

  • Use display: flex with flex-direction: column to stack elements vertically
  • Add gap: 10px for spacing between items
  • Apply additional CSS to the payment icons container for proper alignment

The solution involves restructuring the HTML with a containing div and using flexbox properties to avoid conflicts and achieve proper alignment. The user is now asking where exactly to place this code in their theme files.

Summarized with AI on November 11. AI used: claude-sonnet-4-5-20250929.
5

where should i put the code, thank you