Premium signature sections

These sections are Hyprism’s distinctive features — the parts that separate the theme from generic Shopify themes. They’ve each received careful design, performance, and a11y treatment.

• Hotspot Image — interactive shopping experience layered on a single image
• Bento Grid — modern bento-style content layout with 6 tile types
• Quick View — modal product preview with variant picker and ATC
• Sticky Product Bar — mobile-first persistent add-to-cart bar
• Collection switcher — an editorial product grid that swaps between collections
• Bento Hero — a hero-scale bento grid whose every cell is a free block slot
• Arc gallery — image cards laid out along the arc of a circle
• Technical media treatments — leader-line callouts and dimension lines on an image
• Shader logo — a live WebGL gradient poured into the silhouette of your logo

⚠️ What happened to the motion family

Earlier versions of this manual documented six scroll- and cursor-reactive sections here — Scrollytelling reveal, Kinetic headline, Scroll parallax scene, Drag gallery, Cursor FX and Horizontal lookbook — plus a Shader Background section.

Those sections no longer exist. Three of their capabilities survived, as blocks, which is the more useful shape: a block goes into any section that accepts one, instead of being a whole section of its own.

Was a section	Is now
Kinetic headline	the Kinetic heading block — §5a.10
Kinetic headline (Scramble mode)	the Scramble heading block — §5a.11
Horizontal lookbook	the Arc gallery + Arc image blocks — §9.7 below
Shader Background	the Shader logo block (§9.9) and the Shader surface on the Shape block (§5a.13)
Scrollytelling reveal · Scroll parallax · Drag gallery · Cursor FX	removed

The four that were removed were removed on purpose. They were built for image-led fashion and lifestyle storytelling; they cost a great deal of JavaScript and a great deal of settings surface, and neither is what a technical store needs on the way to a specification table.

9.1 Hotspot Image (hotspot-image)

The Hotspot Image is an image with interactive dots placed on it. Click or hover a dot, and a card appears showing a product or custom content. Used for shoppable lookbooks, room/scene merchandising, “shop the look” lifestyle imagery.

Available on: any template except password.

Section-specific settings

Setting	What it does
🔧 Image	The background image. Typically a lifestyle/scene photo with multiple products visible.
🔧 Section heading	Optional heading shown above the image.
🔧 Section text	Optional rich-text paragraph shown below the heading (and above the image).
🔧 Overlay opacity	Range 0–80%, step 5. ✅ Default 0%. Dim the image to make hotspots pop visually.
🔧 Image corner radius	Range 0–48px, step 2. ✅ Default 0.
🔧 Image inset	Range 0–80px, step 4. ✅ Default 48px. Padding around the image inside the section bounds. When 0, the image extends to section edges and its corner radius coalesces with the section radius (Rule 215).
🔧 Glass shine (enable_image_shine)	✅ Default off. Adds the button-style top-highlight light-bar over the main image (follows the image’s rounded corners). pointer-events:none so the hotspot dots stay clickable.

There is no “Aspect ratio” setting on the section — the image’s natural ratio is used directly. There is no “default dot style” or “default card position” on the section either; both are per-hotspot-block settings (see below).

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

Only hotspot · hotspot-hero · tech-callout · tech-dimension.

The hotspot block is the interactive dot (one per hotspot). The hotspot-hero block is a stationary content overlay anchored to one of 9 positions on the image — see below. Both blocks have their own settings tables; here’s the highlights.

Hotspot block (hotspot)

Each hotspot is a dot placed on the image with x/y coordinates as percentages.

Position

Setting	What it does
🔧 X position	Range 0–100%, step 1. ✅ Default 50%. Horizontal position.
🔧 Y position	Range 0–100%, step 1. ✅ Default 50%. Vertical position.

Content (shown inside the card when the dot is clicked/hovered)

Setting	What it does
🔧 Product	Optional product picker — populates the card with product details.
🔧 Custom heading	Used when no product is picked.
🔧 Custom text	Textarea. Body text shown in the card.
🔧 Link	URL the card content links to.
🔧 Link text	✅ Default Learn more. Visible CTA text inside the card.
🔧 Text alignment	Left (✅ default) / Center / Right.
🔧 Heading font	Heading (✅ default) / Subheading / Body / Accent.

Dot appearance

