How do i Change capital letters on the Heading on featured collection and collection list?

Store Design
,

Topic summary

Headings in Featured Collections and Collection List were displaying in all caps, clashing with the Pinyon Script font. Root cause: a CSS rule on h2 (.h2) setting text-transform: uppercase (a CSS property that forces letter casing).

Fix applied: in theme.scss.css (around line 1441), changing text-transform to lowercase or none corrected the first heading.

Remaining issue: the “Your Favourites” section still showed uppercase due to hardcoded uppercase styling that overrides CSS.

Proposed solution: in Admin > Theme > Customize > Home page, re-enter the section’s h2 title using the desired case; with text-transform set to none/lowercase, it will display as typed.

Notes: Screenshots illustrated the CSS snippets and theme settings path.

Status and outcomes:

  • First heading resolved via CSS edit.
  • Second heading requires updating the section title in the theme customizer.
  • Merchant granted collaborator access for hands-on assistance.
  • Discussion is ongoing pending confirmation that the second heading is fixed.
Summarized with AI on December 13. AI used: gpt-5.
1

Hi, so i have tried a few ways now to fix this but nothing seems to be working. I do not want the heading on the featured collections / collections list to be all capital letters, because i am trying to use an imported google font and this specific font looks silly all capitals (it is pinyon script). (for some reason there is no option to do basic lowercase on my theme, even if i type in lowercase it just makes it capitals)

I have tried to do the coding to change this but every time i try to save it says an error and can not save changes, so i must be doing it wrong.

this is my website, you can see both the collections headers i am wanting to change on the main page under ‘shop the collection’ and ‘your favourites’ - www.bonnibisous.com

i am hoping to sort this ASAP as i can not move further with finishing my website until i figure out this font problem, as i need to change over all my listings to lowercase and so on aswell. but cant change them until i know i can change the main page headers to match.

Thanks!!!

2

Hi @bonnibisous !

There’s a text-transform set on your h2 title tags which is causing this issue. You can either change it from uppercase to lowercase or none depending on what you would prefer.

Go to Admin > Theme > Customise > edit code > theme.scss.css > around line 1441

Changing text-transform from uppercase to lowercase should achieve the result below:

From:

h2, .h2 {
  font-size: 1.1875em;
  text-transform: uppercase;
  letter-spacing: 0.1em; 
}

To:

h2, .h2 {
  font-size: 1.1875em;
  text-transform: lowercase;
  letter-spacing: 0.1em; 
}

swappy-20241201_051407.png
swappy-20241201_051407.png1099×639 248 KB

Or setting the text-transform to none, will make the text the same letter case that you type in:

h2, .h2 {
  font-size: 1.1875em;
  text-transform: none;
  letter-spacing: 0.1em; 
}

swappy-20241201_051845.png
swappy-20241201_051845.png1275×773 129 KB

Hope this helps!

1 Like
3

OMG, thankyou so much! its finally done :grin:

1 Like
4

Hi again, sorry ive just realised i only managed to do it for the first heading and now cant figure out how to do the ‘your favourites’ section, do you have any ideas? thanks again!!!

5

Hi!

It seems the ‘Your Favourites’ section has hard coded uppercase styling, which overrides the CSS text-transform property.

swappy-20241201_064412.png
swappy-20241201_064412.png563×130 9.59 KB

Here’s how you can fix it:

Head to Admin > Theme > Customise > Home page, and you’ll be able to re-write the h2 title to lower case/mix of cases, similar to your ‘shop by collection’ section. Then the text-transform css will work as expected.

swappy-20241201_064833.png
swappy-20241201_064833.png466×116 9.71 KB

Let me know if you need more details!

6

I have accepted your request to collaborate as i cant quite figure it out, thanks so much for helping!! :heart: