The Titles are too large. How do I shrink the font size down?

Store Design
, ,

Topic summary

A user is seeking help to reduce the font size of product titles on their Shopify store, which appear too large. They’ve tried various CSS solutions but haven’t found the right code for this specific element.

Multiple solutions provided:

  • Add CSS targeting .product__title h1 with font-size: 30px !important; to the end of base.css file
  • Insert custom CSS in theme.liquid file above the </head> tag
  • Alternative placement: add code above </body> tag in theme.liquid

All solutions involve adjusting the font-size value (typically 30-32px) to match desired appearance. Contributors included step-by-step instructions for accessing the code editor through Online Store > Themes > Edit Code.

Resolution: The original poster confirmed one of the solutions worked successfully and expressed gratitude for the help.

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

This is the link to my website page. How do I shrink these product titles down they are way too large? I have tried and found the various codes for everywhere else but I am stuck on this one. Please help!

Aaron19881_0-1700620869596.png
Aaron19881_0-1700620869596.png988×729 201 KB

https://inspirational-giftings.myshopify.com/products/be-smart-work-hard-trust-god-11oz-white-mug

1 Like
2

@Simply_Aaron - please add this css to the very end of your base.css file and check, adjust number as per the need

.product__title h1 {font-size: 30px !important;}

suyash1_0-1700621136380.png
suyash1_0-1700621136380.png1366×768 169 KB

2 Likes
3

Hi @Simply_Aaron

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

You can change the value of 30px to match the size you want to achieve.

PageFlyRichard_0-1700621144704.png
PageFlyRichard_0-1700621144704.png1920×953 185 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

4

Hi @Simply_Aaron

You can do that by adding this code at the bottom of your base.css file in Online store > Themes > Edit code

.product__title h1 { font-zie: 32px !important; }
5

**Hi @Simply_Aaron **

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code just above tag

Result Mobile:

makkaomakka_1-1700632926562.png
makkaomakka_1-1700632926562.png336×541 61.6 KB

Result Desktop:

makkaomakka_0-1700632917458.png
makkaomakka_0-1700632917458.png1715×364 114 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka

6

Thank you so much! This was so helpful and most importantly it worked!!!