Setting	What it does
🔧 Dot shape	Circle (✅ default) / Square / Rounded square.
🔧 Dot color	Accent (✅ default) / Bg (scheme background) / Custom.
🔧 Dot custom color	✅ Default #6366f1. Visible when dot color = Custom.
🔧 Dot size	Range 16–56px, step 2. ✅ Default 32px.
🔧 Dot glass	✅ Default off. Frosted-glass surface on the dot.
🔧 Dot pulse	✅ Default on. Animated pulse ring around the dot.
🔧 Dot numbered	✅ Default off. Renders a sequential number (1, 2, 3…) inside each dot.

Card behaviour

Setting	What it does
🔧 Card position	Auto (✅ default — smart position based on dot zone) / Top / Bottom / Left / Right / Top-left / Top-right / Bottom-left / Bottom-right.
🔧 Card open effect	Fade (✅ default) / Slide (24px directional, matches position) / Scale (0.8 → 1) / None (instant).
🔧 Open on hover	✅ Default off. When on, card opens on hover (desktop). Mobile is always click.
🔧 Card show quick add	✅ Default on. (For product cards) Display “Add to cart” inside the hotspot card.
🔧 Show colour swatches (card_show_swatches)	✅ Default off. (For product cards) Shows up to 5 colour dots on the hotspot card when the product has a Color / Colour / Farbe option. A +N chip indicates additional colours beyond the first five.
🔧 Card glass	✅ Default off.
🔧 Tint glass with accent (card_glass_tint)	✅ Default off. Tints the hotspot card’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Card glass is on.
🔧 Card glow	✅ Default off.
🔧 Card shadow	✅ Default off.
🔧 Card close-button shape	Circle (✅ default) / Rounded / Square / Bare (no backplate) / None (no close button — Esc + outside-click only).

Mobile experience

On mobile, the card-position settings are ignored — the card always opens as a bottom-sheet from below (Apple Maps, modern banking apps pattern). Visitor taps dot → card slides up → tap outside or close-button to dismiss.

Hotspot-hero block (hotspot-hero)

A stationary content overlay anchored to one of 9 positions on the image — like a built-in hero card layered on the hotspot image. Compose with nested atom blocks (heading + text + button + icon).

Setting	What it does
🔧 Position	9 anchor points: top-left / top-center / top-right / center-left / center / center-right / bottom-left (✅ default) / bottom-center / bottom-right.
🔧 Max width	Range 200–800px, step 20. ✅ Default 480px.
🔧 Text alignment	Inherit (✅ default) / Left / Center / Right.
🔧 Background	Transparent / Scrim (✅ default — gradient scrim) / Glass / Scheme.
🔧 Corner radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Accent glow	✅ Default off.
🔧 Drop shadow	✅ Default off.
🔧 Use global scheme	✅ Default on.
🔧 Color scheme	Visible when use_global_scheme is off.
🔧 Mobile layout	Overlay (content over image) / Above (content stacks above the image band) / Below (✅ default).

Accepted nested blocks: heading · text · button · icon · image · group · divider · spacer

This is what differentiates Hotspot Image from a plain image — you can compose a complete hero experience (hero content + product hotspots) on one image, all in one section.

Common use cases

• ✅ Lookbook page — model wearing 5 products; click hotspots to shop each piece
• ✅ “Shop the room” interior decor — a room photo with chair/lamp/rug as hotspots
• ✅ Editorial home page hero — hero card with brand statement + 3 featured products as hotspots
• ✅ Holiday gift guide — group of products in scene with hotspots labeled “$50–$100”, “$100–$200”

9.2 Bento Grid (bento-grid)

Modern bento-box-style layout — a flexible grid where each tile can span multiple cells. Used for visual landing pages, brand pages, “feature highlights” with rich visual hierarchy.

Available on: any template except password.

Grid geometry

Setting	What it does
🔧 Columns (desktop)	Range 4–12, step 1. ✅ Default 6.
🔧 Columns (mobile)	Range 1–4, step 1. ✅ Default 2.
🔧 Grid gap	Range 0–32px, step 2. ✅ Default 12px. Space between tiles.
🔧 Tile min-height	Range 120–400px, step 10. ✅ Default 220px. Base row height — each tile occupies at least this height.
🔧 Content alignment	Left (✅ default) / Center / Right — default text alignment inside each tile (per-tile override possible).
🔧 Lock aspect ratio	✅ Default off. When on, each tile’s aspect = col-span : row-span (e.g. 2×2 = square, 4×2 = wide rectangle) — keeps proportional rendering across viewports independent of tile_min_height.
🔧 Section padding X	Range 0–80px, step 4. ✅ Default 24px. Section’s own side-padding. Set to 0 for edge-to-edge tiles.

There is no “Section heading” setting on the section — add a heading block above the bento-tile blocks if you want a heading.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

