Remove capitalisation in headers (EMPIRE)

[Animerch]

Hi all,

I noticed that all the headers are in caps which I preferably do not have. Could someone help me and tell me where and what code I should add to CSS?

Example: https://www.animerching.com/nl/products/pokemon-scarlet-violet-surging-sparks-elite-trainer-box

[Moeed]

Hey @Animerch 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[Animerch]

Thanks
https://www.animerching.com/nl/products/pokemon-scarlet-violet-surging-sparks-elite-trainer-box

[Moeed]

Hey @Animerch 

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 </body> tag

<style>
h1.tiny-heading-one {
    text-transform: none !important;
}
</style>

RESULT:

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

Best Regards,
Moeed

[Animerch]

Thank you! What about for instance normal h1, h2, h3, etc.? Such as the h2 header you see below. e.g. ''What you'll......Trainer Box"

[Animerch]

Thanks
https://www.animerching.com/nl/products/pokemon-scarlet-violet-surging-sparks-elite-trainer-box

[VipulBudhiraja · Accepted solution]

To adjust the headers so they are not displayed in all caps, you can add a CSS rule to override the text-transform property. Here’s how to do it:

1. Access the Theme’s CSS:

   • Go to Online Store > Themes > Edit Code.
   • Look for your main CSS file, which might be named theme.css, styles.css, or similar.

2. Add CSS Rule:

   • Add the following CSS code to target all headers and remove the capitalization:
     css

     Copy code

     h1, h2, h3, h4, h5, h6 { text-transform: none; }
   • This will ensure that all header tags (h1 through h6) display in their original capitalization, as typed.

3. Specific Header Customization:

   • If you want to adjust specific headers (e.g., only product titles), inspect the element on your product page to find the specific class. For example:
     css

     Copy code

     .product-title { text-transform: none; }

Save your changes, and refresh the page to see the effect. This should remove the all-caps styling from the headers.

Increase your conversion rate and enhance your user's shopping experience with smart guidance from the Debales AI Chatbot on Shopify! Ready to assist users effortlessly—let’s chat!