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
font-size:16px;
Change Text Color
Replace with the hex code of your preferred color
color:#000000;
Change Text Alignment
Select one of the following options
text-align:left;<br><br>text-align:right;<br><br>text-align:center;
Increase Spacing Above the Text
Replace the number with your preferred amount of spacing
margin-top:12px;
Increase Spacing Below the Text
Replace the number with your preferred amount of spacing
margin-bottom:12px;