bento-tile only — up to 24 tiles per section. Each tile gets its own configuration (tile type, col-span, row-span, content, surface, hover effect, etc.) — see the bento-tile block reference in Phase 3.

Bento-tile block (bento-tile)

A single tile inside the Bento Grid (above). Each tile picks one of 6 content types + sets its own grid spans + styling.

Content type + content source

Setting	What it does
🔧 Tile type	Image (✅ default) / Product / Collection / Video / Content (nested @theme blocks) / Blank (pure surface tile).
🔧 Image	Image picker (image type).
🔧 Image link	URL the image links to (image type).
🔧 Image overlay text	Optional text overlaid on the image (image type).
🔧 Product	Product picker (product type).
🔧 Show quick add	✅ Default on (product type).
🔧 Collection	Collection picker (collection type).
🔧 Show count	✅ Default off (collection type).
🔧 Video	Shopify-hosted video upload (video type).
🔧 Video URL	YouTube / Vimeo URL (video type, alternative to upload).
🔧 Video autoplay	✅ Default on (video type).

Spans (desktop)

Setting	What it does
🔧 Col span (desktop)	Range 1–12, step 1. ✅ Default 2. Number of grid columns this tile spans.
🔧 Row span (desktop)	Range 1–6, step 1. ✅ Default 1. Number of grid rows.

Spans (mobile)

Setting	What it does
🔧 Col span (mobile)	Range 1–4, step 1. ✅ Default 1.
🔧 Row span (mobile)	Range 1–4, step 1. ✅ Default 1.

Style

Setting	What it does
🔧 Tile surface	Solid (✅ default) / Glass / Transparent / Image-fill (image fills tile, content overlays with scrim).
🔧 Overlay text colour (image_fill_text)	Image-fill only. Auto (✅ default — white text + a dark scrim for legibility over any photo) / Color scheme (the tile follows the scheme text colours — best over light or controlled imagery).
🔧 Tint glass with accent (tile_glass_tint)	✅ Default off. Tints the tile’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Tile surface = Glass.
🔧 Tile corner radius	Range 0–48px, step 2. ✅ Default 16px.
🔧 Tile hover effect	None / Lift (✅ default) / Zoom / Tilt (3D perspective, cursor-following) / Glow-pulse.
🔧 Tile glow	✅ Default off.
🔧 Tile shadow	✅ Default off.

Accepted nested blocks (when tile type = Content)

Only bento-tile.

Common use cases

• Brand landing page — 1 image-hero tile + 3 collection tiles + 1 video tile + 1 content tile
• Holiday campaign — One big featured-product tile (4×2) plus 4 supporting tiles
• About page — Mixed content tiles + image tiles telling a brand story

9.3 Quick View (quick-view + theme settings)

A modal product preview that opens without navigating away from the current page. Visitor sees product details, picks variants, adds to cart — all without leaving the listing or article they were on.

Quick View is not a section — it’s a globally-enabled feature that adds a “Quick view” trigger to every product card across the theme.

Theme settings (Theme settings → Quick view)

The tab has 3 subheaders: Trigger button, Modal, Effects. All settings below are gated by Enable quick view — turn off the master toggle and the rest of the tab hides.

