Change Color of Variant in a Separate Section without effecting the whole page ?

Solved
rendera
Tourist
6 1 0

Hey,

We were unsure how to ask this question or if it is even possible. Were currently editing our website and have run into some minor errors that may be simple but are proving very troublesome..

We are simply trying to change the color of the variant text underneath our "Feature Products" section to black

 help.png

However, we are unable to change the color of this section without affecting the color of the variant options at the top of the page on the header section.

help2.png

Every time we edited the hex code it just changes both variant options in both sections when we only want it to affect the invisible white ones in the first picture.

We feel like there is a simply solution but were stumped on this one at the moment.

We appreciate any help with the matter. Were are currently using the Molla Theme from the4Studios.

Thanks in advance !

0 Likes
MarcoReleasit
Shopify Partner
52 6 9

Hi rendera

Can you give us the link of one of the pages affected by this issue?

This should be easily solved by adding some custom CSS to the template code

0 Likes
rendera
Tourist
6 1 0

Of course !!

Here's a hidden shared link to our website : https://s1njdugf7bjmq4cz-42946166940.shopifypreview.com

We figured there was a way using CSS ! But we tried adding a few CSS codes on the top section but had the same results. One code we did worked kind of but it ended turning everything in the header including the navigation buttons white which is not what we wanted. 

Thanks so much for your help and quick response.

 

0 Likes
MarcoReleasit
Shopify Partner
52 6 9

This is an accepted solution.

Hi rendera

I had a look at your store. The simplest solution should be to add this CSS rule to your theme:

[data-section-type="banner-section"] .product-loop-variants.list_2 span.swatch-title {
  color: #fff !important;
}

I'm not familiar with the theme you are currently using. If the theme gives you the possibility to add custom CSS rules directly from the theme editor then add that rule there.

If your theme does not give you that possibility than you can add this piece of code at the very top of your product.liquid template  

<style>
[data-section-type="banner-section"] .product-loop-variants.list_2 span.swatch-title {
  color: #fff !important;
}
</style>

The other thing you have to do here is to set back the global color of that label to black "#000" because, as you might have noticed, the code above sets the color of the labels in the big banner at the top in white.

 

Let me know if this works for you!

rendera
Tourist
6 1 0

WOW !!!!!! THANKS SO MUCH MARCO !!!! IT WORKED !!!!

 

YOU ARE A LIFE SAVIOR !!!! THANK YOU THANK YOU THANK YOU !!!

 

0 Likes