Changing the padding on payment icons on product pages (Dawn Theme)

[bellevo]

Hey, I have added payment icons under my "Add To Cart" button on my product pages but I cannot seem to figure out how to change the padding / margin here. I will add a picture of the issue below.

My store url: https://bellevodesign.com/

I would like to add some margin below the payment icons so there is a bit more space between the icons and the "What We Love" section and also bring the icons a little bit more up so they are a bit closer to the "Add To Cart" button.



This is how it looks on mobile, so basically I would want the same thing here, bring the icons a little bit more upwards so they are closers to the "Add To Cart" button and there is more space between the icons and the "What We Love" section.

[BSS-TekLabs · Accepted solution]

Hi @bellevo,

You can use this code snippet to adjust the space below the payment icons (just the icons below "Add to cart")

.product__info-container .list.list-payment {
  /* You can adjust this value according to your preference */
  margin-bottom: 10px;
}

[BSS-TekLabs]

Hi @bellevo,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

.product-form {
  margin-bottom: 0 !important;
}

.list.list-payment {
  /* You can adjust this value according to your preference */
  margin-bottom: 10px;
}

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[bellevo]

Hey, it works but it also moves the payment icons in the footer menu, is it possible to do in a way that it only affects the payment icons on the product page? Thanks!

[BSS-TekLabs · Accepted solution]

Hi @bellevo,

You can use this code snippet to adjust the space below the payment icons (just the icons below "Add to cart")

.product__info-container .list.list-payment {
  /* You can adjust this value according to your preference */
  margin-bottom: 10px;
}

[bellevo]

This works perfectly, is there a way for me to change this code in a way that it works for mobile as well?

[BSS-TekLabs]

This code works on mobile as well. If you need any customization, please let us know so our team can support you.

[bellevo]

Hey, it doesn't change the margin on mobile as it still looks like this on the mobile view:

Basically all I would need is to reduce the top-padding / margin so the icons are closer to the "Add To Cart" button and there is more gap between the icons and the "Why We Love It" section. Thanks again!

[BSS-TekLabs · Accepted solution]

I think you have missed a closing bracket somewhere. Please try adding a curly brace before the code snippet like this

}

.product-form {
  margin-bottom: 0 !important;
}

.product__info-container .list.list-payment {
  /* You can adjust this value according to your preference */
  margin-bottom: 100px;
}

or pasting this code snippet into theme.liquid file, right before the closing head tag

<style>
.product-form {
  margin-bottom: 0 !important;
}

.product__info-container .list.list-payment {
  /* You can adjust this value according to your preference */
  margin-bottom: 100px;
}
</style>

Hope this will help you resolve your issue!

[bellevo]

Ah, that fixed the issue, thank you once again!

[BSS-TekLabs]

You're welcome!

And if you're looking to add custom free gift functionality to your store, you should definitely check out our app, Salepify! It's designed to enhance your sales strategy with features like tiered discounts, cart rewards, and seamless integration with Shopify! 🎁🚀

[Made4uo-Ribe]

Hi @bellevo 

Check this one. 

1. From you Admin page, go to Online Store > Themes

1. Select the theme you want to edit
2. Under the Asset folder, open the main.css(base.css, style.css or theme.css)
3. Then place the code below at the very bottom of the file.

.product__info-wrapper .list-payment__item {
    padding: 1px !important;
}

• And Save. 
• Result:
• 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[bellevo]

Hey, this makes the payment icons closer to each other, what I am going for is reducing the top padding and adding bottom padding. Thanks!

[Made4uo-Ribe]

oh, sorry. replace with this one. 

.product__info-wrapper .list-payment__item {
    padding-bottom: 20px;
}
product-form.product-form {
    margin-bottom: 0px !important;
}

And Save. 

Result:

You can adjust the padding whatever size you want. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!