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