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.
1

hello, may i know how to compress the footer payment icon and put it on the right side, i put this code in footer.liquid, thank you for the help,

jtjyjnh.png
jtjyjnh.png1331×517 49.6 KB

gfhfhfg.png
gfhfhfg.png1366×294 17.6 KB

2

Hey Sebfe,
please share the preview link or website link with me then definitely help on the issue

3

hello, this is my website https://touchcare.shop

4

You can adjust the html and use css to give them a good look for example:

we will have to add a div let’s name it country-payment,

In this will will place the country selector and payment list

so css will be

.country-payment{
   display: flex;
   flex-direction: column; /*will arrange them in column*/
   gap: 10px;/*will add some gap, you can adjust*/
}

now they both will be align

I am seeing you payment images are not align properly they are very far it will create conflict. So better create a div around them suppose we created one named payment and now we will apply css here as well

.payment{
   display: flex;
   flex-direction: column; /*will arrange them in column*/
   gap: 10px;/*will add some gap, you can adjust*/
}
5

where should i put the code, thank you