Setting	What it does
🔧 Enable quick view	Master toggle. ✅ Default on. When off, the quick-view button is suppressed everywhere and the modal cannot be opened.
🔧 Disable on mobile (quick_view_disable_mobile)	✅ Default off. When on, the quick-view button is hidden on phones (≤749px) — tapping a product image opens the product page instead of the modal.
🔧 Always show icon on mobile (quick_view_show_icon_mobile)	✅ Default off. When on, the quick-view icon stays visible on phones (instead of hover-only) so shoppers can tell a tap opens the quick view, not the product page. Only available when Disable on mobile is off.
🔧 Trigger style	Icon (✅ default — just the eye icon), Icon + text (icon followed by “Quick view” label), or Text (label only).
🔧 Trigger position	Top-right / Top-left / Bottom-right / Bottom-left / Center (✅ default — renders dead-centre on hover with a subtle slide-in animation; cleanest look).
🔧 Glass background on trigger	✅ Default on. When on, the trigger button gets a frosted-glass backplate so it stays readable on busy product images. When off, the trigger floats over the image with no backdrop.
🔧 Tint glass with accent (quick_view_glass_tint)	✅ Default off. When on (and the modal is glass-surfaced), the modal glass takes an accent tint (strength = Effects → Glass tint intensity). Only visible when Glass background on trigger is on.
🔧 Modal surface (quick_view_surface)	Modal subheader. Solid / Glass (✅ default) / Glass + accent tint — the surface of the modal itself, theme-authoritative (independent of the card that opened it). See Surface + color scheme below.
🔧 Inherit card surface (quick_view_inherit_card)	✅ Default off. When on, the modal instead mirrors the surface and color scheme of the product card that triggered it (the legacy “card expands into the modal” continuity effect). Mutually exclusive with Use custom color scheme.
🔧 Use custom color scheme (quick_view_use_custom_scheme)	✅ Default off. When on, the modal uses a color scheme you pick below — overrides both the theme surface and card-inherit.
🔧 Modal color scheme (quick_view_color_scheme)	The scheme used when Use custom color scheme is on and the global dark/light toggle is off.
🔧 Modal color scheme — dark / light (quick_view_color_scheme_dark / _light)	Dark- and light-mode scheme pair, used when Use custom color scheme is on and the global dark/light toggle is active (the modal swaps with the mode).
🔧 Image aspect ratio	Aspect ratio of the modal’s primary image. Options: Natural (the image’s own ratio, no crop), 1:1 (square), 4:5 (portrait, ✅ default), 3:4, 2:3, 4:3 (landscape), 16:9.
🔧 Show express payment buttons	✅ Default off. When on, the modal renders Shop Pay / PayPal / Apple Pay / Google Pay buttons below the Add-to-cart (only providers the merchant has enabled in Shopify Payments will appear).
🔧 Accent glow	✅ Default off. When on, an accent-colored glow surrounds the modal. Scaled by the global Section glow intensity in Effects.
🔧 Drop shadow	✅ Default off. When on, a soft drop-shadow sits underneath the modal. Scaled by the global Section shadow intensity in Effects.

What’s inside the modal

The Quick View modal shows:

• Primary image with thumb-strip navigation
• Image chevron-arrows (prev/next)
• Vendor (optional)
• Title
• Price (with sale + compare-at)
• Description
• Variant picker (radios or pills)
• Quantity selector
• Add to cart button (+ optional express checkout)
• “View full details” link → product page

It’s essentially a compact version of the product page, rendered via AJAX-section-rendering when the visitor clicks Quick View.

Surface + color scheme

By default the modal surface is theme-authoritative — you set it once via Modal surface (quick_view_surface), independent of which card opened it. Three layered options decide the modal’s look, highest priority first:

1. Custom scheme (quick_view_use_custom_scheme on) — the modal uses your picked scheme (or the dark/light pair when the global toggle is active).
2. Inherit from card (quick_view_inherit_card on) — the modal mirrors the surface and color scheme of the triggering card (the “card expands into the modal” continuity effect). This was the old always-on behaviour; it is now opt-in.
3. Theme surface (neither toggle on, ✅ default) — the modal uses Modal surface (Solid / Glass / Glass + accent tint).

Backdrop

The modal sits over a backdrop that combines:

• A dim color (configurable via the cart-drawer overlay opacity, shared)
• A blur (configurable via the cart-drawer overlay blur, shared)

So all overlays (cart-drawer, quick-view, lightbox) share the same backdrop appearance for consistency.

Performance

Quick View fetches /products/{handle}.js (JSON) for variant data and /products/{handle}?section_id=quick-view (HTML) for the section markup. The product is cached client-side — opening the same product a second time is instant.

When the modal opens, Hyprism preloads all gallery image variants in the background so thumb-clicks and prev/next swap instantly with no loading flicker.

9.4 Sticky Product Bar (sticky-product-bar snippet)

A mobile-first persistent bar that appears once the visitor scrolls past the main add-to-cart button on a product page. Holds a mini image, title, price, optional variant picker, optional quantity selector, and add-to-cart button.

Like Quick View, this is not a section — it’s a globally-enabled feature on product pages.

Theme settings (Theme settings → Sticky product bar)

The tab has 3 subheaders: Content, Appearance, Behavior. All settings below are gated by Enable sticky product bar.

