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 [email protected] 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;