Remove capitalisation in headers (EMPIRE)

Store Design
1

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

Animerch_0-1730543700302.png
Animerch_0-1730543700302.png2680×654 312 KB

2

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

3

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

4

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 tag

RESULT:

Moeed_0-1730546058668.png
Moeed_0-1730546058668.png1497×734 345 KB

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

Best Regards,
Moeed

5

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

6

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"

7

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!