Appearance
Metaobjects for reusable content
Reuse the same testimonials, press logos, trust badges, or size charts across multiple pages without re-typing them. Set them up once in Shopify's metaobject definitions, then pick the list in your section's settings.
The four sections that support this pattern are Testimonials, Press coverage, Trust badges, and Size chart. Each section accepts either merchant-added blocks (the default — zero setup) or a metaobject list (opt-in — enables reuse). If both are set, the metaobject list wins. If neither is set, the section renders nothing on the storefront and shows a prompt in the theme editor.
TIP
If you don't need reusable content, just leave the metaobject list empty and add blocks directly to the section. Every section works either way.
Testimonials
Fields the theme looks for (alternative names are accepted; the first name found wins):
json
{
"quote": "Customer testimonial text (rich text). Alternates: body, text",
"author": "Author name (text). Alternate: name",
"author_title": "Optional — author role or title (text)",
"rating": "Optional — integer 0-5",
"author_image": "Optional — file (image)"
}Setup steps
- Shopify Admin → Settings → Custom data → Metaobject definitions → Add definition.
- Name it "Testimonial". Shopify will set the handle to
testimonial. - Add fields:
quote(Rich text),author(Single line text),author_title(Single line text, optional),rating(Integer, optional),author_image(File — Image, optional). - Create at least 3 entries populated with real customer quotes.
- In the theme editor, click your testimonials section → under Content source, pick your Testimonial list.
- Save. The storefront now renders testimonials from your metaobject entries.
TIP
Want to switch back to blocks later? Clear the metaobject list picker; your existing section-local blocks render again.
Press coverage
Fields the theme looks for:
json
{
"logo": "File — Image (press outlet logo)",
"link": "Optional — URL (article link)",
"alt": "Alt text (text). Alternate: name",
"quote": "Optional — short pull quote (text)",
"source": "Optional — source/byline (text)"
}Setup steps
- Shopify Admin → Settings → Custom data → Metaobject definitions → Add definition.
- Name it "Press mention". Shopify will set the handle to
press_mention. - Add fields:
logo(File — Image),link(URL, optional),alt(Single line text),quote(Single line text, optional),source(Single line text, optional). - Create one entry per press outlet.
- In the theme editor, click your Press coverage section → under Content source, pick your Press mention list.
- Save.
TIP
If you also use the Logo list section for brand/partner logos (not press), create a separate "Brand logo" definition (handle: brand_logo) with just logo, link, alt — that's the type the Logo list section expects.
Trust badges
Fields the theme looks for:
json
{
"icon_name": "Lucide icon name (text) — e.g. 'truck', 'lock', 'shield'",
"icon_image": "Optional — file (image). Fallback if icon_name is blank",
"heading": "Badge heading (text). Alternate: name",
"text": "Badge supporting text (text). Alternate: body"
}Setup steps
- Shopify Admin → Settings → Custom data → Metaobject definitions → Add definition.
- Name it "Trust badge". Shopify will set the handle to
trust_badge. - Add fields:
icon_name(Single line text),icon_image(File — Image, optional),heading(Single line text),text(Single line text). - For each entry, set
icon_nameto a Lucide icon name — any of the 49 names available in the section's inline block icon picker work here too (truck, lock, refresh-cw, headphones, shield, heart, star, leaf, check-circle, package, clock, globe, credit-card, award, zap, thumbs-up, phone, mail, map-pin, users, gift, tag, percent, flame, droplets, eye, wrench, coffee, sun, moon, umbrella, smile, crown, gem, wallet, store, shopping-bag, receipt, barcode, calendar, ruler, camera, medal, circle-check, info, alert-triangle, help-circle). - Alternatively, upload a custom image to
icon_image— the theme renders it whenicon_nameis blank. - In the theme editor, pick your Trust badge list under Content source.
TIP
Lucide icons inherit the section's color scheme via currentColor. Custom uploads render at their native colors — use transparent PNGs for best results.
Size chart
Size chart supports two shapes. Pick one when creating your metaobject definition. You can even mix both shapes in the same list — the theme detects which shape each entry uses and renders accordingly.
Shape A — Image-based size chart
For visual guides (e.g. a photo or diagram showing how to measure):
json
{
"name": "Display name (text) — e.g. 'Men's shirts'",
"image": "File — Image (size chart photo or diagram). Alternate: chart_image",
"alt": "Optional — alt text (text). Alternate: description"
}Setup steps:
- Shopify Admin → Settings → Custom data → Metaobject definitions → Add definition.
- Name it "Size chart — image". Shopify will set the handle to
size_chart_image. - Add fields:
name(Single line text),image(File — Image),alt(Single line text, optional). - Create entries (one per product category — e.g. "Men's shirts", "Women's dresses").
- In the theme editor, click your Size chart section → under Content source, pick your list.
Shape B — Table-based size chart
For dimensional grids (e.g. S / M / L with chest / waist / hip measurements):
json
{
"name": "Display name (text) — e.g. 'Women's dresses — EU sizes'",
"header_row": "Pipe-delimited header cells (text) — e.g. 'Size | Bust | Waist | Hip'",
"data_rows": "List of lines (text list) — each line is pipe-delimited cells — e.g. 'S | 36 | 28 | 38'"
}Setup steps:
- Shopify Admin → Settings → Custom data → Metaobject definitions → Add definition.
- Name it "Size chart — table". Shopify will set the handle to
size_chart_table. - Add fields:
name(Single line text),header_row(Single line text),data_rows(Single line text — list). - Create entries. Use the pipe character
|to separate cells within a row. - Example entry for "Women's dresses — EU sizes":
name:Women's dresses — EU sizesheader_row:Size | Bust (cm) | Waist (cm) | Hip (cm)data_rows(as individual list items):XS | 82 | 64 | 90S | 86 | 68 | 94M | 90 | 72 | 98L | 94 | 76 | 102XL | 98 | 80 | 106
The storefront renders these as a proper semantic <table> with <thead> and <tbody>, which works for screen readers and copy-paste.
TIP
You can mix both shapes in the same size-chart list. Table entries render as <table>; image entries render as <figure>. The theme detects per-entry which shape applies.
TIP
Prefer the table shape for sizing grids (clothing, shoes) — shoppers can scan measurements side-by-side. Use the image shape when your brand already ships a visual measurement guide PDF or photo.
Troubleshooting
- Section renders nothing on the storefront. The metaobject list has 0 entries AND no blocks are added to the section. Either add at least one entry to the metaobject list, or add blocks to the section.
- Section renders blocks when I expected metaobjects. The metaobject list setting is blank in the theme editor. Re-pick the metaobject definition under Content source.
- Field values look empty. The field name on your entries doesn't match what the theme looks for. Rename the field on your metaobject definition OR use one of the documented alternate names (e.g.
bodyinstead ofquotefor testimonials). - Size chart table cells don't split into columns. You're using a comma
,instead of the pipe|as the delimiter. Use|to separate columns — commas conflict with measurement values that include commas themselves. - Size chart renders an image when I wanted a table. The entry has an
imagefield populated AND noheader_row/data_rows. Remove the image or add the table fields — the theme picks table shape only when the table fields are set. - Trust badge shows a blank icon. Either
icon_nameisn't a valid Lucide name (see the list above) OR bothicon_nameandicon_imageare blank. Fix the name or upload an icon image.