Setting	What it does
🔧 Enable sticky product bar	Master toggle. ✅ Default on.
🔧 Show image	✅ Default on. Mini product image (48×48 on mobile, 60×60 desktop).
🔧 Show variant picker	✅ Default on. Compact dropdown for variant selection. Only renders for multi-variant products — single-variant products show no picker even when the setting is on.
🔧 Show quantity	✅ Default on. +/- quantity spinner.
🔧 Full width	✅ Default on (boolean — not a select with options). When on, the bar spans the full viewport edge-to-edge. When off, the bar respects the page-grid content column so it aligns with section content above.
🔧 Glass background	✅ Default off. When on, the bar gets a frosted-glass surface (reads the theme-wide Glass settings from §2.7).
🔧 Tint glass with accent (sticky_bar_glass_tint)	✅ Default off. Tints the bar’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Glass background is on.
🔧 Accent glow	✅ Default off. Accent-colored glow above the bar. Scaled by the global Section glow intensity in Effects.
🔧 Drop shadow	✅ Default off. Soft shadow above the bar to lift it visually from content. Scaled by the global Section shadow intensity in Effects.
🔧 Show until (ms)	Range 0–5000ms, step 250. ✅ Default 0. When set to 0, the bar stays visible the entire time the main ATC is out of viewport. Set higher to auto-hide after N milliseconds even if the ATC is still off-screen — useful if you want the bar to be a quick reminder rather than a persistent fixture.

Behavior

• Uses an IntersectionObserver on the product page’s main ATC button.
• When the ATC scrolls out of viewport, the bar slides up from the bottom (or fades in if prefers-reduced-motion is set).
• When the visitor scrolls back to the ATC, the bar slides away.
• Bar’s variant picker and quantity stay synchronized with the main form (bidirectional sync via MutationObserver).
• Tapping the bar’s add-to-cart button triggers /cart/add.js and dispatches ne:cart-updated (cart drawer opens automatically).

Mobile layout

On mobile (≤749px), the bar uses a 3-row grid:

• Row 1: image + product info (title, price)
• Row 2: variant picker + quantity
• Row 3: add-to-cart button (full width)

Adaptive — if there’s no image / no variant / no quantity setting, the rows collapse with CSS-:has() rules.

Reduce-motion respect

@media (prefers-reduced-motion: reduce) deactivates the slide animation — the bar fades in/out instead. Mandatory for accessibility.

Performance

• The bar is body-mounted via JS on init (escapes any parent transform/will-change/filter ancestors that would create a containing-block).
• IntersectionObserver is the only ongoing cost — efficient compared to scroll listeners.
• Variant sync polls only on DOM mutation (not interval) — zero cost when idle.

9.5 Collection switcher (collection-switcher)

An editorial collection showcase: a product grid that swaps between several collections via a switcher header — the “HBO Max genre row” pattern. Nothing in the Theme Store catalog switches collections this way.

Available on: any template except password.

Engine: every collection’s grid is server-rendered once and inactive panels are hidden (no AJAX), so switching is instant and works offline, in every browser, and in the theme editor. The cards reuse the standard product card (same subgrid alignment, swatches, quick view, glow/shadow). The switcher is role=tablist / role=tab / role=tabpanel with full keyboard support (←/→/Home/End).

Switcher style

Setting	What it does
🔧 Subheading	Optional small label above the switcher (e.g. “Discover”).
🔧 Switcher style	Coverflow (✅ default — active collection centred + large, neighbours faded at the edges, chevrons either side) / Glass box (active collection name in a frosted glass box that overlaps the top of the grid, chevrons inside the box).
🔧 Show arrows	✅ Default on. Coverflow only — the glass box always switches via its built-in arrows, so this is hidden there.
🔧 Show product count	Glass box only — shows “N products” under the collection name.

Glass box carries its own glass controls (shown only for that style): Tint glass with accent, Accent glow, Drop shadow and Corner radius — so the box reads as a first-class glass surface, matching the rest of the theme.

Layout

Setting	What it does
🔧 Products per collection	Range 2–12. ✅ Default 8.
🔧 Columns (desktop)	Range 2–6. ✅ Default 4.
🔧 Columns (mobile)	1 / 2 (✅ default).
🔧 Gap between cards	Range 4–40px, step 4. ✅ Default 16.

Card content + style

The full product-card control set: image ratio, title max lines, show vendor / second image on hover / colour swatches / quick view / add-to-cart; card corner radius, image corner radius, inner padding; Card surface (Solid / Transparent / Glass + accent tint), card glow and drop shadow. A custom card colour scheme can be set here at section level (the default for all tabs) and overridden per collection (see Blocks accepted) — so the cards pop against the section background, and each collection can even use a different card scheme.

Effects + chrome + color scheme

Standard v7 chrome — section colour scheme (with dark/light pair), transparent background, glass + glass tint, glow, shadow, full-width (+ mobile), corner radius, padding and visibility toggles.

Blocks accepted

Collection — up to 8. Each: a collection picker, an optional custom label (overrides the collection title in the switcher), and an optional custom card colour scheme (toggle + scheme picker) so that collection’s cards can use a different scheme from the section background and from the other tabs.

