Re: How to Change quantity selector and variant selector Color?

Solved

How to Change quantity selector and variant selector Color?

WolTeek
Tourist
9 1 0

I cannot change it in theme settings and that's how it looks now.
Link to the website: https://jinglebellsboutique.com/

WolTeek_0-1699907928950.png

 

Accepted Solution (1)
StephensWorld
Shopify Partner
1398 174 365

This is an accepted solution.

Try using this coding instead then:

 

.block-swatch {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

.quantity-selector__button {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}
.quantity-selector__input {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

.quantity-selector {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
[email protected]

View solution in original post

Replies 5 (5)

StephensWorld
Shopify Partner
1398 174 365

Your theme is probably using the same colour for "links" as it does the variant options. 

 

Go into your theme colours, and look at what you have set to 'black' (#000000) ... and then edit the options until you figure out which one is controlling the color for the variant options. 

 

Otherwise you can try adding the following coding to your theme's CSS file, or to the specific block/section's "custom CSS" section (within the theme editor) to make the text for those white:

 

.block-swatch {
    color: #ffffff;
}
.quantity-selector__button {
    color: #ffffff;
}
.quantity-selector__input {
    color: #ffffff;
}

 

Hope the above helps! 🙂

 

Cheers,

Stephen

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
[email protected]

WolTeek
Tourist
9 1 0

Hi,
Thanks for response. I tried it but It changes colors only for a text. You probably have visited my website. I want it to look this way. (like the ghost in the bottom of the home page)

WolTeek_0-1699981048355.png

 

StephensWorld
Shopify Partner
1398 174 365

This is an accepted solution.

Try using this coding instead then:

 

.block-swatch {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

.quantity-selector__button {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}
.quantity-selector__input {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

.quantity-selector {
    background-color: transparent;
    color: #800000;
    border-color: #800000;
}

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
[email protected]

WolTeek
Tourist
9 1 0

Thanks for help!
It worked but the only thing is the frame color is different (when option selected)

WolTeek_0-1699986714369.pngWolTeek_1-1699986728362.png

 

StephensWorld
Shopify Partner
1398 174 365

This one has me stumped. I'm not sure how the theme is dictating which colour is being used for the selected variant. 

 

Sorry I couldn't solve that one for you. Hopefully, I've gotten you close enough that it's okay. Otherwise, maybe someone else can chime in with the final 'piece of the puzzle' here! 🙂

★ Did my post help? If yes, then please like and accept solution. ★

https://stephens.world
[email protected]