Solved

Footer - Payment Icons (Dawn Theme)

HangoverHelper
Excursionist
38 0 3

Hi! I'm using Dawn theme. On the Footer section, is it possible to move this payment icons on the right instead and aligned with the Lower left text (the one with powered by shopify)? For desktop/laptop view only.

 

Or if not, can I just align them to the left instead so it would look more balanced

 

Thank you!

 

HangoverHelper_0-1715757513342.png

 

tryhangoverhelper.com

https://51d86a-2.myshopify.com/

Password: steiyi

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
249 90 82

This is an accepted solution.

@HangoverHelper Please follow the below steps to move the payment icons to the right instead and align them with the lower left text (the one powered by Shopify) for desktop/laptop alone. Let me know whether it is helpful for you.

 
1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "base.css" file and paste the below code at the bottom of the file and save changes.

 

@media screen and (min-width: 750px) {
    .footer__content-bottom {
        display: flex;
        flex-direction: row-reverse;
        max-width: var(--page-width);
        margin: 0 auto;
        padding: 3rem 5rem 0 5rem;
        align-items: center;
    }
    .footer__content-bottom-wrapper {
        padding: 0 !important;
    }
    .footer__localization:empty+.footer__column--info {
        align-items: flex-end;
    }
}

 

 
Result will be like,
Vinsinfo_0-1715769631001.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.

View solution in original post

Replies 3 (3)

BSSTech-Venture
Shopify Expert
281 62 67

Hi @HangoverHelper

You can try this code by following these steps:

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BssTechVenture_1-1715759194811.png

 

Step 2: Search file base.css , theme.css  or styles.css

BssTechVenture_2-1715759203725.png

 

Step 3: Insert the below code at the bottom of the file -> Save

 

.footer__content-bottom.scroll-trigger.animate--slide-in {
    display: flex !important;
    flex-direction: row-reverse !important;
}

 

 

Here is result: 

BssTechVenture_0-1715759101861.png

 

Hope this can help you

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍😍

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Anshul_arora
Navigator
366 103 71

Hello @HangoverHelper ,

I understand you are looking to change the positioning of Payment Icons in the Footer.

If you are looking to align the payment icon above the left text (powered by Shopify), then you can implement the below code.

Copy and add the code at the bottom of the theme.liquid file before </body> tag and save

<style>

.footer__localization:empty+.footer__column--info {
align-items: baseline !important;
}

</style>

 

Output -: https://prnt.sc/OB-hltuLUuXA

Anshul_arora_0-1715763912749.png

I hope the code helps you.

Please share if you have any queries.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here

Vinsinfo
Shopify Partner
249 90 82

This is an accepted solution.

@HangoverHelper Please follow the below steps to move the payment icons to the right instead and align them with the lower left text (the one powered by Shopify) for desktop/laptop alone. Let me know whether it is helpful for you.

 
1. From admin, go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Go to "base.css" file and paste the below code at the bottom of the file and save changes.

 

@media screen and (min-width: 750px) {
    .footer__content-bottom {
        display: flex;
        flex-direction: row-reverse;
        max-width: var(--page-width);
        margin: 0 auto;
        padding: 3rem 5rem 0 5rem;
        align-items: center;
    }
    .footer__content-bottom-wrapper {
        padding: 0 !important;
    }
    .footer__localization:empty+.footer__column--info {
        align-items: flex-end;
    }
}

 

 
Result will be like,
Vinsinfo_0-1715769631001.png

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.