How to change the colour of the quantity button on pursuit theme

Topic summary

A user seeks to change the quantity button’s background and text colors to match their “Add to Cart” button on a Shopify product page using the Pursuit theme.

Solutions Provided:

Multiple support teams (SocialAutoPost, GemPages, PageFly) offered CSS-based solutions:

  • Access theme code via Online Store > Themes > Edit code
  • Locate CSS files (theme.scss.liquid, style.scss.liquid, or theme.css)
  • Add custom CSS targeting .qty_container and .qty.product-page classes
  • Modify background and color properties to desired values (e.g., #DF5B2A for orange background, white for text)

Outcome:

The original poster tested suggestions and confirmed satisfaction with the appearance, thanking contributors for their help. A follow-up question from another user (@dilsymart) asks how to change the quantity button’s black color, indicating ongoing interest in similar customizations.

Note: Solutions require basic CSS knowledge and theme code editing access.

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

Hi, I have been searching everywhere for a solution and I can’t find one.

I would like to change my quantity button to the same background and text colours as the add to cart button on the view product page.

Your help would be greatly appreciated.

thanks.

see the pic below. Also ignore the top buttons circled I got them to work.

Web page is www.jjzdesignz.com.au

To change the background color of the quantity box on your Shopify store, you can follow these steps:

  1. Access the theme editor: In your Shopify admin, go to Online Store > Themes. Click the Actions button for your current theme and select Edit code.

  2. Locate the CSS file: In the theme editor, look for a file called “theme.scss.liquid” or “style.scss.liquid”. This is the file that controls the styling for your store.

  3. Add the CSS code: Scroll down to the bottom of the file and add the following CSS code:

.qty { background: #fff; }
  • Save the changes: Click the Save button to apply the changes.

Please note that the exact steps and the name of the CSS file may vary depending on the theme you are using. If you are unable to locate the file or are having difficulty making the changes, you may want to reach out to the theme developer or a Shopify expert for assistance.

Output :

I hope this helps! If you have any further questions, please don’t hesitate to ask.

Hello @JonJulz

It’s GemPages support team and glad to support you today.

I would like to give you a solution to support you:

  1. Go to Online Store → Theme → Edit code:

  1. Open your theme.liquid theme file

  2. Paste the below code before :


Hope my solution can work and support you!

Kind & Best regards!

GemPages Support Team.

Hi @JonJulz

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css.

Step 3: Paste the below code at bottom of the file → Save

.qty_container .qty.product-page-qty {

background: white !important;

}

PageFlyVictor_0-1671372807784.png

Hope that my solution works for you.

Best regards,

Victor | PageFly

thanks but, I am after an orange button with white text :+1:

I might see what it looks like though.

Iove that look so I will leave it.

thanks for your help.

Hi @JonJulz

You want the button to look like this:

PageFlyVictor_1-1671459869292.png

Please replace the code I sent you earlier with this new code.
.qty_container .qty.product-page-qty {
background: #FD5B2A !important;
}

And add this new code below the code you changed above.
.qty .product-form__input–quantity {
color: white !important;
}

Hope that my solution works for you.

Best regards,

Victor | PageFly

quantity.PNG

How to change this black color?
please help