Premium signature sections

These four 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

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

hotspot · hotspot-hero

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.
🔧 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. 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).
🔧 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)

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

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.
🔧 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)
• Wishlist heart (corner of the image)
• “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.

Next

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