Making my page title and product title font smaller

Store Design
,

Topic summary

A user seeks help reducing font sizes for page titles and product names on their Shopify store.

Initial Request:

  • Smaller page titles across the site
  • Smaller product name fonts

Solutions Provided:

Two community members offered CSS-based fixes:

  1. First solution (Moeed): Add custom CSS code to the theme.liquid file, placed above the </body> tag. This successfully addressed the initial request.

  2. Follow-up request: User asked to extend the solution to collection pages and blog page titles.

  3. Extended solution (Moeed): Additional CSS targeting .title--primary and .collection-hero__title classes, to be added within the existing code block. Font sizes set to 25px and 3rem respectively.

  4. Alternative approach (webwondersco): Suggested adding CSS directly to the base.css file, targeting .product__title h1 and .main-page-title h1 with customizable rem values.

Status: Multiple working solutions provided with code snippets. User confirmed the initial fix worked and received additional code for broader implementation.

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

Hi team, hope you have a great day.

Can someone help me with below enquiries?

  1. Make my page title smaller.

  2. Product name smaller

Appreciate the help!

Question 1

jasonthegrammy_0-1698150977057.png
jasonthegrammy_0-1698150977057.png981×664 58.2 KB

Question 2

jasonthegrammy_1-1698151009518.png
jasonthegrammy_1-1698151009518.png1678×926 184 KB

Website below

Your Weekend Outfit – sundaysfit

2

Hey @jasonthegrammy

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-1698151367636.png
Moeed_0-1698151367636.png1895×869 75.1 KB

Moeed_1-1698151378283.png
Moeed_1-1698151378283.png1898×871 165 KB

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

Best Regards,
Moeed

1 Like
3

@jasonthegrammy ,add the below line of CSS code at the end of your base.css file.

.product__title h1{
font-size:3rem;
}
h1.main-page-title{
font-size:3.5rem;
}

you can update the value of rem as per your taste.

1 Like
4

Dear Moeed, thank you for the help! it does help ! but any ideas if I could do the same for products pages, blog page title too?

for example below :

All – sundaysfit

Sunday’s Blog – sundaysfit

Photos 1

jasonthegrammy_0-1698154297837.png
jasonthegrammy_0-1698154297837.png1722×804 163 KB

Photo 2

jasonthegrammy_1-1698154317051.png
jasonthegrammy_1-1698154317051.png1781×831 256 KB

5

Hey @jasonthegrammy

Keep the previous code and add this new code above in the previous code you added.

.title--primary {
    font-size: 25px !important;
}
.collection-hero__title {
    font-size: 25px !important;
}

RESULT:

Moeed_0-1698154563745.png
Moeed_0-1698154563745.png1884×876 189 KB

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

Best Regards,
Moeed

1 Like