How to change variant pill colour

[LokNdra]

How can i change variant pill colour from this black colour to some other hex code i put. And Remove the word Size

 

Store link: https://www.theavalonz.in/

[ZestardTech · Accepted solution]

Hi @LokNdra 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

variant-selects legend.form__label {
display: none;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: #FF0000 !important;
border: none!important;
}

[ZestardTech]

Hi @LokNdra 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

variant-selects legend.form__label {
visibility: hidden;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: red;
}

[LokNdra]

I want to put hex code can you pls give a code in which i can write hex code instead of colour name 

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

variant-selects legend.form__label {
visibility: hidden;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: #FF0000;
}

[LokNdra]

Hey Colour is not changing 

[ZestardTech · Accepted solution]

Hi @LokNdra 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

variant-selects legend.form__label {
display: none;
}
.product-form__input--pill input[type=radio]:checked+label {
background-color: #FF0000 !important;
border: none!important;
}

[LokNdra]

Thanks it changed but for border should i remove none and enter hex code like above?

[ZestardTech · Accepted solution]

Hi @LokNdra 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

Also add this css.

.product-form__input--pill input[type=radio]+label {
    border: solid 1px #FF0000!important;
}
.product-form__input--pill input[type=radio]+label:hover {
    border-color: #ff0000a3!important;
}

[niraj_patel]

Hello @LokNdra 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
 .product-form__input--pill input[type=radio]:checked+label {
     background-color: #d39c20 !important;
     border: transparent !important;
  }

   variant-selects legend.form__label {
      visibility: hidden;
  }
</style>
Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.