Solved

Code Assistance for Shopify Variant Swatch Colors

Grrambo
Visitor
3 0 3

Hello! I am needing someone that can code a bit to help me out.

 

I asked Shopify Service to help and they said it should be quick and to ask here for some help so here I am. I'm not able to figure it out, I can't code and tried a tutorial but had a very difficult time and felt I would be risking making mistakes. I downloaded 4 different variant apps and they either didn't work or were quite complicated as well. I tried. If anyone is able to help me out that would be greatly appreciated. I can hire you for your time or give you a free cat brush if you like for this assistance.

 

Here's what I'm looking to do:

The product page is here: https://baileybrush.com/products/the-bailey-brush-cat-brush?variant=40702537957442

 

There are three variants in colour.

 

Currently whenever someone selects a variant it only shows the variant pill as the blue "meowy blue mist".

 

I would like the colours to change when people select colours. Pink for Pink, Blue for Blue, Orange for Orange. Eventually there will be another colour in a separate product down the road, the Bailey Brush for dogs, which will be Pawmelo Yellow.

 

With some CSS code I found online I'm able to change all of them to a different colour if I wanted, but I felt it would be more customer friendly for customers to see the colour they are choosing there, rather than it being in blue or a neutral color when selected.

 

The Blue I would like for Meowy Blue Mist is: #6FB1CB
The Orange for Pawpaya Orange is: #FFA168
The Pink for Tickled-Ear Pink is: #FF8189

Screenshot 2024-04-13 at 11.47.07 AM.png

Thank you for your help.

Accepted Solution (1)

Guleria
Shopify Partner
3084 604 861

This is an accepted solution.

Hello @Grrambo ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-0"] {
  background-color: #6FB1CB !important;
}
.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-1"] {
  background-color: #FF8189  !important;;
}
.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-2"] {
  background-color: #FFA168 !important;;
}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter

View solution in original post

Replies 3 (3)

Guleria
Shopify Partner
3084 604 861

This is an accepted solution.

Hello @Grrambo ,

Follow these steps:

1. Go to Online Store -> Theme -> Edit code

2. Open your base.css file and paste the following code at the bottom:

.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-0"] {
  background-color: #6FB1CB !important;
}
.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-1"] {
  background-color: #FF8189  !important;;
}
.product-form__input--pill input[type=radio]:checked+label[for="template--15099538964546__main-1-2"] {
  background-color: #FFA168 !important;;
}

 

Thanks

 

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
Grrambo
Visitor
3 0 3

THANK YOU!

 

That solution worked perfectly. I truly appreciate your time and your help with this. Please reach out if I can repay you, or if you have a cat. 🙂

Guleria
Shopify Partner
3084 604 861

Sounds good 🙂
No I don't have a cat btw you can pay here

 

Thank-you 🙂

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter