Add space payment icons footer

Solved

Add space payment icons footer

Astrid_brae
Shopify Partner
17 0 4

In the footer, my payment icons are stuck together. I'd like to add a space.

I have already tested this code :  "ul.list.list-payment svg { margin: 0 5px; }"  in theme.liquid but it's not working

 

Thanks a lot 

Accepted Solution (1)
nvchien
Shopify Partner
55 23 13

This is an accepted solution.

Thank @Astrid_brae,

 

You can try to add this CSS code to bottom of 'base.bundle.css' file

 

.shopify-section-group-footer-group .-mx-1 li {
   min-width:38px
}

 

Hope this helps.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.

View solution in original post

Replies 10 (10)

nvchien
Shopify Partner
55 23 13

Hi @Astrid_brae,

 

Please share your store URL with storefront password. So I and other partners can check & help you.

Thanks.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
Astrid_brae
Shopify Partner
17 0 4

www.daure.com

and password : julix

 

Thanks 🙂 

nvchien
Shopify Partner
55 23 13

This is an accepted solution.

Thank @Astrid_brae,

 

You can try to add this CSS code to bottom of 'base.bundle.css' file

 

.shopify-section-group-footer-group .-mx-1 li {
   min-width:38px
}

 

Hope this helps.

- If this solution helped you out, please consider accepting it as a solution and giving it a thumbs-up. Your feedback is valuable to me and the community!
- If you're feeling extra generous, you can always buy me a coffee . Your support helps fuel my Shopify knowledge and keeps the solutions flowing!
- You can also follow more tips and tricks from my blog.
Astrid_brae
Shopify Partner
17 0 4

It's working 🙂 Thank you very much ! 

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

Hi @Astrid_brae 

You could try to add this code to theme.liquid file

<style>
.footer__payment .list-payment__item {
margin: 0 4px;
}
</style>

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Astrid_brae
Shopify Partner
17 0 4

Hi,

 

Thank you for you rreply. 

I just tested, but it's not working 

 

code1.JPG

Dan-From-Ryviu
Shopify Partner
8579 1692 1703

I added the code for the Dawn theme, but I see you posted your store URL and it is not the Dawn theme. Also, you got the solution from @nvchien. Please feel free to let us know if you need more question. 

- Helpful? Like and Accept solution!
- Ryviu - Reviews & QA app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

BSSCommerce-HDL
Shopify Partner
1141 394 460

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

BSSCommerceHDL_0-1718703138478.png

 

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

BSSCommerceHDL_1-1718703143505.png

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

 

.shopify-section.shopify-section-group-footer-group ul:has(.icon) {
    display: flex !important;
    justify-content: center;
    margin-left: -15px !important;
}

.shopify-section.shopify-section-group-footer-group ul:has(.icon) li {
    margin-left: 15px !important;
}

 

Here is result: 

BSSCommerceHDL_2-1718703191424.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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Astrid_brae
Shopify Partner
17 0 4

Thanks.

I don't have : base.css, theme.css, styles.css or theme.scss.liquid... 

I have theme.liquid or base.bundle.css 

Astrid_brae_0-1718712625946.png

 

BSSCommerce-HDL
Shopify Partner
1141 394 460

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

BSSCommerceHDL_0-1718720021789.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tag

BSSCommerceHDL_1-1718720050661.png

 

.shopify-section.shopify-section-group-footer-group ul:has(.icon) {
    display: flex !important;
    justify-content: center;
    margin-left: -15px !important;
}

.shopify-section.shopify-section-group-footer-group ul:has(.icon) li {
    margin-left: 15px !important;
}

 

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, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency