How to edit code to change all the text size in same time?

Store Design
, , ,

Topic summary

A store owner wants to standardize heading (H1, H2, H3) and text sizes across all pages for visual consistency.

Current Challenge:

  • Shopify’s basic theme settings only offer relative size options (Small, Medium, Large) rather than specific pixel/point values
  • Different sections use varying text sizes
  • Attempts to identify CSS classes via browser inspector have been unsuccessful

Seeking Solution:
Looking for guidance on editing the theme’s main code to globally change font sizes “in one shot” rather than adjusting each section individually.

The discussion remains open with no responses or solutions provided yet.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.
1

Hi guys,

To improve the visual shape of my store, I want to have same H1, H2, H3… and text size in every page.

But, the problem is I use different section, and in Shopify basic options, I don’t have the size of police. Only “Small, Medium, Big”.

I try to use inspector of pages to find the css class to edit, but I don’t have success. So someone know how to edit the main code of website to change all the police '“easily” in one shot ?

Thank you very much !

1 Like
2

Hi @Avenueducadre

Yes — you can absolutely standardize all your H1, H2, H3, and text sizes across every page of your Shopify store, even if you’re using multiple sections or themes like Dawn or Refresh that only offer “Small / Medium / Large” in the theme editor.

Best regards,
Devcoder :laptop:

1 Like
3

Hey @Avenueducadre

Thanks for posting this to the Shopify Community.

Problem Solution:
You can make all your H1, H2, H3, and text sizes consistent across your entire store by adding custom CSS rules that override the theme’s default sizing.

Try adding this code:

h1 {
  font-size: 36px !important;
}

h2 {
  font-size: 30px !important;
}

h3 {
  font-size: 24px !important;
}

p, span, li {
  font-size: 16px !important;
}

Add this in your theme.css or base.css file by going to:
Online Store → Themes → Edit Code → Assets.

You can adjust the sizes (in px) to fit your preferred typography style.
This will ensure a uniform font size across all pages and sections, even if different blocks or sections use “Small,” “Medium,” or “Large” labels.

In order to guide you with exact selectors for your theme, could you please share your store URL and password (if applicable) so I can take a look and give you a theme-specific solution?

Waiting to hear back from you.
If this was helpful, don’t forget to like it and mark it as a solution.

Thanks

1 Like
4

Thank you very much !

And how I can use different size in mobile please ? I want to make a responsive website.

5

For this you can use the media Query. I show you below on how to implement this with the help of Media Query.

@media only screen and (max-width: 767px) {
h1 {
  font-size: 30px !important;
}

h2 {
  font-size: 24px !important;
}

h3 {
  font-size: 20px !important;
}

p, span, li {
  font-size: 14px !important;
}
}

Paste this in the end of base.css file. Or if you could share your store url then I can take a look into it to make sure that you able to paste in the correct theme file.