Hero and storytelling sections

Hero and storytelling sections carry your store’s narrative. They set first impressions, communicate brand, frame products in context. This chapter covers all 10 narrative sections.

Every section in this chapter shares Hyprism’s v7-chrome standard: each one has settings for transparent_bg, glass, glow, shadow, full_width, corner radius, visibility (hide on desktop/mobile), and dark/light pair. These are documented once in chapter 2 and chapter 3; this chapter focuses on what’s unique to each section.

6.1 Hero Image (hero)

The classic hero — a background image with composable content (heading, text, CTA buttons, icons, images) layered on top via atom blocks. Best as the first section of the home page.

The hero is block-first: there are no fixed heading / text / button text fields at section level. Add the atoms you want via the section’s block panel, then position them collectively with the content-placement settings.

Color scheme

Setting	What it does
🔧 Use global scheme	✅ Default on. When on, the hero follows the theme-wide color scheme (and the dark/light pair, when active).
🔧 Color scheme	Visible when the dark/light toggle is off and Use global is off. Pick one of the 5 schemes.
🔧 Color scheme (dark mode)	Visible when the dark/light toggle is on and Use global is off. ✅ Default Scheme 1.
🔧 Color scheme (light mode)	Visible when the dark/light toggle is on and Use global is off. ✅ Default Scheme 2.

Background media

Setting	What it does
🔧 Image	The hero background image. CSS background-size: cover anchored to centre — no anchor control, the image always cover-fills the section box.
🔧 Mobile image	Optional separate image used on viewports <750px. If empty, the desktop image is used on mobile too. Useful when the desktop image is landscape-cropped and a portrait crop reads better on phones.
🔧 Overlay opacity	Range 0–100%, step 5. ✅ Default 30%. Darkens the image for text readability.
🔧 Overlay color	✅ Default #000000 (black). The tint color mixed at the overlay opacity above.

Section height

Setting	What it does
🔧 Section height (desktop)	Range 20–100%, step 5, expressed as viewport-height percentage. ✅ Default 80% (= 80vh).
🔧 Section height (mobile)	Range 20–100%, step 5. ✅ Default 60% (= 60vh). Phones tend to want shorter heroes than desktop so the next section is visible without scrolling.
🔧 Full height	✅ Default off. When on, forces the section to exactly 100vh regardless of the two height sliders.
🔧 Mobile layout	Overlay (✅ default — content sits on top of the image, same as desktop), Above (content stacks above the image, image becomes a band below), or Below (content stacks below the image, image becomes a band above). Useful when desktop has a side-by-side feel but mobile readability needs the content lifted out of the image.

Content placement

Setting	What it does
🔧 Vertical position	Top / Center (✅ default) / Bottom — vertical anchor of the content stack inside the hero box.
🔧 Horizontal position	Left / Center (✅ default) / Right — horizontal anchor.

There is no separate mobile content-position — mobile follows the same anchors. Use Mobile layout = above/below if you need radically different content placement on phones.

Layout

Setting	What it does
🔧 Full width	✅ Default on. Hero spans edge-to-edge of the viewport. Turn off if you want the hero contained within the page-grid content column.
🔧 Hide on desktop	✅ Default off.
🔧 Hide on mobile	✅ Default off.

Effects

Setting	What it does
🔧 Transparent background	✅ Default off. When on, the section’s outer background (behind the image) becomes transparent so the page background shows through any gaps.
🔧 Glass	✅ Default off. When on, the content area gets a frosted-glass surface (reads the theme-wide Glass settings from §2.7).
🔧 Glass tint with accent	✅ Default off. When Glass is on, tints the frosted surface with the scheme accent.
🔧 Drop shadow	✅ Default off. Scales by the global Section shadow intensity.
🔧 Accent glow	✅ Default off. Scales by the global Section glow intensity.

💡 For Linux-rice impact, combine Glass = on with the Group block (set its surface to Glass too) so the content sits in a frosted panel over the background image. Combined with Full width = on and a strong wallpaper-style image, this is the signature Hyprism hero.

