New Shopify Certification now available: Liquid Storefronts for Theme Developers

How to change background color of quantity selector IN CART

Solved
Snowbound4
Excursionist
14 2 0

I'm trying to change the background and text color of my quantity selectors in my cart (i've already removed them from the product pages).

 

Below they are black background, white text but I'd like them to be white blackground, blue text, with blue border.

Screen Shot 2023-10-16 at 9.33.48 PM.png

snowboundusa.com 

PW: tubesteaks

 

Accepted Solution (1)
Snowbound4
Excursionist
14 2 0

This is an accepted solution.

I combined both of your codes, and it worked lol:

 

}
.quantity__button {background-color: #fff; opacity: 1; color: #0072ce;}
quantity-input.quantity *{color: #0072ce;}
.quantity__input:focus-visible {background-color: #fff; opacity: 1;
border-top: 1px solid #73b2e4; border-bottom: 1px solid #73b2e4; outline: none;
box-shadow: none;
}
quantity-input.quantity { background: #fff !important; }

 

Screen Shot 2023-10-16 at 10.16.05 PM.png

View solution in original post

Replies 12 (12)
Dan-From-Ryviu
Shopify Partner
5679 1047 1073

Hi @Snowbound4 

Please go to Online store > Themes > Edit code > Assets > open base.css and add this code at the bottom 

 

quantity-input.quantity * { color: inherit !important; }
quantity-input.quantity { background: #fff !important; }

 

Screenshot 2023-10-17 at 08.52.40.png

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Snowbound4
Excursionist
14 2 0

Screen Shot 2023-10-16 at 10.06.18 PM.png

suyash1
Shopify Partner
8695 1068 1411

@Snowbound4 - add this css to the very end of your base.css file and check

 

.quantity__button{background-color: #fff; opacity: 1; color: #0072ce;}
quantity-input.quantity *{color: #0072ce;}
.quantity__input:focus-visible{background-color: #fff; opacity: 1; 
border-top: 1px solid #73b2e4; border-bottom: 1px solid #73b2e4; outline: none; 
box-shadow: none;}

 

suyash1_0-1697508068926.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
Snowbound4
Excursionist
14 2 0

Screen Shot 2023-10-16 at 10.08.21 PM.png

no luck 

suyash1
Shopify Partner
8695 1068 1411

@Snowbound4 - I am seeing it like this

 

suyash1_0-1697508692156.png

 

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
Snowbound4
Excursionist
14 2 0

Your code gave me the black/blue boxes and @Dan-From-Ryviu 's code gave me all white. I took the second line of @Dan-From-Ryviu 's code and added it after yours, and it seemed to work!

Snowbound4
Excursionist
14 2 0

This is an accepted solution.

I combined both of your codes, and it worked lol:

 

}
.quantity__button {background-color: #fff; opacity: 1; color: #0072ce;}
quantity-input.quantity *{color: #0072ce;}
.quantity__input:focus-visible {background-color: #fff; opacity: 1;
border-top: 1px solid #73b2e4; border-bottom: 1px solid #73b2e4; outline: none;
box-shadow: none;
}
quantity-input.quantity { background: #fff !important; }

 

Screen Shot 2023-10-16 at 10.16.05 PM.png

suyash1
Shopify Partner
8695 1068 1411

@Snowbound4 - congratulations

You are welcome to contact me - suyash.patankar@gmail.com, My timezone is GMT+5:30,to build shopify pages use pagefly

Support me 🙂
Snowbound4
Excursionist
14 2 0

Any idea on how to do the same with my mobile menu?

It's currently black background, blue text. I'd like it white background, blue text.

 

Your help is greatly appreciated.

 

Screen Shot 2023-10-16 at 10.19.05 PM.png




Dan-From-Ryviu
Shopify Partner
5679 1047 1073

Hi @Snowbound4 

You can use this code 

#menu-drawer { background: #fff !important; }

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now

Snowbound4
Excursionist
14 2 0

Amazing - thank you!

Dan-From-Ryviu
Shopify Partner
5679 1047 1073

You are very welcome, @Snowbound4 

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now