How to customize the contents in a page when using a dynamic source? (Horizon Theme)

Technical Q&A
,

Topic summary

Issue: Size guide content pulled from a Page metafield doesn’t reflect formatting (fonts, image sizes, spacing) on product pages in the Horizon theme, though it worked in Dawn. Screenshots show a mismatch between mobile view and the Page editor.

Cause: Horizon overrides page-level styling and does not automatically render the Page metafield’s HTML/formatting on product templates.

Solutions proposed:

  • Code fix: In the product template (main-product.liquid), output the metafield using the metafield_tag filter (e.g., product.metafields.custom.size_guide | metafield_tag) so stored HTML/formatting is respected.
  • No-code route: Add a Custom Liquid block on the product page and output the same metafield with metafield_tag.
  • Styling alternative: Output the metafield via a Liquid/HTML block and apply custom CSS in theme.css to control fonts/sizes.

Notes: “Metafield” = custom content field; “Liquid” = Shopify’s templating language; metafield_tag renders the content with proper HTML. Screenshots are used to illustrate the formatting discrepancy.

Status: Guidance provided; awaiting confirmation from the original poster. The thread remains open.

Summarized with AI on December 11. AI used: gpt-5.
1

I’m trying to add dynamic size guides to my products. I created a metafield for the size guide and have it selected for “pages”. This worked fine in dawn theme, but now in horizon theme, it’s a little wonky. It doesn’t seem to change anything on the website if I resize an image or change the font or size of text in the pages section. Is there anyway to be able to customize the contents in a page when using a dynamic source on the Horizon theme?

The first attached image is what it looks like in mobile view and the second image is what it looks like in the actual page section.

2

3

URL: www.eastsidemelrose.com

Password: opensesame

2

Horizon overrides Page-level styling, so metafield content won’t reflect font/size changes. Use a Liquid/HTML block to output the metafield and target it with custom CSS in theme.css.

3

Why it looks wrong in Horizon theme

Horizon theme doesn’t automatically show the formatting (fonts, image sizes, spacing) from your page metafield.
Dawn does — Horizon doesn’t.

That’s why resizing text or images in the Page Editor doesn’t change anything on the product page.

How to fix it

Fix 1 - Make Horizon show the HTML properly

You need to change one line in the theme code.

  1. Go to Online Store → Themes → Edit Code

  2. Open the product section file (usually main-product.liquid)

  3. Find the line showing your metafield (example):

{{ product.metafields.custom.size_guide }}

  1. Replace it with:

{{ product.metafields.custom.size_guide | metafield_tag }}

This makes Horizon display your fonts, images, and formatting correctly.

Fix 2 - Use a Custom Liquid block (no coding)

  1. Go to Online Store → Customize
  2. Open a product page
  3. Add Custom Liquid
  4. Paste:

{{ product.metafields.custom.size_guide | metafield_tag }}

I hope this helps! If you need anything else, just let me know.