Blocks accepted

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

The atom blocks (heading/text/button/image/icon/group/spacer/divider) are documented in chapter 5a. The two grid blocks let you build a hero that shows recently-viewed or wishlisted products as the centrepiece (useful for personalised homepages).

Accessibility default

The hero rendering applies an alt-text fallback chain at the image level: image.alt | default: shop.name. Uploaded background images without alt-text still pass Lighthouse accessibility checks because the shop name is used as the fallback.

6.2 Hero Video (hero-video)

A hero with a video instead of a still image. Three playback modes for different storytelling needs. Like hero, this section is block-first — heading / text / button content comes from atom blocks layered on top of the video.

Playback modes

Schema value	Manual name	Behaviour	When to use
autoplay (✅ default)	Autoplay loop	Video plays muted on a loop. Visitor doesn’t interact.	Brand mood-piece (15–30s loops)
click-to-play	Click to play	Shows a poster image; click reveals the video and plays with sound	Product walkthroughs, brand stories, longer narratives
scroll-scrub	Scroll scrub	Video frames scroll-mapped — visitor scrolls down, video plays through. Sticky-pin during scrub.	Cinematic product reveals (perfume, watches, tech)

Color scheme

Same 4-setting pattern as Hero (see §6.1): Use global scheme + Color scheme + Color scheme (dark/light pair).

Video source

Setting	What it does
🔧 Video upload	Upload an MP4 or WebM (Shopify hosts videos).
🔧 External video URL	Alternatively, YouTube or Vimeo URL. Only works with Autoplay mode — embedded iframes can’t be scroll-scrubbed and can’t render their own poster reliably for click-to-play.
🔧 Poster image	Frame shown before video starts. Especially important for Click to play mode (it’s what the visitor sees and clicks).

Playback settings

Setting	What it does
🔧 Playback mode	Autoplay (✅ default) / Click to play / Scroll scrub.
🔧 Enable loop	✅ Default on. Looping makes sense for autoplay; for click-to-play it controls whether the video restarts when finished; for scroll-scrub it has no effect (the scrub bounds drive playback).
🔧 Enable video controls	✅ Default on. Show native browser controls (play/pause/scrub). Most useful for click-to-play.
🔧 Audio mode	Muted (✅ default — required for autoplay to work on most browsers) or With toggle (adds a sound-button overlay so visitors can unmute click-to-play / autoplay-loop videos).
🔧 Aspect ratio	Cover (✅ default — fill the section box, crop excess) / 16:9 / 21:9 / 4:3 / 9:16 (portrait) / 1:1 (square).
🔧 Scroll-scrub distance	Range 200–500%, step 20. ✅ Default 300. Schema unit is % but is consumed as vh in CSS — a value of 300 means scrubbing spans 300vh of scroll (three viewport-heights). Higher = slower playthrough.
🔧 Video start time	Range 0–30s, step 1. ✅ Default 0. Seconds offset where video begins playing (skip intro frames).
🔧 Video end time	Range 0–60s, step 1. ✅ Default 0 (no end clamp, play through). Seconds where video stops (skip outro frames).
🔧 Content fade mode	How the overlay content animates during scrub progress — see table below. ✅ Default Slide up.

Content fade modes (apply during scroll-scrub)

When scrubbing, the content overlay can animate out as the scrub progresses. These content-fade modes apply only in scroll-scrub playback mode — the setting is hidden in autoplay / click-to-play.

Schema value	Behaviour
none	Content stays put.
fade	Opacity 1 → 0. ⚠️ Note: while fading, any glass-surface descendants visibly lose their backdrop-filter mid-animation (a browser compositor quirk, Rule 273). Prefer slide-up/slide-side/scale-down when you have glass content blocks.
slide-up (✅ default)	Content slides upward off-screen (translateY up to −60vh). Clean — no glass artefacts.
slide-side	Content slides left or right; direction follows the content horizontal-position alignment.
scale-down	Content scales (1 → 0.4) + fades — has the same glass-artefact caveat as fade.

