Using Header formatting for Paragraph text

[PathoStudio]

For certain sections of my website, I much prefer the font, size and formatting of the 'Heading 5' options for some of the website copy that should be labelled 'Paragraph' for SEO purposes. From what I can see, the typography section of the Shopify theme editor is extremely limited and selecting 'Heading 5' is the only viable option for displaying website copy in this way. Would there be a way around this? Would I need to edit the website code and then simply replace 'H5' tags with 'P' tags?

[Melanin1]

Yes, you're right — using heading 5 for styling can affect SEO. I can edit the theme code to apply the same styling to p tags so your content remains semantically correct and visually consistent. Let me know if you'd like me to handle this for you.

[PathoStudio]

Thank you for the offer. The problem is, I don't want the H5 styling to be applied to all paragraph content, only certain sections of my website. Ideally I would have two styling options for paragraph text, so that I could for instance apply a style that could be labelled 'Paragraph 1' to some text, and a style labelled 'Paragraph 2' to other text, with both utilising p tags.

[Melanin1]

Got it! I can create two custom paragraph styles paragraph-1 and paragraph 2 that you can apply to p tags wherever needed. Just share the styles you want for each, and I’ll code it for you.

[PathoStudio]

I mean, that would be fantastic. I'm just not too sure how what the styles are. The font is Futura for both, but I guess the only major difference is the size of the font. I would like Paragraph 1 to be the larger size, and Paragraph 2 to be the smaller size. I'd also like both to be black with 100% opacity. (I notice that my paragraph text typically appears grey, or perhaps the opacity is simply lowered).

I'm also curious as to whether I can use different fonts for the different header options. At the moment I have Futura set for everything, and I've been manually adding custom code to change most Header 1 fonts to MADE Sunflower. Is it possible to set Header 1 to MADE Sunflower and all the other Header variants to Futura, so that I don't have to constantly customise the code?

Thank you for your time.

[Melanin1]

Thanks for the details! I’ll create two paragraph styles with different font sizes, both in solid black. I’ll also update your theme to set H1 to MADE Sunflower and keep other headings in Futura, so you won’t need to add code manually. Ready to proceed!

[PathoStudio]

That's great thank you, but how will you proceed to do that?

[Melanin1]

I’ll access your theme code, add custom CSS for the paragraph styles, and update the font settings in your CSS or theme file to apply MADE Sunflower only to H1. Once done, you’ll be able to apply the styles easily without editing code each time. 

[PathoStudio]

I'm sorry but I still don't quite understand. How can you access my theme code? I would have thought that only myself and anyone with permission would have access to my theme code? Are you asking me to send you permissions to do this? Because I'm not prepared to do that.

Could you provide the code here?

[diego_ezfy]

You're correct. For SEO purposes, it’s best to use proper semantic tags like <p> for regular text, even if you prefer the styling of <h5>.

A good workaround would be to update your theme’s CSS so that paragraph (<p>) tags can visually look like your preferred Heading 5 style. This way, you keep the correct structure for SEO while still achieving the look you want.

Yes, this would involve editing the theme code, specifically your CSS file (like base.css if you're using a Shopify's free theme). You could add a custom class, for example:

.p-heading5-style {
  font-size: 1.25rem;
  font-weight: 600;
}

Then in your HTML or content blocks, use a <p class="p-heading5-style">Your text here</p> instead of an <h5> tag.

I hope this helps!

Best,
Diego