Shopify metaobjects are the ideal building block for modeling rich content (guides, ingredients, compatibilities, comparisons, etc.) without cluttering your pages. When properly configured, they improve UX, scalability, and SEO. Here's how to use them effectively with Stellar.
Summary
What is a metaobject?
A metaobject is a customizable "content type" (definition + fields) that you create in Settings > Custom data > Metaobjects. You then instantiate as many entries as needed (e.g., a buying guide, an FAQ, a compatibility table). Products/collections can reference these entries to reuse content everywhere, without duplication.
When to use a metaobject vs. a metafield
- Metafield: simple field, specific to an object (e.g., a product's "warmth rating").
- Metaobject: reusable content, potentially linked to multiple objects (e.g., "Cotton Care Guide" linked to 200 products).
Practical rule: if the content needs to be referenced in multiple product sheets or serve as an editorial "building block", create a metaobject. Otherwise, a metafield is sufficient.
Modeling your content (useful templates)
- Size/care guide: title, rich text, table, visuals, PDF link.
- Ingredients/composition: structured list, percentages, allergens.
- Compatibilities: compatible references, icon scheme, warnings.
- Comparison table: dynamic rows/columns, advantage badges.
- Product FAQ: Q/A pairs, order, "to be developed" flags.
- Store locator / points of sale: name, address, contact details, opening hours.
Tip: centralize "brand" content (promises, labels, guarantees) in metaobjects to inject them everywhere (PDP, PLP, brand page) via a single source of truth.
Step-by-step implementation
-
Define the structure: create the definition (text,
rich_text, media, lists, references, booleans, numbers, URL type). - Fill in the content: create entries (e.g., "Denim Size Guide").
- Link to products: add a metaobject reference metafield to the Product model and link the entry.
- Expose in the theme: add a section that reads the metafield and displays the metaobject.
Theme integration (Liquid/OS2.0)
- Online Store 2.0: use dynamic sections with dynamic sources to link the metaobject.
-
Liquid: iterate through the metaobject fields (
product.metafields.custom.guide.value) and handle empty cases. - Rendering: prefer reusable blocks (snippets) + BEM classes for consistent styles.
Dev tip: when a metaobject contains a lot of data, split it (one "Block" metaobject per area) to better control layout and performance.
SEO & performance: best practices
- Avoid duplication: factorize content, link it by reference instead of copying it.
- Structured data: map your fields to Schema.org (Product, FAQ). Display only the essentials on the DOM side.
-
Core Web Vitals: responsive images (
image_url), lazy-load, deferred scripts, light HTML. - Indexing: do not create "orphan" pages for each entry; expose them in PDPs/PLPs. Avoid URL inflation.
Governance & translation
-
Naming: clear prefixes (
brand_promise,care_guide), descriptions and validations (required, max length). - Workflow: "status", "last revision", "editor" fields to track updates.
- International: translatable fields + Shopify Markets for localization (prices, taxes, currencies, content).