Overlay (dim for text readability)

Setting	What it does
🔧 Overlay opacity	Range 0–100%, step 5. ✅ Default 30%. Darkens the video for text readability.
🔧 Overlay color	✅ Default #000000 (black). Tint color mixed at the overlay opacity above.

Height

Setting	What it does
🔧 Section height (desktop)	Range 20–100, step 5, expressed as viewport-height percentage. ✅ Default 80. Hidden when playback_mode = scroll-scrub (scrub mode uses its own height system).
🔧 Full height	✅ Default off. When on, forces the section to exactly 100vh regardless of the height slider. Only takes effect when aspect ratio = cover and playback_mode ≠ scroll-scrub.

Content placement

Setting	What it does
🔧 Vertical position	Top / Center (✅ default) / Bottom.
🔧 Horizontal position	Left / Center (✅ default) / Right.

Layout

Setting	What it does
🔧 Full width	✅ Default on.
🔧 Hide on desktop	✅ Default off.
🔧 Hide on mobile	✅ Default off.

Mobile overrides

Setting	What it does
🔧 Custom mobile settings	✅ Default off. Master gate — when off, mobile uses the desktop height/aspect-ratio/etc directly; when on, the overrides below are honoured.
🔧 Section height (mobile)	Range 20–100, step 5. ✅ Default 60.
🔧 Full width (mobile)	✅ Default on. Independent of desktop full-width.
🔧 Aspect ratio (mobile)	Override for mobile. ✅ Default blank (= use desktop value). Options match desktop aspect ratios. 9:16 is ideal for autoplay on mobile.
🔧 Vertical position (mobile)	Top / Center (✅ default) / Bottom. Mobile-specific vertical anchor (horizontal mobile position follows desktop).
🔧 Mobile stack mode	Overlay (✅ default — content over video) / Above (content stacks ABOVE the video band) / Below (content stacks BELOW the video band).

⚠️ iOS Safari + scroll-scrub can stutter on older hardware. We accept this trade-off for the cinematic effect; if you want maximum smoothness on mobile, use Autoplay mode and reserve Scroll scrub for desktop visitors.

Effects

Setting	What it does
🔧 Glass	✅ Default off. Apply glass surface to the content overlay (frosted text panel).
🔧 Glass tint with accent	✅ Default off. Tints the glass overlay with the scheme accent. Visible when Glass is on.
🔧 Drop shadow	✅ Default off. Scaled by global Section shadow intensity.
🔧 Accent glow	✅ Default off. Scaled by global Section glow intensity.
🔧 Glass shine (enable_media_shine)	✅ Default off. Adds the button-style top-highlight light-bar over the video media. pointer-events:none so the video controls stay usable.

Blocks accepted

heading · text · button · image · icon · group · spacer · divider

(No video block here — the section IS the video. No product-grid blocks either; for product-grid-on-video composition use a regular hero with a recently-viewed-grid or wishlist-grid block instead.)

When to use Hero Video

• ✅ Brand-led stores (fashion, luxury, beauty) — moving imagery sells the lifestyle
• ✅ Product-walkthrough heroes — show the product in action
• ⚠️ Performance — video files are heavy. Compress to ≤2MB for autoplay loops, ≤10MB for click-to-play. Use H.264 (MP4) or VP9 (WebM).

6.3 Pretext Banner (pretext-banner)

A unique Hyprism section: an animated decorative band that sits above or below content, displaying ASCII art, binary patterns, or scrambling text. Four animation modes × three image-overlay modes = 12 visual combinations.

Animation modes

Mode	Behavior	When to use
Static marquee	Text scrolls horizontally across the band, alternating row directions	Announcements, taglines, brand mottos
Matrix rain	Falling characters in green-on-black “Matrix” style (canvas-based)	Tech / gaming / cyberpunk brands
Jumping letters	Letters bounce in a sinusoidal wave pattern	Playful brands, kids’ products
Scramble reveal	Letters cycle randomly then lock into a target string (also has a Loop toggle for endless reveal/dissolve)	Product launches, hover-able marketing copy

