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

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

Solved

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

JonJulz
Tourist
34 0 1

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 Untitled.png

Accepted Solution (1)

PageFly-Victor
Shopify Partner
7865 1786 3135

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;

}

PageFlyVictor_0-1671372807784.png

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

View solution in original post

Replies 8 (8)

SocialAutoPost
Shopify Partner
434 59 105

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 : 

SaaSEnthu_0-1671368326898.png

 

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

Was the reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution
Auto post your Shopify products to Instagram, Facebook, Pinterest, LinkedIn and Twitter.
App: Social Schedular

GemPages
Shopify Partner
5625 1262 1292

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:

 

GemPages_0-1669618959296.png

 

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.

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center

PageFly-Victor
Shopify Partner
7865 1786 3135

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;

}

PageFlyVictor_0-1671372807784.png

 

Hope that my solution works for you.

Best regards,

Victor | PageFly

JonJulz
Tourist
34 0 1

thanks but, I am after an orange button with white text 👍

JonJulz
Tourist
34 0 1

I might see what it looks like though.

JonJulz
Tourist
34 0 1

Iove that look so I will leave it.

thanks for your help.

PageFly-Victor
Shopify Partner
7865 1786 3135

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

dilsymart
Tourist
5 0 1

quantity.PNG

 

How to change this black color?
please help