Cahnging colour of variant pills, quantity checkout and remove colour from image

Store Design

Topic summary

A user seeks help customizing their Shopify store (kingsstreetwear.nl) with three main issues:

Primary Issue - Variant Pill Colors:

  • Wants to change brownish-colored variant pills to black background with white text
  • Initially provided CSS code didn’t work for inactive pills
  • Solution provided: Add CSS targeting .product-form__input input[type=radio]+label with black background and white color
  • After refinement with fieldset.js.product-form__input label, the code successfully resolved the issue

Secondary Issue - Background Color Change:

  • Main product images are displaying with an altered background color matching the theme color
  • User notes the images are PNG format and wants to disable this color overlay
  • The cause remains unclear, possibly due to theme conflicts
  • No resolution provided yet for this issue

Status: First customization resolved; second issue (image background color) remains open and unresolved.

Summarized with AI on November 17. AI used: claude-sonnet-4-5-20250929.
1

can anybody please help me out i wanna make the brownish colours black with white text but i cannot seem to figure it out i have already searched a lot on internet

Senna1_0-1692712505266.png
Senna1_0-1692712505266.png967Ă—624 107 KB

Senna1_1-1692712513166.png
Senna1_1-1692712513166.png1045Ă—309 12.7 KB

1 Like
2

Hi @Senna1

Would you mind to share your Store URL website? with password if its protected. Thanks!

1 Like
3

yes my wbsite is www.kingsstreetwear.nl the password is wolves

4

Thank you for the information. Do you mean change the color of the non active pill?

Just a clarification. If it is try this.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product-form__input input[type=radio]+label {
    background: brown;
    color: white
}
  • And Save.

i hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
5

Senna1_0-1692715654084.png
Senna1_0-1692715654084.png480Ă—117 3.8 KB

i added the code but it does not work i want to change the pill that isnt active

1 Like
6

Im a bit confuse you like to change the color which is white background and black on text? But this is my SS without edit.

Ribe_Dagandara_0-1692716710853.png
Ribe_Dagandara_0-1692716710853.png692Ă—436 20.3 KB

1 Like
7

yeah i know that is on the homepage when you go to the product page it is a bit weird, than it is the theme colour

1 Like
8

Oh, Okay I notice it. Can you replace for this one? Thanks!

fieldset.js.product-form__input label {
    background: white;
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
9

Senna1_0-1692717803035.png
Senna1_0-1692717803035.png1325Ă—687 73.8 KB

it is still the same colour unfortunately

10

nevermind it worked now for my second question do you know why it changes the colour of the main image the background to that colour And if i can dissable it?

1 Like
11

Im not sure what the reason behind it. It maybe conflicts to something.

1 Like
12

that is the colour of the standard theme but i dont know if it is possible to turn it off because the image is a png