Common use cases

• ✅ Shop by category — switch between “Menswear / Womenswear / Studio Edit” under one editorial header
• ✅ Curated edits — flip through a few hand-picked collections on the homepage
• ✅ Seasonal rows — “New in / Sale / Bestsellers” as a single switchable block

9.6 Bento Hero (bento-hero)

A hero-scale bento grid where every cell is a free, fill-the-fold slot that can hold any sensible block — kinetic/scramble headings, a Shape (free-form glass), a Box, a Coverflow product grid, video, countdown, before-after, atoms, app blocks. Where Bento Grid (§9.2) is a content section with six fixed tile types, Bento Hero is an open canvas built for the first screen: the grid fills the viewport height and each cell is its own composition surface.

Available on: any template except password.

Why it’s distinct: the catalog’s bento layouts are fixed image/product/text tiles. Here a cell is a real block slot — you can drop a Coverflow carousel into one cell, a scramble headline into the next, a glass Shape into a third, and the grid arranges them at hero scale. It’s the “compose your own hero out of the whole block arsenal” pattern.

Grid

Setting	What it does
🔧 Columns (desktop)	Range 2–12. ✅ Default 6.
🔧 Columns (mobile)	Range 1–4. ✅ Default 2.
🔧 Gap between cells	Range 0–48px. ✅ Default 12.
🔧 Cell base height	Range 80–400px. ✅ Default 200. The minimum row height; rows stretch to fill the viewport when Fill viewport is on.
🔧 Fill viewport height	✅ Default on. The grid grows to the chosen viewport height and rows stretch to fill it (true hero). Off → the grid is exactly as tall as its content × cell base height.
🔧 Viewport height	Range 40–100%, shown only when Fill viewport is on. ✅ Default 80 (= 80vh).

Background

Setting	What it does
🔧 Background image	Optional full-bleed image behind all cells (loaded eagerly as a likely LCP element).
🔧 Overlay color + opacity	Tint over the background image for text legibility. Opacity 0 = no overlay.

Effects + chrome + color scheme

Standard v7 chrome — section colour scheme (with dark/light pair), transparent background, glass + glass tint, glow, shadow, full-width (✅ default on) + full-width mobile (✅ default on), section side padding (✅ default 0 = cells edge-to-edge), top/bottom padding (✅ default 0), corner radius and visibility toggles.

Blocks accepted

Bento cell — up to 20 cells. Each cell is configured independently (see below).

Bento-cell block (bento-cell)

A single free cell. It holds any of the curated blocks and styles its own surface.

Placement / size

Setting	What it does
🔧 Column span (desktop) / Row span (desktop)	How many grid columns/rows the cell occupies on desktop.
🔧 Column span (mobile) / Row span (mobile)	Same for mobile.
🔧 Horizontal position	Left / Center / Right — how the cell’s content sits horizontally.
🔧 Vertical position	Top / Center / Bottom.
🔧 Inner padding	Space inside the cell around its content. ✅ Default 24.
🔧 Content gap	Vertical gap between stacked blocks inside the cell. ✅ Default 12.
🔧 Clip content to cell	✅ Default on. Off → content (e.g. a glow or an overhanging Shape) may bleed past the cell edge.

Surface / style

Setting	What it does
🔧 Background image + overlay color/opacity	Optional per-cell image behind that cell’s blocks.
🔧 Surface	Transparent (✅ default) / Solid (scheme background) / Glass. The glass sits on a dedicated sub-layer so a block’s own glass inside the cell still works.
🔧 Tint glass with accent	Shown only for the Glass surface.
🔧 Corner radius	✅ Default 16.
🔧 Hover effect	None / Lift / Zoom / Tilt (cursor-following 2D skew) / Glow pulse. ✅ Default Lift.
🔧 Accent glow / Drop shadow	Per-cell glow and shadow (at 60% of the section intensity).

Every cell also carries the full Advanced settings suite (transform offset/rotation/scale/opacity/z-index, glow/shadow with sharpness, section overlap, scroll parallax, entrance animation, custom mobile values) — same as the Box and Shape blocks.

Blocks accepted in a cell (curated — product-context and container-internal blocks are deliberately excluded so the picker stays sensible): Heading, Text, Button, Image, Icon, Group, Divider, Spacer, Box, Shape, Kinetic heading, Scramble heading, Product grid (Coverflow), Video, Newsletter form, Countdown, Before/After comparison, plus app blocks (under the Apps tab).

