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

garyvg
Tourist
7 0 1

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

Replies 9 (9)

garyvg
Tourist
7 0 1

i am using the shopify theme of refresh

 

oscprofessional
Shopify Partner
15897 2378 3084

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

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing | Oscp Upsell & Cross sell App : Free | Oscp Sales & Volume Discount App : Free | Custom Pricing Wholesale App : Free

Prav
Shopify Partner
6 0 0

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:

 

heading-type-field-rich-text-editor.png

 

 

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.

If you find the answer helpful give it a Like and ✓ Mark it as an Accepted Solution.
garyvg
Tourist
7 0 1

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

macncheehyde
Tourist
4 0 1

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
Shopify Partner
6 0 0

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

If you find the answer helpful give it a Like and ✓ Mark it as an Accepted Solution.

DelightCart
Shopify Partner
1238 82 157

@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

Delight Cart - It's time to turn your visitors into loyal shoppers! 

Delight Loyalty - Increase repeat sales quickly and build lifelong customers loyalty.
garyvg
Tourist
7 0 1

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
Shopify Partner
2405 223 538

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

flareAI : Get Sales from Google Search, on Autopilot
$10+ billion in eCommerce on Google Search, every day. Find out how much you are missing