Horizon theme h1 customization

Hi,

would REALLY appreciate if anyone could explain how to change product titles’ size while keeping them set as H1 (seo…).

Hi @user520

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

@user520 it can be done using css, can you please share your website link?

Hello @user520 Thanks for reaching out to Shopify community with your concern. It can be done using custom CSS easily. If you can provide the URL of your store and if it is password protected please share the password too. Or maybe if you can mention the Shopify theme you are using. Thanks

Yes, it’s the Horizon theme, as mentioned in the title.

Do you want the title size bigger or smaller than it is now? @user520

In “Edit theme” go to product page and add this CSS to the “Custom CSS” of the “Product info” section:

h1 {
  font-size: 16px;
}

Amend the value to your liking.

What do you mean ““Custom CSS” of the “Product info” section”?
I only see custom css for the entire theme (and none of the many versions of css I’ve tried using worked. Inc the 1 you suggested).

You should invest some time in learning how “Edit theme” works and what settings your theme offers:

Each section has a “Custom CSS” setting (no matter what theme).

When you put CSS code there, it’s converted in a way that it applies to this section only, plus it becomes “stronger”.

That’s why the code I suggested would not work in “Theme settings”-> “Custom CSS”, but will in Section settings-> “Custom CSS”.
By itself, this code is pretty “weak” and most CSS rules theme already has will prevail.


Do not edit your theme code for small things like this. Editing theme code will make future theme version updates more complex.

Hello @user520
You can change the product title size without changing the H1 tag by adjusting the CSS instead of the heading level.

Steps:

  1. Go to Online Store → Themes → Edit code

  2. Open your CSS file (usually base.css, theme.css, or styles.css)

  3. Add this at the bottom:

.product__title h1 {
  font-size: 28px; /* adjust as needed */
  line-height: 1.3;
}

This keeps the product title as an H1 for SEO, but changes only its visual size.

If your theme uses a different class, inspect the product title (right-click → Inspect) and replace .product__title h1 with the correct selector.

“You should invest some time in learning how “Edit theme” works and what settings your theme offers”- Well YOU should invest some time in actually reading what I wrote, and in being a little bit more humble (ok, a lot more).

“I only see custom css for the entire theme”.

The editor on my laptop doesn’t look like the screenshot you shared.

Ok, can I humbly ask you to share an entire screenshot of your “product information” section settings screen?
Like I did, not a tiny cutout.

And not a “Theme settings” – that’s not what I am talking about.

(attachments)

Right.
Now click “Product information” in the left pane and scroll down?

ok, found it. Which is great, but it still didn’t work.

Unless I copied the wrong css? You tell me :woman_shrugging:

No problem – because your heading is not H1.
Therefore the rule does not apply to it.
Now I can see it since you’ve provided a link to your store

Look at the screenshot below and check yours:

It may be set as H1 under “Typography” but this settings is about the look, not function.
In fact, that’s where you can change the font size (instead of using CSS).

I bet you have “Paragraph” where I have “H1”.
This is where you actually set what tag is used for your heading. It is “H1” by default, but you can easily change it to whatever available in drop-down.

Horizon is very (sometimes overly) flexible. And sometimes not obvious.

But anyway – Customizer (‘edit theme’) is your main tool in setting up your online store.
That’s what I meant in my second post in this thread. no offence.

Your product title isn’t an h1… in fact, you don’t have an h1 tag on your product page at all, so of course targeting h1 in css isn’t going to do anything. The product title usually is the h1 tag, but in your case it’s obviously not, so you may want to browse around your theme editor, as @tim_tairli pointed out, assign h1 to your product title (Header Text), and then that custom css should work.

I don’t have “text”

(attachments)

Watching videos, and browsing around and learning your own theme will benefit you. Just because you don’t have a “Text” block doesn’t mean you don’t have any options. Like the screenshot you just posted. Did you click on “Title” and look at its settings?

I suggest you watch some videos on YouTube that walk you through step by step until you’re familiar with how the Theme Editor functions. Then come back here and ask away.

Your simplest fix would be to recreate the configuration on my last screenshot.
Unfortunately, “Title” is a wrong block.

Explanation:
I’ve just added another copy of Horizon from the theme store.
It has “Product title” block where my section has “Text”. However, if I click ... and “Edit theme code” it turns out to be blocks/text.liquid
But I can’t add block named “Product title” – it does not exist.

If i add a “Title” block and do “edit code” on it, it is blocks.product-title.liquid

So, default “Product title” is just a renamed “Text”.
BTW – you can rename any block and section in Customizer, just FYI.