Changing the color of add to cart button (in product card in featured collection NOT product page)

Store Design
, , , , , ,

Topic summary

Goal: Make the Featured Collection product-card “Add to cart” (quick add) buttons solid-filled instead of outlined, without changing the product page button.

What changed: Multiple CSS-based approaches were suggested. The working approach was to add custom CSS targeting the quick-add button class in the theme’s stylesheet.

How to apply:

  • Admin > Online Store > Themes > Edit code.
  • Open Assets > base.css (or main.css/style.css/theme.css).
  • Append, for example:
    .quick-add__submit { background: #016172; color: #fff; font-weight: 700; }
    (Alternative selector used: .quick-add button with similar rules.)
  • Save to see solid buttons on product cards.

Notes:

  • One suggestion mentioned inserting code in theme.liquid before , but the concrete CSS solution in base.css is what delivered the result.
  • Screenshots (before/after) were shared and are central to understanding the visual change.

Outcome: The solid button style was achieved and confirmed by the original poster. Status: Resolved.

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

Hi @RaghavGoel1 ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

BSSCommerceHDL_0-1721297779609.png
BSSCommerceHDL_0-1721297779609.png1908×833 176 KB

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you :heart_eyes:

1 Like