Hello! I know this is many months late but I just ran into your posts and found a fix:
Inside of the base.css file add these lines of code. I think you can just add them at the end of the file, but I put them where the other “.js” styling was (if you want to do the same, you can CNTRL + F and type in “.js” or “js” which will take you to a part of the code that has that match). If you don’t know much about code, you change the properties of different elements on your page like the color and font size. On your page editor the three dots at the top you can click “Edit Code” and find the base.css file. I am going to provide you insight on how this works. For the variant pills, they are part of the “js.product-form__input” class, which is why there is a dot behind them. Classes are ways to categorize elements in coding and in the CSS language the base.css uses. I use hex codes to clarify that color in the first example, but CSS allows you to use “green”, “pink” etc. after the “background-color:” property which I use in the examples after. You can find hex codes online easily with a color wheel if you want a specific color value. The first segment of code I provide right below this is how to change all of the variant pills to a specific color when selected.
.js.product-form__input input[type=radio]:checked+label {
background-color: #FA98D4;
}
This second segment of code which you can place directly below the first, or choose to only use, is how to change a specific variant pill to a specific color you choose:
.js.product-form__input input[type=radio]:checked+label[for=template–12345678__main-1-0] {
background-color: blue;
}
Notice how in the second segment of code how there is a “[for= ]” after the word label. In coding, every element on your page like a button, image, textbox, etc. can be given a special ID. Behind the scenes, your variant pills are just input buttons each linked to a label element. We want to change the styling/colors of variant pills that each have their own specific ID specified after the equals sign in the “[for = ]”. For example, “template–123456789__main-1-1” could be the ID name of one of the pills. You can find these out by going to your actual store’s product page as if you were a visitor, NOT ON THE PAGE YOU EDIT THE STORE ON. Right click anywhere on the page, and select “Inspect”. A window will pop up of the finalized HTML code of your store’s product page. Now, click the top left of the window that has a little box and an arrow. This will allow you to move your mouse around and hover over/select different elements on your product page which will then show you that code in the Inspect window. Hover over and click on the variant pill you want to get the ID of. Repeat this process to find the ID of every different variant pill you want to change the color of. It should highlight in the Inspect window a piece of code that looks something like the following:
Your IDs will obviously be different, I used placeholders, but the important part is they will be unique for each variant pill.
Refer back to your base.css file you can access by going to your page editor on Shopify and selecting “Edit Code”.
Now, after where I had you paste the other ones add more of these exact same code segments each to style the individual variant pills to their own respective colors based on their own individual IDs I had you find with the inspect element tool on your websites webpage.
.js.product-form__input input[type=radio]:checked+label[for=template–12345678__main-1-1] {
background-color: orange;
}
.js.product-form__input input[type=radio]:checked+label[for=template–12345678__main-1-2] {
background-color: purple;
}
Hope you get the point, and that this can reach anyone else trying to figure this out. Best wishes
