How can I customize the heading tags in my Shopify pages

Shopify Discussion
1

Hey there,

I have several modification to apply in order to Get Better SEO ranking.

For that I need to change some header tag sizes; ex: from H2 to P, from h5 to h3 etc…

Please find attached related picture indicating the changes needed.

four.png
four.png1334×502 437 KB

One.png
One.png1327×475 160 KB

three.png
three.png1337×508 219 KB

two.png
two.png1280×324 15 KB

2

Customizing heading tags in your Shopify pages involves modifying the HTML and CSS of your theme. Here’s a step-by-step guide on how to do this:

  1. Access Shopify Theme Code:
  • Log in to your Shopify admin panel.
  • Navigate to “Online Store” > “Themes.”
  • Find the theme you’re using and click the “Actions” button, then select “Edit code.”
  1. Locate the Page Template:
  • In the “Templates” or “Sections” folder, find the template or section related to the page you want to customize. Common page templates include “page.liquid” or “page-template.liquid.”
  1. Edit the HTML:
  • Open the appropriate template file (e.g., page.liquid) in the code editor.
  • Locate the part of the HTML where the heading tags are used. These are typically within <h1>, <h2>, <h3>, etc., tags.
  1. Customize the Heading Tags:
  • Modify the content and structure of the heading tags as needed. You can change the text within the tags and add HTML attributes for styling or SEO purposes.
<h1>Your Custom Heading</h1>
<h2>Subheading</h2>
  1. Save Changes:
  • After making your modifications, save the changes to the template file.
  1. Adjust CSS (Optional):
  • If you want to style the heading tags differently, you can do so in your theme’s CSS. Locate your theme’s CSS file (commonly named “theme.css” or “styles.css”) in the “Assets” folder.
  • Add custom CSS rules for your heading tags. For example:
h1 {
font-size: 24px;
color: #333;
}

h2 {
font-size: 18px;
color: #666;
}
  1. Save CSS Changes:
  • Save your CSS changes.
  1. Preview and Publish:
  • Before making your changes live, preview them by going back to the Shopify admin panel and using the “Preview” option.
  • If everything looks as expected, click “Publish” to make your custom heading tags live on your Shopify page.
  1. Check SEO:
  • After making changes to heading tags, check the SEO impact. Ensure that your headings are semantically meaningful and relevant to the page’s content. Properly structured headings can help with search engine optimization.
  1. Test Responsiveness:
  • Verify that your customized headings display correctly on both desktop and mobile devices. Adjust your CSS if necessary to ensure responsiveness.

Remember to back up your theme files before making any changes, and be cautious while editing HTML and CSS to avoid breaking your Shopify store’s layout. If you’re not comfortable with code editing, consider seeking assistance from a Shopify expert or developer.

3

Hi,

Need to work on CSS

header.liquid or header-section.liquid
4

Hi Rauj980,

Thank you for your answer, but this solution is not helping a lot.

I have a specific request regarding the Button “Add to Cart” and the Name of Each Product as also as the Language bar titlle “Language”.

I may need the pages name that publish those information or the code that can directly affect the heading size.

As for the CSS, It is not a solution because I need to change the heading tag (replacing

by

) in the page source and not the Heading size in the CSS page.

Thank you for your answer one more time.

Regards