Footer - Payment Icons (Dawn Theme)

Solved

Footer - Payment Icons (Dawn Theme)

HangoverHelper
Excursionist
42 0 5

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
485 165 168

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 3 (3)

BSSCommerce-HDL
Shopify Partner
2305 834 907

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 😍😍

 

Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges:
Get more sales with striking labels, badges, and banners from our 10,000+ available templates.

BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now

Anshul_arora
Navigator
453 129 104

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
485 165 168

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.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support