How to change the background of the add to cart button in the collection page

Store Design
,

Topic summary

A user wants to customize the background color of the “Add to Cart” button specifically on collection pages.

Proposed Solution:
Another user suggests adding custom CSS code to modify the button styling:

  • Navigate to: Online Store > Themes > Edit code > Assets
  • Add CSS targeting the .quick-add__submit class with a background property
  • The code should be placed in either the theme’s CSS or custom CSS file

The solution involves direct theme code editing to apply the desired background styling to the add-to-cart button element.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

Image 22-01-2024 at 18.21.jpeg
Image 22-01-2024 at 18.21.jpeg2724Ă—334 65.4 KB

2

Hi

Add this CSS code

Online Store > Themes > Edit code > Assets > custom.css or theme.css

.quick-add__submit {     background: red; }
1 Like