Image overlay modes (combine with any animation mode)

Mode	Behavior
Overlay on top	Image sits over the animation, image is fully opaque
Carved out	The animation continues, but is “cut out” in the shape of the image — like the image is masked through the animation
Char compose	The image is reconstructed in ASCII characters from the animation pool — your logo appears as a density-mapped character grid

The most dramatic combination: Scramble reveal + Char compose — the band starts as random ASCII noise; over a few seconds, characters lock into place forming a recognizable image (your logo). Then it dissolves and starts over. Stunning above a hero.

Content source

Setting	What it does
🔧 Content source	Custom text / Binary digits / ASCII / Hexadecimal / Random alphanumeric. (Matrix-rain mode uses its own Katakana pool internally.)
🔧 Custom text	(When source = custom text) The actual string to display

Animation-specific settings

Setting	What it does
🔧 Animation mode	Static marquee / Matrix rain (✅ default) / Jumping letters / Scramble reveal.
🔧 Scramble loop	Visible for Scramble reveal mode. ✅ Default on. Endless reveal/dissolve cycle.
🔧 Scramble fill	Visible for Scramble reveal mode. ✅ Default off. Position mode (off — target string placed at text-position anchor) vs Fill mode (on — target string repeats across entire grid in batches).
🔧 Text position	Where the locked-in text sits when scramble-reveal completes. 9-position anchor. ✅ Default Center.
🔧 Animation speed	Range 10–100, step 5. ✅ Default 50. Frame rate / cycle speed (varies per mode).
🔧 Font size	Range 10–32px, step 1. ✅ Default 14px. For canvas + DOM-based modes (matrix, scramble, jumping).

Image overlay settings (when an Overlay image is uploaded)

Setting	What it does
🔧 Overlay image	Image upload — used by all 3 image modes.
🔧 Image mode	Overlay on top (✅ default — image sits over animation, fully opaque) / Carved out (animation cut out in the image’s shape via SVG mask) / Char compose (image reconstructed in ASCII characters from the animation pool). No None value — the entire image-overlay row hides if no image is uploaded.
🔧 Image position	9-position anchor (top-left, top-center, top-right, middle-left, center (✅ default), middle-right, bottom-left, bottom-center, bottom-right).
🔧 Image size	Range 10–100%, step 5. ✅ Default 50% of section dimensions.
🔧 Image color compose	Visible for Char-compose mode. ✅ Default off. Opt-in to use per-pixel RGB colors from the image instead of monochrome accent.
🔧 Background char opacity	Visible for Char-compose mode. Range 0–60%, step 5. ✅ Default 15%. Opacity of “background hum” characters outside the silhouette.

Content placement

Setting	What it does
🔧 Content position	9-position anchor for the animation band itself. ✅ Default Center.

Layout

Setting	What it does
🔧 Height	Range 40–1040px, step 10. ✅ Default 120px.
🔧 Full width	✅ Default on.
🔧 Top fade	Range 0–80%, step 5. ✅ Default 0%. Gradient mask that fades the animation in from the top edge (mirror of Bottom fade).
🔧 Bottom fade	Range 0–80%, step 5. ✅ Default 0%. Gradient mask that fades the animation to invisible toward the bottom edge — useful when the banner sits directly above a content section and you want a soft transition.
🔧 Hide on desktop	✅ Default off.
🔧 Hide on mobile	✅ Default off.

Mobile overrides

Setting	What it does
🔧 Custom mobile settings	✅ Default off. Master gate.
🔧 Section height (mobile)	Range 40–600px, step 10. ✅ Default 80px.
🔧 Full width (mobile)	✅ Default on.
🔧 Font size (mobile)	Range 6–32px, step 1. ✅ Default 14px.

Effects

Setting	What it does
🔧 Transparent background	✅ Default off.
🔧 Glass	✅ Default off.
🔧 Glass tint with accent	✅ Default off. When Glass is on, tints with the scheme accent.
🔧 Drop shadow	✅ Default off.
🔧 Accent glow	✅ Default off.

