Payment icons dont appear in the same line

Store Design
,

Topic summary

A user is experiencing layout issues with payment icons in their Shopify store footer—the icons are not aligning on the same line with consistent spacing.

Proposed Solutions:

Two CSS-based fixes were suggested:

  1. Edit section-footer.css file:

    • Navigate to Online Store → Themes → Edit code → Assets folder
    • Add CSS media query targeting .footer__column--info with flexbox properties (display: flex, flex-direction: row-reverse, justify-content: flex-start)
    • Apply for screens with minimum width of 750px

  2. Add custom CSS to theme.liquid:

    • Insert CSS before </body> tag
    • Target .footer__column--info with display: flex and flex-direction: row !important
    • Adjust .ps-payment-icon positioning

Status: The original poster indicated the issue was resolved after implementing one of the CSS solutions. The store URL (otahuhushoes.co.nz) was shared for reference.

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

how do i get the payment icons in the same line and same spacing

Screenshot 2024-05-28 155657.png
Screenshot 2024-05-28 155657.png1651×960 87.8 KB

2

Hello @Jigz
Can you share store URL?

3

Hi @Jigz ,

Log in to your Shopify Admin:

  1. Navigate to Online Store:

  2. In the left-hand sidebar, click on Online Store.

  3. Access the Theme Editor:

  4. Under the Themes section, locate your active theme.

  5. Click on Actions and then select Edit code from the dropdown menu.

  6. Locate the section-footer.css File:

  7. In the Assets folder, find and click on section-footer.css. The file might also have a similar name depending on your theme (e.g., footer.css, theme-footer.css).
    Edit the section-footer.css File:

Scroll to the bottom of the section-footer.css file.

Add the following CSS code at the very end of the file:

media screen and (min-width: 750px) {
    .footer__column--info {
        display: flex;
        padding-left: 0;
        padding-right: 0;
        align-items: baseline;
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
}

Save Your changes

If it was helpful, Do give a like and mark it as a Solutions

BR

Dawood Mirza

4

yes i think it was added to the coding.

5

www.otahuhushoes.co.nz

6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

.ps-payment-icon { top: 10px; left: 10px; } .footer__column--info { display: flex; flex-direction: row !important; justify-content: center; }

techlyser_web_0-1716874570121.png
techlyser_web_0-1716874570121.png1300×286 15.3 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.