Outline button change to solid button? sense theme

Store Design
, ,

Topic summary

Main issue: In the Shopify Sense theme, collection-page “Add to cart” buttons are outlined, unlike product-page buttons. Users want solid fill and control over text color.

Solution provided: Add a CSS rule in Assets > base.css (or theme.css):

  • Selector: .quick-add__submit
  • Properties: background-color: #edffa7; color: #000; (some suggest using !important, and unsetting --color-button-text)
    This targets the collection-page quick add button and renders it as a solid button with specified text color.

Outcome: The original poster confirms the fix works. Another user reports success on Collection pages.

Open question: A user asks how to apply the same styling to Product page “Add to cart” buttons globally, rather than editing each product template. No answer yet.

Notes:

  • The CSS snippet is central to the solution.
  • “base.css” is the theme stylesheet; “.quick-add__submit” is the class for the collection quick-add button.

Status: Collection-page buttons solved via CSS. Product-page styling approach remains unanswered/ongoing.

Summarized with AI on December 27. AI used: gpt-5.
1

Sense theme

The add to cart buttons on the collection pages are different than on the product pages. It’s not very smart.

Is there an easy way to make the outline add to cart buttons on the collection pages solid color? Also, being able to change text color on the button.

2 Likes
2

Hello @medusasmakeup
Please add this css Asset > base.css and paste this at the bottom of the file:-

.quick-add__submit {
background-color: #edffa7;
color: #000;
--color-button-text: unset!important;
}

developerSP_0-1687623108035.png
developerSP_0-1687623108035.png1334×564 228 KB

3

Hi @medusasmakeup ,

Would you mind to share your URL website

4

Hi @medusasmakeup

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css or theme.css

.quick-add__submit {
   background-color: #edffa7 !important;
   color: #000 !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

5

Thank you! Exactly what I needed!

6

This worked for me too on the Collection pages. If I wanted to do the same thing on the product pages for the add to cart buttons, can I use the same code on the product pages? and is there 1 spot I can edit them all, versus having to edit on each product template I have? Thanks!!