How can I overwrite h1 with strong attributes using CSS?

Store Design
, ,

Topic summary

Main issue: Make text inside H1/H2 headings (containing tags) display at font-weight 300 across many product descriptions. H1/H2 are HTML heading tags; applies bold emphasis.

Initial attempts: Setting CSS like h1 strong { font-weight: 300 !important } failed due to the store’s “Invalid custom CSS” restriction on allowed selectors. User sought a rule-based solution rather than manual edits.

Suggestions provided:

  • Check theme.liquid or product-recommendations.liquid and remove the specific CSS targeting H1 (e.g., a long section-specific selector).
  • Add a custom CSS snippet directly in theme.liquid, placing it above the closing tag, to override header/strong weights.

Outcome: The theme.liquid override approach worked; the user confirmed success.

Status: Resolved. No further action requested.

Notes: Multiple screenshots were shared but are not essential to the solution. The exact CSS snippet wasn’t shown in the thread, but adding a global override in theme.liquid achieved the desired font weight.
Summarized with AI on January 31. AI used: gpt-5.
1

Hello,

I’m trying to overwrite a sentence inside h1 with strong attributes (see below) to make it weight 300.

Instead of doing this manually (it’s on many product descriptions) I’m looking for a rule to be applied.

Capture d’écran 2023-02-22 à 12.04.00.png
Capture d’écran 2023-02-22 à 12.04.00.png974×121 19.4 KB

I tried adding CSS selector such as font-weight: 300!important, h1 > strong, h1 * or h1 strong but it didn’t work. For the last three, it says it’s an ‘Invalid custom CSS: Only individual selectors, comma-separated lists of selectors or combiner selectors are supported’.
Any idea how I can do this ?

Thanks

2

Hi @alicepelletier ,

Can you give me your page URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

Hello,

Texts in the description to be unbold are H1 and H2 :

[image: Capture d’écran 2023-02-23 à 10.21.49.png]
Any idea how I should do it?
Many thanks
Alice

4

Hi [email removed]Alicepelletier,

you can check theme.liquid or product-recommendations.liquid to search this CSS and remove it
You can search with the keyword "#shopify-section-template–16696855167200__main h1

PageFlyVictor_0-1677144808535.png
PageFlyVictor_0-1677144808535.png964×105 8.43 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

5

Hi @alicepelletier ,

Glad to support you today.

To can reduce font weight, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1677144850790.png
GemPages_0-1677144850790.png400×163 25.3 KB

  1. add my code above the tag on Theme.liquid:

Eg:

GemPages_1-1677145051231.png
GemPages_1-1677145051231.png983×812 16.9 KB

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

6

It worked perfectly. Thank you !