Blocks accepted

heading · text · button · image · icon · group · spacer · divider · @app

Tips

• 💡 Use as a between-section divider to visually break up long pages (e.g., between hero and product grid).
• 💡 The animation runs on requestAnimationFrame.
• ✅ Mobile: keep font-size small (12–18px) — the band looks better dense than sparse.
• 💡 The most dramatic combination: Scramble reveal + Char compose with loop ON — animation starts as random ASCII noise, locks into a recognizable image of your logo over a few seconds, then dissolves and starts over. Stunning above a hero.

6.4 Slideshow (slideshow)

A horizontal scroll-snap carousel of full-bleed slides. Each slide is a slide block that can contain heading, text, button, image background — the same compositional flexibility as hero. Implementation uses the Horizon scroll-snap track pattern (Rule 170) — native swipe on mobile, no opacity-toggle gymnastics.

Size

Setting	What it does
🔧 Section height (desktop)	Range 30–100vh, step 5. ✅ Default 70vh.
🔧 Section height (mobile)	Range 30–100vh, step 5. ✅ Default 60vh.

Autoplay

Setting	What it does
🔧 Auto-rotate	✅ Default off. When on, slides advance automatically.
🔧 Rotation interval	Range 3–15s, step 1. ✅ Default 6s. Time between auto-advances.

Navigation

Setting	What it does
🔧 Navigation style	Single select: Both (arrows + dots, ✅ default) / Arrows only / Dots only / None. There are no separate “Show arrows” / “Show dots” checkboxes — they live behind this one select.
🔧 Arrow shape	Circle (✅ default) / Rounded / Square / Plain. On mobile the shape is overridden to a plain chevron (Rule 210) for readability over product images.
🔧 Arrow icon	Chevron (✅ default) / Angle / Arrow / Caret.

Section style (effects)

Setting	What it does
🔧 Transparent background	✅ Default off.
🔧 Glass	✅ Default off.
🔧 Drop shadow	✅ Default off. Scales by global Section shadow intensity.
🔧 Accent glow	✅ Default off. Scales by global Section glow intensity.

Color scheme

Same 4-setting pattern as §6.1: Use global scheme + Color scheme + dark/light pair.

Section sizing

Setting	What it does
🔧 Full width	✅ Default on.
🔧 Full width on mobile	✅ Default off. Independent of desktop full-width.
🔧 Padding top	Range 0–200px, step 4. ✅ Default 0.
🔧 Padding bottom	Range 0–200px, step 4. ✅ Default 0.

Radius

Setting	What it does
🔧 Use global radius	✅ Default on. When off, the slider below applies.
🔧 Section corner radius	Range 0–48px, step 2. ✅ Default 0.

Visibility

Setting	What it does
🔧 Hide on desktop	✅ Default off.
🔧 Hide on mobile	✅ Default off.

Per-slide settings (Slide block)

Each slide block accepts arbitrary content (heading, text, button, image, group). So each slide can have its own background image, overlay tint, content position, and content background mode — documented in the slide block reference.

Blocks accepted

slide · group · heading · text · button · image

When to use

✅ Use slideshow as your home page hero when you have 3–5 strong product or campaign images to rotate. Avoid for one-off content (use a static hero).

6.5 Image with Text (image-with-text)

A side-by-side layout: image on one side, content on the other. Classic “feature highlight” or “about us snippet”. The section itself only provides the side-by-side scaffolding plus the v7-chrome (effects, color scheme, layout, radius, visibility) — image and text content come from blocks.

Section-specific settings

Setting	What it does
🔧 Image position	Left (✅ default) or Right — which side the image sits on. On mobile the layout auto-stacks vertically.
🔧 Image width	Range 30–70%, step 5. ✅ Default 50%. The portion of the row width taken by the image column; the remainder goes to content.
🔧 Gap between image and content	Range 0–120px, step 4. ✅ Default 48px.

Effects + chrome + color scheme

