What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Color background on quantity selector (Dawn)

Solved

Color background on quantity selector (Dawn)

ManuBC
Excursionist
35 1 7

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
9179 2190 2708

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. 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.

View solution in original post

Replies 10 (10)

Made4uo-Ribe
Shopify Partner
9179 2190 2708

Hi @ManuBC 

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

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
ManuBC
Excursionist
35 1 7

sure, here is a page exemple of a product : 

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

Made4uo-Ribe
Shopify Partner
9179 2190 2708

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. 

 

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
ManuBC
Excursionist
35 1 7

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
9179 2190 2708

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

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

Thanks!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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
35 1 7

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
9179 2190 2708

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!

If this fixed your issue, Likes and Accept as Solution are highly appreciated. Coffee tips fuel my dedication.
Get experienced Shopify developers at affordable rates—visit Made4Uo.com for a quick quote!
Need THEME UPDATES but have custom codes? No worries, for an affordable price.
Create custom Shopify pages effortlessly with PageFly's drag-and-drop ⚙️.
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.