Common use cases

• ✅ Editorial hero — a big scramble/kinetic headline in one cell, a CTA button in another, a glass Shape accent in a third
• ✅ Shop-the-fold — drop a Coverflow product grid into a wide cell beside a heading + button stack
• ✅ Feature mosaic — mix video, countdown and image cells into a hero-scale arrangement

Tip for narrow cells: very width-sensitive blocks (Coverflow product grid, Countdown, Before/After) are best given a wider column span — in a 1-column cell they can compress. Headings reflow cleanly (the scramble heading locks each word’s footprint so its random characters never bounce the line).

9.7 Arc gallery (arc-gallery + arc-image)

Image cards laid out along the arc of a circle — apex in the middle, arms curving down to the sides. The successor to the old Horizontal lookbook section, and a block rather than a section, so it drops into a hero, a bento cell, a Group or any other container that accepts blocks.

Two blocks work together: arc-gallery is the engine and carries all the geometry and behaviour; each arc-image is one card on the arc.

Arc-gallery (arc-gallery) — geometry

Setting	What it does
🔧 Align to edge (arc_align)	bottom (arch up) / top (arch down). ✅ Default bottom.
🔧 Circle radius (circle_radius)	✅ Default 620. A larger radius means a flatter, gentler arc.
🔧 Centre offset (center_offset)	Moves the circle’s centre up or down, raising or lowering the arc. ✅ Default 0.
🔧 Card spacing (arc_spread)	Angle between cards along the arc. ✅ Default 26.
🔧 Height (block_height)	✅ Default 460.
🔧 Dock to edge (dock)	off / top edge / bottom edge. Pins the gallery flush against the section edge regardless of its place in the block order. ✅ Default off.

Arc-gallery — cards and behaviour

Setting	What it does
🔧 Card tilt (card_orientation)	fan (tilt along the arc) / upright. ✅ Default fan.
🔧 Card size (card_scale)	focus (shrink toward the sides) / equal. ✅ Default focus.
🔧 Shrink amount (scale_amount)	✅ Default 55. Only when Card size = focus.
🔧 Card width (card_width)	✅ Default 220.
🔧 Card ratio (card_ratio)	portrait 3:4 / square / landscape / original. ✅ Default portrait.
🔧 Corner radius (card_radius)	✅ Default 14.
🔧 Side cards (edge_behavior)	clip at the edge / soft fade out. ✅ Default clip.
🔧 Navigation (nav)	arrows / hover edge / drag / scroll. ✅ Default arrows.
🔧 Arrow icon (arrow_icon)	chevron / arrow / caret. Only when Navigation = arrows.
🔧 Arrow style (arrow_shape)	circle / rounded square / square / no background. Only when Navigation = arrows.
🔧 Loop (loop)	✅ Default on.

Arc-image (arc-image) — one card

Setting	What it does
🔧 Image (image)	The card image.
🔧 Heading (heading) · 🔧 Caption (caption)	Optional text over the image.
🔧 Link (link)	Makes the whole card a link.
🔧 Surface (surface)	solid / glass / transparent. ✅ Default solid.
🔧 Tint glass with accent (glass_tint)	Only when Surface = glass and the theme-wide glass effect is on. ✅ Default off.
🔧 Accent glow (glow) · 🔧 Drop shadow (shadow)	Only when the matching theme-wide effect is on. ✅ Default off.
🔧 Custom corner radius (override_radius) + 🔧 Corner radius (radius)	Overrides the gallery’s radius for this card. ✅ Default off / 14.
🔧 Border width (border_width)	✅ Default 0.
🔧 Caption scrim strength (caption_scrim)	Gradient behind the caption so text stays legible over any image. ✅ Default 60.
🔧 Caption gradient color (caption_scrim_color) · 🔧 Caption text color (caption_color)	✅ Defaults #000000 / #ffffff.

⚠️ The parent cannot read a child’s settings in Shopify’s block model, so each arc-image renders its own surface and the gallery positions it. That is why the surface and glow settings sit on the card, not on the gallery.

Common use cases

• ✅ Product family — the range fanned out, the centre one in focus
• ✅ Editorial arc — campaign frames curving across the fold of a hero

---

9.8 Technical media treatments (tech-callout + tech-dimension)

Two blocks that annotate an image the way a datasheet does: a named point connected by a leader line to its label, and a dimension line with end ticks and the measurement in the middle. Connection diagrams, exploded views, dimensional drawings — not lifestyle.

⚠️ Why not Hotspot