The standard v7 chrome settings — Transparent background / Glass / Glass tint / Drop shadow / Accent glow / Use global scheme + dark-light pair / Full width / Padding top + bottom / Radius / Hide on mobile/desktop. See chapter §2 and §3 for canonical descriptions.

Blocks accepted

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

Drop an image block (or video) as the picture side; use heading + text + button (often inside a group block for surface treatment) as the content side. The grid blocks let you put a personalised product strip next to a marketing image.

6.6 Multicolumn (multicolumn)

A horizontal row of equal columns, each typically holding an icon or image + heading + text. Used for feature highlights, value propositions, “as-seen-in” press logos.

Column geometry

Setting	What it does
🔧 Columns (desktop)	Range 1–6, step 1. ✅ Default 3.
🔧 Columns (tablet)	Range 1–4, step 1. ✅ Default 2. Independent breakpoint for tablet viewports.
🔧 Columns (mobile)	Range 1–3, step 1. ✅ Default 1.
🔧 Gap	Range 0–100px, step 4. ✅ Default 24px.
🔧 Content alignment	Left / Center (✅ default) / Right — text alignment inside each column.

Effects + chrome + color scheme

Standard v7 chrome (see chapter §2 and §3).

Blocks accepted

heading · text · group

For richer columns (icon + heading + text + button), use a group block as the column container — it accepts nested atom blocks for the column’s internal composition.

Common patterns

• “Why us” row — 3 or 4 columns with icon + heading (“Free shipping”) + 1-line description (each column = a group block).
• “As seen in” row — 4–6 columns each with a press-logo image, content_alignment=center.
• Numbered process — 3 columns each starting with “01.”, “02.”, “03.” headings inside group blocks.

6.7 Rich Text (rich-text)

A pure text-content section: heading + paragraph + optional CTA buttons. Wider than image-with-text — the content column can stretch up to 2400px.

Section-specific settings

Setting	What it does
🔧 Text alignment	Left / Center (✅ default) / Right.
🔧 Content width	Range 400–2400px, step 40. ✅ Default 720px. Maximum width of the text column.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

Compose freely. Use for between-section narrative — “Our story”, “The collection”, a paragraph that breaks up product grids with brand voice.

6.8 Gallery (gallery)

A grid or carousel of images that opens into a lightbox when clicked. The section itself is a thin @theme container — all the gallery-specific UI (grid columns, image ratio, hover zoom, lightbox, carousel arrows) lives on the gallery-grid BLOCK that you drop inside.

Section-specific settings

Setting	What it does
🔧 Header alignment	Left / Center (✅ default) / Right — alignment of heading/text blocks sitting alongside the gallery-grid block.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 32px. Gap between stacked content blocks (heading on top of gallery, etc.).

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

gallery-grid · heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

Add a gallery-grid block as the centrepiece — that’s where columns, image ratio, lightbox, carousel mode, hover-zoom settings live. The other blocks let you wrap the gallery with a heading, intro paragraph, or CTA below.

Common patterns

• Lookbook — 6–12 lifestyle images, 1:1 aspect, grid mode, hover zoom on
• Process docs — 4–8 wide images (16:9), grid mode, with captions
• Press / events — carousel mode for chronological scrolling

6.9 Video (video)

A standalone video section (vs Hero Video, which is a hero-with-video). The section is a thin @theme wrapper — the actual video-playback configuration lives on the video block.

Section-specific settings

Setting	What it does
🔧 Max width	Range 400–1600px, step 20. ✅ Default 1100px. Maximum width of the video block.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px. Gap between stacked blocks (heading + video + CTA).
🔧 Content alignment	Left / Center (✅ default) / Right.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

video · heading · text · button · group · image · icon · divider · spacer

The video block carries the actual upload / external URL / aspect ratio / autoplay / loop / muted / controls settings. Wrap with heading + text + button blocks to add context above or below.

6.10 Map (map)

Embed a Google Map showing your store’s location plus an info-card with address, hours, and a Get-directions CTA. Like Gallery and Video, the section is a thin @theme wrapper — the actual map configuration (address, zoom, info-card position + content) lives on the store-map block. See §6.11 for the block’s full settings.

