Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
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
Solved! Go to the solution
This is an accepted solution.
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;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
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; }
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:
2. Open your theme.liquid theme file
3. Paste the below code before </body>:
<style>
.qty.product-page-qty{
background: #fff;
}
</style>
Hope my solution can work and support you!
Kind & Best regards!
GemPages Support Team.
This is an accepted solution.
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;
}
Hope that my solution works for you.
Best regards,
Victor | PageFly
thanks but, I am after an orange button with white text 👍
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:
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
How to change this black color?
please help