Adding a H1 to pages, products and collections

[SimonButt]

Can anyone please advise on how to add H1 tags to all pages on the site please as Shopify does not seem to offer this as standard.

Looking to add to my website - https://customcamping.co.uk/

Using the Refresh Theme

[miniscript]

To add H1 tags to all pages on your Shopify website using the Refresh Theme, you will need to make changes to your theme files. Here's a step-by-step guide on how to do it:

1. From your Shopify admin, go to "Online Store" and then click on "Themes."

2. Locate the "Actions" dropdown button for your current theme and select "Edit code."

3. In the left sidebar of the code editor, under the "Sections" folder, find and click on the "header.liquid" file.

4. Look for the line of code that contains the opening <header> tag. It should look something like this:

<header class="site-header">

• Directly below the <header> tag, add the following code to insert an H1 heading:

<h1 class="site-heading">Your H1 Heading Here</h1>

• Replace "Your H1 Heading Here" with the desired text for your H1 tag. 

• Save the changes by clicking the "Save" button at the top right corner of the code editor.

• To apply the H1 tag to other pages, repeat steps 3-6 for the relevant template files. Common template files where you may want to add the H1 tag include "page.liquid," "collection.liquid," and "product.liquid."

• After making all the necessary changes, click on the "Back to Themes" button to return to the Themes page.

• Finally, ensure that the changes have taken effect on your live website by visiting different pages and inspecting the HTML source code. Look for the H1 tags you added in the appropriate sections.

Please note that modifying your theme files requires some understanding of Liquid (Shopify's templating language) and HTML. It's recommended to make a backup of your theme before making any changes and thoroughly test the modifications to ensure they appear as intended on your website.

[bgmemories]

Hi Miniscript, my site logo on homepage is apparently within the H1 wrapper. https://bowlinggreenmemories.com/ - can i ALSO include a line of code like what you have above to create a true H1 tag (not visible on live site)? because an ahref audit said we don't have an H1 tag currently. Thank you.

[Kwiketo]

Hi there,

I applied this solution but the H1 has appeared on the home webpage, do you know how to hide it and stop it from being appeared on the actual page?