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

Store Design
, , ,

Topic summary

Goal: adjust spacing for payment icons on product pages in Dawn—bring icons closer to the “Add to cart” button and add space above the “What/Why We Love” section, matching mobile and desktop layouts. Images were used to show the desired spacing.

Initial fix used CSS (.product-form and .list.list-payment) added in base.css, which worked but also moved footer payment icons. The solution was to scope styles to product-page elements only, e.g., .product__info-wrapper .list-payment__item (padding-bottom) and keep product-form margin-bottom at 0.

To control only the icon row below the button, .product__info-container .list.list-payment received a margin-bottom value. These changes targeted the product page without affecting the footer.

Mobile issue persisted until a missing closing curly brace in the CSS was identified. Adding the brace (and optionally placing the snippet before in theme.liquid) made the mobile spacing apply.

Outcome: spacing is correctly adjusted on product pages for both desktop and mobile, with no impact on footer icons. The thread concluded with the issue resolved.

Summarized with AI on December 24. AI used: gpt-5.
2

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

BSSTekLabs_0-1721403689492.png
BSSTekLabs_0-1721403689492.png1622×632 60.3 KB

We hope this assists in resolving the issue.

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

1 Like