Can I only change overline text's size?

Store Design

Topic summary

Main issue: Increase the font size of “overline” text (e.g., the first line like “WE ARE A”) without changing other elements.

Initial fix: A CSS rule added in theme.liquid targeting .stacked-text–overline h3 (e.g., font-size: 30px !important) partially worked—some overlines updated, others did not.

Follow-up diagnosis: Different sections use different markup for overlines. Some are h3 inside .stacked-text–overline, while others are h4 elements with a data attribute (h4[data-item=“overline”]).

Expanded fixes suggested:

  • Add CSS for h4[data-item=“overline”] { font-size: 20px !important; } in theme.liquid.
  • Alternatively, place .stacked-text–overline h3 { font-size: 25px !important; } at the bottom of Assets > theme-critical.css to ensure stronger override.

Outcome and status: The OP confirmed the first solution helped and reported partial application; further CSS selectors were provided. No confirmation yet that all overlines are resolved, so the thread remains open.

Technical notes: Edit via Online Store > Themes > Edit code. Use !important to override theme defaults. Screenshots illustrate which sections changed vs. not changed.

Summarized with AI on December 28. AI used: gpt-5.
6

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

h4[data-item="overline"] { font-size: 20px !important; /*adjust according to you*/ }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

Thanks for coffee :grin: but where I’m living there is no delivery facility.

1 Like