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.
To change the background color of the quantity box on your Shopify store, you can follow these steps:
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.
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.
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.