Solved

Color background on quantity selector (Dawn)

ManuBC
Excursionist
28 1 6

Hi everyone, 

 

I just wish to change the color of the background of the quantity selector on Dawn theme, and remove the border.

Could you help me on that ? (here picture of what I'm aiming)

Many thanks !

 

from that : 

Capture d’écran 2023-08-07 à 22.06.30.png

 

To this button : 

Capture d’écran 2023-08-07 à 22.07.13.png

Accepted Solution (1)
Made4uo-Ribe
Shopify Partner
6103 1467 1808

This is an accepted solution.

Thank you for the information. Try this. Im not sure which color youll like to use. But I just copy the color in your add to cart. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

 

quantity-input.quantity {
    background: #041E42;
}
quantity-input.quantity * {
    color: white;
}

 

 

Result:

Ribe_Dagandara_0-1691441966140.png

I hope it help. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
6103 1467 1808

Hi @ManuBC 

Would you mind to share your Store URL website? with password if its protected. Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


ManuBC
Excursionist
28 1 6

sure, here is a page exemple of a product : 

https://www.barreclandestine.com/products/morropon-lait-caramelise

Made4uo-Ribe
Shopify Partner
6103 1467 1808

This is an accepted solution.

Thank you for the information. Try this. Im not sure which color youll like to use. But I just copy the color in your add to cart. 

  1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
  3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.

 

 

quantity-input.quantity {
    background: #041E42;
}
quantity-input.quantity * {
    color: white;
}

 

 

Result:

Ribe_Dagandara_0-1691441966140.png

I hope it help. 

 

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


ManuBC
Excursionist
28 1 6

Many thanks for your help ! It's almost perfect, but if we have a look, there is still the black border and the color is filling in a squared shape whereas my button is rounded (I change the color in red, to see the difference). Do you see how to fix it ?

 

Capture d’écran 2023-08-07 à 23.14.48.png

Made4uo-Ribe
Shopify Partner
6103 1467 1808

Oh sorry, i forgot. Can you add this one. 

.quantity {
    --inputs-border-width: 0px;
}

Thanks!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


Jan14kl
Visitor
2 0 0

Thanks for the great support here!

 

Adding as you mentioned  the following code:

quantity-input.quantity {
    background: #1FD2FF;
}
quantity-input.quantity * {
    color: black;
}
.quantity {
    --inputs-border-width: 2px;
}

the add to cart icon looks like that in my shop:

https://plackbird.com/products/glitzertasse-gluck-ist-so-eine-mama-zu-haben

 

What I want to have is these Icon without the border lines and round edges. 
Like shown here:

Jan14kl_0-1703097966969.png

Any idea on that one? Would be appriciated.
Thanks

 

ManuBC
Excursionist
28 1 6

Great, many thanks !

MTAUSTRALIA
Shopify Partner
3 0 3

Just to let you guys know. Anyone implementing this code should also check how it affects the Quantity selector in the Add to Cart Page. For me the quantity selector was in all to cart page went completely white but no visible selectors. 

Made4uo-Ribe
Shopify Partner
6103 1467 1808

Thank you for bringing this to my attention. It's important to note that different stores may encounter different issues. The solution provided is tailored to the specific problem described by the store owner who sought assistance. Therefore, it may be effective for their store setup.

 

While the solution may work well for the store owner who requested it, I understand that it may not be universally applicable. Each store has its unique configurations and challenges.

 

If you encounter issues or need assistance with your store, please feel free to post a new topic detailing your specific problem. This will enable the community to better understand your situation and provide targeted solutions.

We are here to help and offer solutions based on individual store needs. Thank you for your understanding!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com


brettH
Visitor
1 0 0

Is there a reason this wouldn't work on mobile? Works fine on my desktop but not mobile for me.