The Hotspot Image section (§9.1) is a shoppable image: a point opens a product card, and the label only appears on hover or tap. A technical label is the opposite — it has to be readable without interaction, because it is the content. Hotspot spends about thirty settings on being shoppable; these two blocks spend theirs on placement and legibility.

Tech-callout (tech-callout)

Setting	What it does
🔧 Label (label)	The callout text.
🔧 Second line, smaller (note)	Optional.
🔧 Number (number)	Optional. Shown in the marker or in front of the label — for a legend below the image.
🔧 Horizontal / Vertical position (x_position, y_position)	Where the marker sits, in per cent of the image. ✅ Default 50 / 50.
🔧 Leader angle (leader_angle)	0° points right, 90° down. ✅ Default 320. The label sits at the end of the line and is placed by calculation, so every angle works.
🔧 Leader length (leader_length)	✅ Default 72.
🔧 Marker (marker_style)	dot / ring / number / none. ✅ Default dot.
🔧 Surface (box_surface)	solid / glass / none. ✅ Default solid.

Tech-dimension (tech-dimension)

Setting	What it does
🔧 Measurement (value)	✅ Default “614 mm”.
🔧 Orientation (orientation)	horizontal / vertical. ✅ Default horizontal.
🔧 Horizontal / Vertical position (x_position, y_position)	✅ Default 50 / 90.
🔧 Length (length)	Share of the image width or height. ✅ Default 40.
🔧 Label (label_position)	above the line / on the line / below the line. ✅ Default above.
🔧 End ticks (ticks)	✅ Default on.

⛔ The number is text, not the line. The theme measures nothing and converts nothing — it displays what you type. A calculated figure would be a claim about an image whose scale the theme cannot know, and it would be wrong at the first crop.

There are deliberately no diagonal dimensions. They are rare in a product drawing and read differently at every image width.

Common use cases

• ✅ Connection diagram — every port named, without a hover
• ✅ Dimensional drawing — width, height and depth on the product shot
• ✅ Exploded view — numbered markers plus a legend underneath

---

9.9 Shader logo (shader-logo)

A live WebGL gradient poured into the silhouette of your logo. The same shader engine as the former Shader Background section, rendered on a small per-block canvas and CSS-masked to the alpha shape of a logo, an uploaded image, or an SVG — the animation shows through the silhouette.

Silhouette

Setting	What it does
🔧 Shape source (mask_source)	shop logo / uploaded image (PNG/SVG) / SVG or image URL. ✅ Default shop logo.
🔧 Mask image (mask_image)	A solid silhouette on a transparent background — the alpha channel is the shape. Only when source = uploaded image.
🔧 SVG / image URL (svg_url)	A monochrome SVG path clips crispest. Only when source = URL.
🔧 Fit (mask_fit)	contain / cover / stretch. ✅ Default contain.
🔧 Position (mask_position)	center / left / right / top / bottom. ✅ Default center.
🔧 Accessible label (alt)	Screen-reader text for the logo — normally the brand name.

Shader

Setting	What it does
🔧 Effect (effect)	gradient mesh / aurora / prism shimmer / plasma / swirl / ripple / starfield / mesh grid / caustics / fire. ✅ Default mesh grid.
🔧 Speed · Intensity · Scale · Contrast · Grain · Warp	✅ Defaults 20 / 60 / 100 / 100 / 0 / 0.
🔧 Cursor interaction (interaction)	none / glow / ripple / repel / swirl. ✅ Default none.
🔧 Static shape on mobile (disable_shader_mobile)	Show the flat fallback on phones to save battery. ✅ Default off.

Colors and layout

Setting	What it does
🔧 Color source (color_source)	from color scheme / custom. ✅ Default scheme.
🔧 Base / Accent / Highlight (color_a, color_b, color_c)	Up to three custom colours, each behind its own toggle. Only when source = custom.
🔧 Height (height) · 🔧 Height, mobile (height_mobile)	✅ Defaults 360 / 260.

Degradation is built in. With prefers-reduced-motion: reduce, or where WebGL is unavailable, the block renders a static gradient in the same silhouette — never an empty box.

⭐ The same shader engine is also available as the Shader surface on the Shape block (§5a.13), where the clip-path silhouette is the shape and no logo relief is needed.

Common use cases

• ✅ Brand mark that breathes — the logo alive on the first screen, at rest everywhere else
• ✅ Section divider — a wordmark filled with the scheme’s accent, between two content sections

---

Next

Chapter 10 — Marketing sections — Newsletter, Testimonials, Brand Slider, Announcement Bar, Countdown, Before-After, and more.