How to Change the word ( Shoe size ) color and the word ( Quantity ) color as it shows in the image

Store Design
, ,

Topic summary

A user seeks to change the text color of “Shoe size” and “Quantity” labels on their product page.

Solutions Provided:

Multiple community members offered CSS-based approaches:

  • Custom CSS via Theme Customizer: Add code targeting .product .quantity__label and .product .form__label with desired color values (e.g., #0000ff).

  • Direct CSS File Edit: Insert CSS into base.css, style.css, or theme.css targeting .product-form__quantity .form__label or more specific selectors like fieldset.js.product-form__input legend.form__label.

  • Variant Label Change: One responder noted that changing the actual text (not just color) requires editing product variants in the Shopify admin.

Outcome:

The issue was resolved. The original poster confirmed the solutions worked and thanked contributors. All approaches use !important flags to override existing styles and allow custom hex color codes.

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

image (1).png
image (1).png1366Ă—648 199 KB

1 Like
2

Hello,
Please share “Store URL”
Thanks!

3

Hi @Mohamed07

You can follow this instruction:

  1. Go to Shopify > Theme > Customize

  2. Copy and paste this code on Theme settings > Custom CSS section > then change the color code as requested.

.product .quantity__label,
.product .form__label {
    color:  #0000ff !important;
}

Liz

1 Like
4

Hi @Mohamed07

To change the word you need to go in your products and select variant.

Made4uoRibe_0-1736252615473.png
Made4uoRibe_0-1736252615473.png761Ă—646 26.5 KB

To change the color try this one. If it wont work please, provide your store URL. Thanks!

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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__quantity .form__label {
    color: red;
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

1 Like
5

Hi @Mohamed07

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.css / based.css file and paste the code in the bottom of the file.
fieldset.js.product-form__input.product-form__input--pill legend.form__label {
    color: #00D779 !important;
}
.product-form__input label.quantity__label.form__label {
    color: #00D779 !important;
}

If you want a different color, you can write it in place of #00D779.

Result:

websensepro_0-1736253760201.png
websensepro_0-1736253760201.png932Ă—510 100 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

1 Like
6

Thanks a lot for your help it worked, much appreciated

7

Thanks a lot for your help it worked much appreciated