Section-specific settings

Setting	What it does
🔧 Max width	Range 400–1600px, step 20. ✅ Default 1200px.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px.
🔧 Content alignment	Left / Center (✅ default) / Right.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

store-map · heading · text · button · group · image · icon · divider · spacer

SEO

The store-map block emits a LocalBusiness JSON-LD schema with the address, geo coordinates (resolved from the address), opening hours, phone, and URL — making this section SEO-valuable for local-business stores. See chapter 13 — SEO and GEO.

6.11 Store Map block (store-map)

The block rendered inside the Map section (6.10). You add a Store Map block (or multiple if you have multiple locations) plus optional heading/text/button blocks around it.

Settings — map

Setting	What it does
🔧 Map address	The address to centre this map instance on. Geocoded by Shopify’s Maps API.
🔧 Zoom	Range 8–20, step 1. ✅ Default 14. Map zoom level (8 = country, 14 = city, 20 = building).
🔧 Map height	Range 200–800px, step 25. ✅ Default 400px.
🔧 Card radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Map invert	Auto (✅ default — follows dark mode) / On (always inverted) / Off (always normal).

Settings — info card

Setting	What it does
🔧 Show info card	✅ Default off.
🔧 Info position	Top-left / Top-right / Bottom-left (✅ default) / Bottom-right (4 overlay corners) + Left / Right (sibling card beside the map). No “top” / “bottom” sibling positions in the current schema.
🔧 Info align	Left / Center (✅ default) / Right. Text alignment inside card.
🔧 Info card style	Glass (✅ default) / Solid. No Transparent option — info needs a backplate for legibility over the map.
🔧 Info address	Rich-text address. ✅ Default <p>123 Main St…</p>.
🔧 Info hours	Rich-text opening hours.
🔧 Info phone	Plain-text phone number.

Settings — directions button

Setting	What it does
🔧 Show directions button	✅ Default on. Auto-generates a Google Maps directions link.
🔧 Directions button text	✅ Default Get directions.
🔧 Directions button style	Primary (✅ default) / Secondary / Ghost / Outline.

Settings — effects + scheme

Setting	What it does
🔧 Drop shadow	✅ Default off.
🔧 Accent glow	✅ Default off.
🔧 Custom color scheme	✅ Default off. When on, exposes scheme picker + dark/light pair.

Multiple-location pattern

For stores with multiple physical locations, add multiple Store Map blocks inside one Map section. Each block has its own address + info-card.

6.12 Video block (video)

A universal video-embed block — distinct from the Video section (6.9). Use the block when you want to embed a video INSIDE another section (e.g., a video in a multicolumn cell, or alongside text in image-with-text), rather than have video as its own full section.

Settings — source

Setting	What it does
🔧 Video	Upload a Shopify-hosted video (MP4/WebM)
🔧 Video URL	Alternatively, YouTube or Vimeo URL (embedded as iframe)
🔧 Poster image	Image shown before video plays (especially important for upload mode)

Settings — playback

Setting	What it does
🔧 Autoplay	Plays automatically on page load (requires Muted on per browser policy)
🔧 Loop	Repeats endlessly
🔧 Muted	Plays without sound (required for autoplay)
🔧 Show controls	Display video player controls (play/pause/scrub)

Settings — layout

Setting	What it does
🔧 Aspect ratio	Auto (✅ default — natural) / 16/9 / 21/9 / 4/3 / 1/1 / 9/16 / 3/4.
🔧 Alignment	Inherit (✅ default) / Left / Center / Right.
🔧 Max width	Range 0–2000px, step 20. ✅ Default 0 (= follow parent).
🔧 Corner radius	Range 0–64px, step 2. ✅ Default 0.
🔧 Margin top	Range 0–200px, step 4. ✅ Default 0.
🔧 Margin bottom	Range 0–200px, step 4. ✅ Default 0.

Settings — effects

