Custom CSS to make capital font lowercase in certain sections in the Prestige theme

Store Design
1

I’m using the Prestige theme which has an option to make all headings uppercase. This overall looks good in my store apart from a few sections where I would like to change the heading font to lowercase.

2

Hello @Jarch2 ,

You can assign css to section ID

e.g.

#section-id {

text-transform: lowercase;

}

or you can develop an option in sections to control it dynamically without editing the code.

Regards
Guleria

3

Hi @Jarch2

Yes we can use custom css to change it. can you share me the link to let me give you the solution

4

How do I locate the section id? I know how to inspect but I don’t know what the id looks like.

5

https://mk0uuf-h3.myshopify.com/
password: password

6

let try to add custom css below for example home heading

.features--heading-uppercase .Heading {
  text-transform: lowercase;
}

the result:

BiDealDiscount_0-1746498411155.png
BiDealDiscount_0-1746498411155.png1842×1570 162 KB

7

After applying the code to the CSS section, it doesn’t work. It does work when applied to the theme CSS but it works everywhere which isn’t what I want.

8

With inspect tool get the parent element ID

e.g.

#shopify-section-template--19377887183064__text_with_image_kHBzWF .SectionHeader__Heading.Heading {
    text-transform: lowercase;
}
9

can you try this one in theme.css

.features--heading-uppercase .shopify-section--bordered .Heading {
  text-transform: lowercase;
}
10

It comes up with an error saying the section ID selector is not supported

11

Use it in theme.css or any css related file.

12

It worked, but it affected the font of every section.

13

Silly mistake by me, thanks!