How can I add an H1 tag to my main front page?

[garyvg]

How can i get an H1 tag on my main front page on my shopify page

[garyvg]

i am using the shopify theme of refresh

[oscprofessional]

Hello@garyvg 
Can You Please Share Your Store URL I Will Check and Provide a Proper Solution if your Store Its password is Protected So Please Share With Password
Thanks

[Prav]

Hey @garyvg 

To get an H1 tag on your homepage, you will actually need to do 2 things: a) remove the current H1 tag assigned to your logo; and b) create a new section (or edit an existing section) and set your H1 tag.

Step 1: Remove H1 tag assigned to your logo:

(ALWAYS MAKE A BACKUP BEFORE WORKING ON CODE CHANGES)

- Select your theme, and click on 'edit code'

- in the search bar, enter 'header.liquid', then click the header.liquid file in the file browser

- place your cursor anywhere inside the code editor, and press 'Ctrl + F' (or Cmd + F on Mac)

- search for "<h1"

- if you haven't made changes to your theme (and are using the latest version), you will land on line 172. the opening H1 tag is located here.

- change h1 to div; so ends up looking something like (the '...' represents omitted code, don't include that):

...
<div class="header__heading">
...

 - there is also a closing H1 tag (located on line 196). change it so ends up looking like (again, the '...' 3 dots - represents omitted code, don't include that):

...
</div>
...

 - you can save this file now.

And you're done with part 1.

For part 2, I am going to use the 'Rich text' section and give you instructions how to add a 'Heading type' field to that section. 

Step 2: Update code for Rich text section to include H1

- still in the code editor, search for the file 'rich-text', and open it

- I have the modified file here for you (thought that might be easier to copy+paste it): https://gist.github.com/praveensewak/5c30ddded6307cba7fa963718ec7c806

- You can simply copy all the code in this link, and replace your version of rich-text.liquid

- For your reference, the lines changed are
: Line 220-251 in the GIST are new lines

: Line 24 & 33 are updated code.

- Once you save this, you should be able to go into your Theme Customizer, and a new option is available to set the Heading type to H1:

You can actually use this section on any template and be able to insert a H1 tag.

Hopefully that gets you going. If you need instructions for any other sections, please reach out.

[garyvg]

wow super clear ty so much i will try it out soon

[macncheehyde]

I'd like to implement this on my website. I use the Dawn theme. When I used your rich-text.liquid file my main navigation menu disappeared from my website.

[Prav]

Hi. Any chance you can share your website address so that I can take a look first?

Any of the following will help with investigation as well:
- exact URL where this error is happening
- browser & device you were using

- version of Dawn theme you're currently using

[Ben_W]

Hi Prav!

This is great, does this work for the spotlight theme too?

[DelightCart]

@garyvg Please follow up below steps.

1. Go to Online store >> Themes
2. Choose to customize
3. Add a custom HTML section where you needed H1

[garyvg]

but i cant find the html for that part of the page in HTML. i created it as a "rich text" and I cant  find it to make it h1. how can I find it

[flareAI]

Hello @garyvg,

I am Gina from flareAI app helping Shopify merchants get $7Million+ in sales from Google Search, on autopilot. Hope you are having a good day.

Here's a step-by-step tutorial on incorporating an H1 tag into your main front page using the "Refresh" theme.

- Access your Shopify admin dashboard and navigate to "Online Store" > "Themes." Locate the "Refresh" theme and select "Customize."

- Within the theme customizer, find the section corresponding to your front page's content. The specific name of this section may differ depending on the "Refresh" theme's structure. Look for terms like "Header," "Hero," "Banner," or similar sections housing the primary content.

- Click on the identified main content section for your front page. This action will open the customization settings for that particular section.

- Depending on the customization options offered by the theme, there might be an area where you can edit the content within the section. If you find a field to input text or HTML, insert your H1 tag directly. In instances where inputting HTML isn't possible, proceed to the following step.

- If the theme's customization choices don't permit direct H1 tag addition, you can use custom CSS to target the specific section and style the existing text as an H1 tag.

- After adding the H1 tag or making CSS adjustments, ensure to save the changes and publish the theme, then preview the storefront's front page to verify the correct H1 tag display, and make additional custom CSS adjustments if needed.

Keep in mind that altering theme code directly might yield unintended outcomes. Therefore, it's advisable to generate a backup or replicate your theme prior to making any alterations.

Don't hesitate to ask if you need any further clarification. If you find the answer helpful give it a Like and ✓ Mark it as an Accepted Solution.

Gina