How to Make Quantity Menu Header Bold

Shopify Discussion

Topic summary

A user needed help making the “QUANTITY” menu header bold on their product page to match the “COLOUR” header styling. They also mentioned an unwanted issue where selected color text appeared beside the COLOUR header.

Solution Provided:

  • Add custom CSS code to the theme’s base.css file
  • The code targets .product-form__label elements with font-weight: 700 and color: black properties
  • Access via: Shopify Admin → Online Store → Themes → Actions → Edit Code → Assets → base.css

Outcome:
The user confirmed the CSS solution worked perfectly. The discussion appears resolved, though the second issue about removing the selected color text display wasn’t explicitly addressed in the responses.

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

Hi

I need assistance with two issues on my product page (link below):

(1.) The QUANTITY menu header - I would like this text in bold as is the case with the COLOUR menu header above. I would appreciate help with the css code for this.

(2.) The COLOUR menu header - the text of the selected colour appears beside the COLOUR text header. I don’t know why it is like this. Any suggestions on how to remove it would be greatly appreciated.

Here is the link to the product page:

https://silkycaketoppers.co.uk/products/personalised-60th-birthday-cake-toppers-for-him-and-her?variant=43818419552444

Mac

1 Like
2

Hey @Macnet

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

RESULT:

Moeed_0-1716790442050.png
Moeed_0-1716790442050.png1398×830 112 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello @Macnet ,

  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:
.quantity__label.form__label {
font-weight: 700!important;
color: black !important;
}

ZestardTech_0-1716792206127.png
ZestardTech_0-1716792206127.png1686×859 133 KB

4

Hi

I applied the code and it worked perfectly ! Much appreciated :slightly_smiling_face:

1 Like
5

Hi @Macnet

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance.
If helpful then please Like and Accept Solution.