How to change variant pill colour

Solved

How to change variant pill colour

LokNdra
Excursionist
26 0 8

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

1000040941.jpg

 

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

Accepted Solutions (2)
ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

ZestardTech
Shopify Partner
5636 1031 1359

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;
}

 

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
LokNdra
Excursionist
26 0 8

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

ZestardTech
Shopify Partner
5636 1031 1359

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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
LokNdra
Excursionist
26 0 8

Hey Colour is not changing 

ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
LokNdra
Excursionist
26 0 8

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

ZestardTech
Shopify Partner
5636 1031 1359

This is an 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;
}
Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing

techlyser_web
Shopify Partner
1834 341 368

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.

Techlyser || Shopify Partner || Helping eCommerce Stores
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
- For further discussion contact: Email ID- info@techlyser.com