Site management guide · Hero PDP edition · v0.1 draft
How to manage your hero product pages
A section-by-section reference for editing your hero product pages in Shopify. Built to mirror the live page exactly — section 3 here is section 3 on the rendered page.
v0.1 skeleton. This guide ships with the launch package. Right now it covers the structural pattern (every section, what drives it, where to edit it). Screenshots, exact field names, and walkthrough videos get added once the Hyper theme is live and metafields are populated. If something here looks empty, it will be filled in before delivery.
Before you start
Your hero product pages are the storytelling-rich pages for your top 20 products. They use a different page template than your standard product pages — more sections, more visual treatment, more places where the content comes from custom metafields rather than the default product fields.
This guide is organized in the same order as the page itself. Open the live page in one tab and this guide in another to make edits side-by-side.
- Native fields are the default Shopify fields (title, description, images) — you've already used these.
- Metafields are custom fields RevShift added so you can drive each section independently — they sit lower on the product edit page.
- Metaobjects are reusable content (like a sub-brand record) — edit once, used on every product that references it.
- Theme settings are page-level, edited in the theme customizer (not per-product).
Per-section reference
Section 01
Site header & navigation
The top bar visible on every page — your wordmark, the main menu, the language toggle.
What drives it
Main menu (English) and Menu principal (French) in Online Store → Navigation
Bilingual
Translate & Adapt Each menu link translates separately
Where to edit
Admin → Online Store → Navigation → pick the menu
- Open Admin → Online Store → Navigation.
- Click Main menu (or Menu principal for French).
- Drag-reorder, edit, or remove menu items. Save.
Screenshot: Navigation editor
Section 02
Hero (above the fold)
The first thing a visitor sees: product image stack on the left, sub-brand pill, italic-emphasis title, lede, B2B-friendly meta row, two CTAs.
Title
Native product title (use <em>...</em> around the words you want italicized for emphasis)
Lede
Metafield jessar.romance_lede
Image stack
Native product images (first image = hero)
Sub-brand pill
Metafield jessar.sub_brand (points to a metaobject record)
"Made for" tag
Metafield jessar.audience_tag — short label like "Retail · Gifting"
Bilingual
Translate & Adapt Title + lede + audience_tag
Where to edit
Admin → Products → [your product] → scroll to Metafields → "Hero" group
- Open the product in admin.
- Edit the Title field — wrap the words you want emphasized in
<em> tags.
- Scroll to Metafields → fill in Romance lede and Audience tag.
- Pick the right Sub-brand from the dropdown.
- For French: open Translate & Adapt from the product page (or the Apps menu) → translate the title and metafields.
Screenshot: Product edit page with metafield panel
Section 03
Story (the centerpiece)
The Caraway-style storytelling block — big italic-emphasis headline, two paragraphs of narrative, a wide lifestyle photo. Hero only
Headline
Metafield jessar.story_headline (use <em> for italic emphasis)
Body
Metafield jessar.story_body — rich text, 1–3 paragraphs
Lifestyle image
Metafield jessar.lifestyle_hero — file upload (16:9 photo recommended)
Bilingual
Translate & Adapt Headline + body translatable; image is shared
Visibility
This section only renders if jessar.is_hero is true. Standard products skip it entirely.
Where to edit
Admin → Products → [your product] → Metafields → "Story" group
Screenshot: Story metafield group
Section 04
Build (materials & craft)
A 4-column breakdown of what the product is made from — blade, handle, box, set composition (or whatever the equivalent is for your product).
Source
Metafield jessar.materials — JSON, structured
Shape
A list of { label, value, detail } objects. RevShift provides a helper UI in admin so you don't write JSON by hand.
Bilingual
Translatable Each label + value + detail translates in Translate & Adapt
Where to edit
Admin → Products → [your product] → Metafields → "Build" group → use the helper
Screenshot: Build helper UI (4-column form)
Section 05
Made for (use cases)
Three tiles — each is a use-case or occasion for the product. Eyebrow + headline + short body per tile.
Source
Metafield jessar.use_cases — JSON list
Shape
Up to 3 tiles. Each: eyebrow, headline, body, optional image.
Where to edit
Admin → Products → [your product] → Metafields → "Use cases"
Screenshot: Use cases helper
Section 06
Specifications panel
The dark inverse panel with the B2B sell-sheet data: SKU, UPC, master carton, blade material, customs code, plus a downloadable catalog PDF.
SKU / Weight / Dims
Native product fields (already in admin)
Master carton
Metafield jessar.qty_per_container
Inner carton
Metafield jessar.qty_per_package
Materials
Metafield jessar.materials (same as Build section above)
Care
Metafield jessar.care_instructions
Customs code
Metafield jessar.customs_code
Catalog PDF
Metafield jessar.catalog_pdf — file upload, PDF only
Where to edit
Admin → Products → [your product] → Metafields → "Specifications" group
Screenshot: Specs metafield group
Section 07
Sub-brand block
"Made by JS Gourmet" — a mini story about the sub-brand the product belongs to, with a link to the sub-brand page. Edit once, applies everywhere.
Source
Metaobject sub_brand records
Fields per record
name, tagline, narrative, accent_color, page_url, logo
Bilingual
Translatable Metaobject fields translate in Translate & Adapt
Why a metaobject
If you edit JS Gourmet's narrative once, every JS Gourmet product page updates automatically. No need to edit each product.
Where to edit
Admin → Content → Metaobjects → sub_brand → pick the sub-brand record
Linking to a product
On the product, set the jessar.sub_brand metafield to point at the right metaobject record.
- Admin → Content → Metaobjects → Sub-brand.
- Pick a record (e.g. JS Gourmet) or create a new one.
- Edit name, tagline, narrative, accent color. Save.
- Every product whose
jessar.sub_brand points to this record updates instantly.
Screenshot: Sub-brand metaobject editor
Section 08
Become a dealer (B2B CTA)
Centered call-to-action block inviting retailers to carry your products. Same copy across every hero PDP.
Source
Theme setting Hardcoded in the theme customizer (page-level, not per-product)
Bilingual
Translatable via theme customizer language switcher
Where to edit
Online Store → Themes → Customize → pick the Hero PDP template → "Become a dealer" section
Note
This is a single block shared by every hero PDP. Edit it once and it applies to all of them.
Screenshot: Theme customizer with dealer block
Section 09
Complete the set (cross-sell)
Four product cards under "Complete the set" — products you'd recommend alongside the current one.
Source
Metafield jessar.related_products — list of product references
Default behavior
If empty, falls back to Shopify's automated recommendations (algorithmic).
Recommended use
For your 20 hero products, manually pick 4 hand-curated cross-sells. Other products use the automatic fallback.
Where to edit
Admin → Products → [your product] → Metafields → "Related products" → pick up to 4 from the search
Screenshot: Related products picker
Section 10
Footer
Bottom of every page — wordmark, contact, policy links, social.
Wordmark + tagline
Theme setting Theme customizer → Footer
Footer links
Admin → Online Store → Navigation → Footer menu
Bilingual
Translatable Both menu + theme settings translate
Where to edit
Two places — text in theme customizer, links in Navigation
What's coming in the next version
- Full screenshots of each admin screen (waiting on the live theme + populated test data).
- Walkthrough video for the most common task: adding a new hero product end-to-end.
- FR-language version of this guide (built once EN is locked).
- Standard PDP companion guide (for non-hero products).
- Sub-brand metaobject quick-reference card (laminated, A4 — for printout if helpful).
- Translate & Adapt walkthrough — how the FR storefront stays in sync.
Behind the scenes — what RevShift built into your theme
Every modification we made to your Shopify theme is documented in two ways: an inline comment at the change site (RevShift - YYYY-MM-DD - What it is) and a per-file change log under /docs/shopify_code_changes/. This means any future developer can find every customization with a simple grep RevShift, understand what was changed and why, and revert any specific edit cleanly. We're keeping this discipline through delivery so you're never locked into us — the theme is always handoff-ready.