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

Who this article is for: People who are new to Plug in SEO or need a refresher on updating the <h1

What you'll learn: You'll gain a better understanding of how to change the styling of an <h1

If you have more than one tag on a page of your website, Plug In SEO will recommend that you change one of them to a <div tag or an <h2 tag, as it's best practice to only have one Heading (<h1) per page.

If you do make that change, the 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 or emailing us back at help@pluginuseful.com for a customised fix/s.

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=””

Inline Style Syntax

Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect the tag they are written in, without the use of selectors. Here’s a basic HTML page using inline styles:

<!DOCTYPE html>
<html>
 <head>
 <title>Playing with Inline Styles</title>
 </head>
 <body>
 <p style="color:blue;font-size:46px;">
 I'm a big, blue, <strong>strong</strong> paragraph
 </p>
 </body>
</html>

3. Insert the desired styles between the quotation marks

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;

text-align:right;

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;