How to capitalize font for all headers, titles, and announcement bar (minimal theme)

Store Design

Topic summary

A user seeks to capitalize all text in headers, subheadings, and announcement bars using a custom font on the Minimal theme without manual editing.

Solution Provided:

  • Navigate to Shopify Admin → Online Store → Themes → Actions → Edit Code
  • Locate Asset > theme.scss.liquid file
  • Add CSS code with text-transform: uppercase !important; targeting specific elements

Implementation Details:

  • Initial code only capitalized the header bar
  • Updated code expanded to include:
    • .header-bar__message
    • .site-nav li *
    • .header-bar__module *
    • .grid-link__title

Outcome:
Original poster confirmed the solution worked successfully after the code revision.

Ongoing Questions:
Other users with different themes (Modular theme) are asking where to implement similar code, and one user reports the solution isn’t working for their specific site, indicating theme-specific variations may require adjustments.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

How do I stylize my custom added font so all the text is capitalized for the headings and subheadings without doing it manually?

website URL is: https://healthyboba.com/

2

home page.png
home page.png1650×1275 159 KB

3

@zoepuno

Do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:
.site-nav li *,
.header-bar__module *{
    text-transform: uppercase !important;
}

Please let me know whether it works.

Kind regards,
Diego

4

it only capitalized the text for the header bar, not the announcements or subheadings.

5

Replace the previous code with this one:

.header-bar__message,
.site-nav li *,
.grid-link__title,
.header-bar__module *{
    text-transform: uppercase !important;
}
1 Like
6

Perfect, all capitalized!

Thanks for your help!

7

@zoepuno you’re welcome, I’m glad to hear that!

Next time feel free to contact me personally, I’ll be happy to help.

Kind regards,
Diego

1 Like
8

Hi everyone,

Could someone please tell me how I could capitalise my headers in the Modular Theme?

Any help would be much appreciated.

Thank you :slightly_smiling_face:

9

where do i enter this code?

10

Hi Deigo,

I have tried this and it is not working for me for some reason… my site is in edit mode https://musclecreekcreative.myshopify.com/ Can you please help as I really need to capitalise my headers.