How to change product title heading tag (Convert h3 to h2) in collection page

Store Design
1

How to change product title heading tag (Convert h3 to h2) in collection page in spotlight theme?

Screenshot (5).png
Screenshot (5).png296Ă—400 99.8 KB

Thank you

Bhanu

2

Hi @Bhanupratap ,

Yes it is possible. You can change in HTML or copy the font size of the h2 size.

3

Access the theme code: Log in to your Shopify admin panel and navigate to “Online Store” → “Themes.” Find the Spotlight theme and click on “Actions” → “Edit Code.”

Locate the collection page template: In the theme code editor, find the collection page template file. It is typically named collection.liquid or collection-template.liquid. Look for the section that displays the product title.

Update the heading tag: Within the code, find the line that contains the product title heading tag, likely

. Replace it with

to change the heading tag from

to

. Save the changes.

Preview and test: Before making the changes live, use the “Preview” option to see how the modified collection page looks. Verify that the product titles now use

tags as desired. Additionally, test the page to ensure that other elements are not affected by the modification.

Publish the changes: If you’re satisfied with the modifications, click on “Save” to publish the changes to your live theme. Ensure that you thoroughly review the changes and test the collection page on different devices to ensure the desired outcome.

To learn more about Themes and Designs visit this website:https://codestoresolutions.com/ui-ux-design/

4

@MichaelDavis @Made4uo-Ribe

Hi,

Thanks for answering!

Actually, I need to change the heading tag for better SEO, like amazon:
https://prnt.sc/pA4naxSPGlcB

5

@Codestore01

Hi, Thanks for reply!

Actually, I haven’t any file with these names
collection.liquid or collection-template.liquid
I have files with these names

collection.json or main-collection-product-grid.liquid
And I can’t find any h3 in these files.

Please help!

Thank you

Bhanu

6

Hi @Bhanupratap

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

To change the product title heading HTML tag from <h3> to <h2> on the collection page in Shopify, you’ll need to modify your theme’s code. Here’s a general guide on how to do this:

  1. Log in to your Shopify admin panel.
  2. Go to “Online Store” and click on “Themes”.
  3. Find the theme you are currently using and click on “Actions” → “Edit code”.
  4. In the code editor, locate and open the “collection.liquid” file. This file is responsible for displaying the collection page.
  5. Look for the code that generates the product title. It might appear as <h3 class="product-card__title"> or <h3 class="grid-view-item__title">.
  6. Replace the <h3> tag with <h2>. The updated code should look like <h2 class="product-card__title"> or <h2 class="grid-view-item__title">.
  7. Save the changes you made to the file.
  8. Preview your store or visit a collection page to verify that the product titles are now wrapped in an <h2> tag.

Please note that modifying your theme’s code requires basic understanding of HTML and Liquid (Shopify’s templating language). It’s recommended to create a backup of your theme before making any changes and proceed with caution. If you’re not comfortable with coding, it’s advisable to reach out to a Shopify expert or developer for assistance.

Regards,

San

7

@INA_MSWEB
I haven’t any collection.liquid file, I receive this same solution many time before but dear I haven’t any collection.liquid.

What I need to do now? Please help!

Thank you

Bhanu