What can I do if updating my heading <h1></h1> changes the styling of my website or text?

If you have more than one <H1> tag on a page of your website, Plug In SEO will recommend that you change one of them to an <H2>, as it's best practice to only have one <H1> per page. 

If you do make that change, the <H2> text may have a different style (color, font size, alignment) which you may want to modify. Most of these changes can be made using Shopify's Rich Text Editor , however if you want to change the styling for all product pages, it may be easier to change the template file in your theme code. 

Note: We strongly recommend making a copy of your active theme and testing any changes to your theme inside the theme copy and not the live theme. After previewing and testing the new changes then you can publish your updated theme.

Making changes to your theme code comes with risks, particularly if you are unfamiliar with coding. For complex restyling issues we recommend reaching out directly to your theme developer for help or hiring one of our SEO experts to implement your custom SEO fixes.

How to make basic style changes to your Shopify theme code

1. Locate the tag inside the theme code

2. Add inline style code inside the opening HTML tag style=””

For example:

<h1 style=””></h1>

3. Insert the desired styles between the quotation marks

<h1 style=”font-size:28px;color:#333060;margin-bottom:20px;”></h1>

Sample CSS styling code: 

Change Text Size

Replace the number with your preferred font size


Change Text Color

Replace with the hex code of your preferred color


Change Text Alignment

Select one of the following options


Increase Spacing Above the Text

Replace the number with your preferred amount of spacing


Increase Spacing Below the Text

Replace the number with your preferred amount of spacing

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us