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 th…

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; }

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 !imp…

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!

Hi @bellevo Check this one. From you Admin page, go to Online Store > Themes Select the theme you want to edit Under the Asset folder, open the main.css(base.css, style.css or theme.css) Then place the code below at the very bottom of the file. .product__info-wrapper .list-payment__item { pa…

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!

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: [Made4uoRibe_0-1721406018992.png] You can adjust the padding whatever size you want. Please don’t forge…

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

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! […

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: 1…

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

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

Store Design

BSS-TekLabs July 19, 2024, 4:26pm 9

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

1 Like

Topic		Replies	Views
Payment icons slightly higher- Dawn Theme Store Design design , customizations , css , shopify-themes , html , product-page	3	27	August 15, 2023
How to remove padding under payment methods? Store Design design , product-page	6	96	August 21, 2024
How to create a gap between payment icons on mobile view? Store Design	7	24	February 24, 2022
Removing white space from payment icon top and bottom Technical Q&A optimization , liquid , css , third-party-theme , html , shopify-theme	2	29	March 25, 2025
Payment Icons Slightly Higher- Shopify Impulse 7.4.0 Theme Store Design design , customizations , css , shopify-themes , html , product-page	10	57	September 2, 2023

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

Related topics