Setting	What it does
🔧 Surface (video_surface)	None (✅ default) / Transparent / Glass — a frosted panel behind the video (useful for alpha/transparent videos).
🔧 Shine (enable_shine)	✅ Default off. Light-band shine across the video surface.
🔧 Drop shadow	✅ Default off.
🔧 Accent glow	✅ Default off.

When to use Video block (vs Video section)

• ✅ Block: when video sits inside another section’s content (e.g., next to a heading in image-with-text)
• ✅ Section: when video is the entire section content (full-width, hero-like)
• Use the block for inline editorial videos, product demos alongside text, or videos in multicolumn cells.

6.13 Slide block (slide)

The individual slide inside the Slideshow section (§6.4). Each slide is a self-contained mini-hero with its own image/video, overlay, content placement, and nested atom blocks.

Settings — background media

Setting	What it does
🔧 Transparent media	✅ Default off. When on, the slide doesn’t render its own background — the slide’s background-image setting is ignored and the slideshow’s section background shows through.
🔧 Image	The slide’s background image.
🔧 Video	Optional MP4 — uploads via Shopify Files.
🔧 Image position X	Range 0–100%, step 5. ✅ Default 50%. Horizontal anchor when image is cropped.
🔧 Image position Y	Range 0–100%, step 5. ✅ Default 50%. Vertical anchor.
🔧 Overlay opacity	Range 0–100%, step 5. ✅ Default 30%. Dim layer over the image for text readability.

Settings — content placement

Setting	What it does
🔧 Vertical position	Top / Center (✅ default) / Bottom.
🔧 Horizontal position	Left / Center (✅ default) / Right.

Settings — content card

Setting	What it does
🔧 Glass	✅ Default off. Frosted-glass surface behind the content cluster.
🔧 Glass tint	✅ Default off. Accent-tints the glass.
🔧 Content corner radius	Range 0–32px, step 2. ✅ Default 0.
🔧 Content padding	Range 0–64px, step 4. ✅ Default 24px.
🔧 Content full width	✅ Default off. When on, the content cluster spans the full slide width and Content max width is ignored.
🔧 Content max width	Range 240–1200px, step 20. ✅ Default 640px.
🔧 Content gap	Range 0–48px, step 2. ✅ Default 16px. Gap between stacked blocks inside.

Accepted nested blocks

group · heading · text · button · image

6.14 Gallery Grid block (gallery-grid)

The grid/carousel layer inside the Gallery section (§6.8). Contains image child-blocks.

Settings — layout

Setting	What it does
🔧 Layout	Grid (✅ default) or Carousel (single-row horizontal scroll).
🔧 Columns	Range 1–6, step 1. ✅ Default 3.
🔧 Columns (mobile)	1 or 2 (✅ default).
🔧 Gap	Range 0–40px, step 2. ✅ Default 16px.
🔧 Image aspect ratio	1/1 (✅ default) / 4/3 / 3/4 / 3/2 / 2/3 / 16/9 / 9/16 / Mixed (each image uses its natural aspect).
🔧 Item corner radius	Range 0–32px, step 2. ✅ Default 8px.
🔧 Enable zoom on hover	✅ Default on. Scales image subtly on hover.
🔧 Caption position	Below / Overlay / Hover (✅ default — visible on hover) / None.
🔧 Enable lightbox	✅ Default on. Click an image to open it full-screen with arrow navigation.

Settings — item style

Setting	What it does
🔧 Item glass	✅ Default off.
🔧 Item glow	✅ Default off.
🔧 Item shadow	✅ Default off.

Settings — carousel (when Layout = Carousel)

Setting	What it does
🔧 Enable loop	✅ Default off.
🔧 Autoplay	✅ Default off.
🔧 Autoplay interval	Range 3–15s, step 1. ✅ Default 6s.
🔧 Arrow icon	Chevron (✅ default) / Arrow / Caret.
🔧 Arrow shape	Circle (✅ default) / Rounded / Square / Plain.

Accepted child blocks

image only. Each image becomes one gallery item.

Next

Chapter 7 — Product sections — the product page architecture and its 12 dedicated blocks.