Marketing and interaction sections

This chapter covers sections that drive engagement, capture leads, and create promotional moments. Less narrative than the hero/storytelling sections (chapter 6), more interactive than the product sections (chapter 7).

10.1 Announcement Bar (announcement-bar)

A thin strip at the top of every page for site-wide announcements (“Free shipping over €50”, “Sale ends Friday”). Lives in the header group, renders above the main header section. Add as many message blocks as you want — in static mode they sit side-by-side; in marquee mode they scroll continuously.

Section-specific settings

Setting	What it does
🔧 Display mode	Static (messages sit side-by-side) or Marquee (✅ default — messages scroll horizontally like an LED ticker).
🔧 Marquee direction	Visible in marquee mode. Left-to-right or Right-to-left (✅ default ltr).
🔧 Marquee speed	Range 10–60s, step 5. ✅ Default 30s. Seconds for one full loop — higher = slower, not faster. (Tip: think of it as “duration”, not “speed”.)
🔧 Enable edge fade	✅ Default on. Fade the marquee edges to transparent so messages appear from / disappear into the sides instead of hard-cutting.
🔧 Fade width	Range 0–25%, step 1. ✅ Default 6%. Visible when edge fade is on. Width of the fade gradient as a percentage of the bar.

Effects + chrome + color scheme

Standard v7 chrome. See chapter §2 and §3 for the canonical descriptions.

Blocks accepted

message only.

Common patterns

• One message, static — simple banner (“Free shipping over €50”)
• 2–3 messages, marquee, left-to-right — rotating promo strip (“Sale 30% off” → “Free returns” → “Fast delivery”)
• Holiday banner — single static message wrapped in a Liquid date-check so it auto-deactivates after the date

Per-message block (message)

Each block is one piece of content. In static mode all blocks render side-by-side; in marquee mode they’re concatenated into the scrolling track.

Content:

Setting	What it does
🔧 Text	The message (supports Liquid for dynamic values)
🔧 Link	Optional URL — clicking the message navigates

Icon (left of text):

Setting	What it does
🔧 Library icon	Pick from the built-in set: arrow-right / chevron-right / star / heart / check / info / alert / clock / mail / phone / map-pin / calendar / globe / external-link. Use “None” to skip the library and use a custom icon instead.
🔧 Custom icon	Upload your own icon (PNG / SVG). Overrides the library icon when set.
🔧 Recolor custom icon	Mask-paint the custom icon with currentColor — single-color SVG / PNG only. Useful for SVG icons that should follow the message text color.
🔧 Icon color	Pick a color explicitly; leave blank to inherit from text.
🔧 Icon-to-text spacing	Gap between icon and text (0–24 px).
🔧 Icon position	Left of text / Right of text — only available when the second icon (below) is OFF.

Second icon (right side):

Setting	What it does
🔧 Enable second icon	Master toggle. Off by default. When on, you can show a second icon on the right side of the message (e.g., arrow on the right to imply “click for more”).
🔧 Second library icon / Custom icon / Recolor / Color / Spacing	Same settings as the primary icon, but for the right-side slot.

Text style:

Setting	What it does
🔧 Font	Default (body) / Body / Subheading / Heading / Accent — which of the 4 theme font roles to use
🔧 Bold	Force font-weight: 700
🔧 Italic	Force font-style: italic

10.2 Scrolling Text / Marquee (scrolling-text)

A horizontally-scrolling marquee — like a digital LED ticker. Used for “AS SEEN IN” press strips, brand value-prop rotations, fashion-week-style scrolling text strips. The actual text content lives on text blocks dropped inside the section; the section controls the marquee motion.

Section-specific settings

Setting	What it does
🔧 Speed	Range 10–60s, step 5. ✅ Default 30s. Seconds for one full marquee loop — higher = slower.
🔧 Direction	Left (✅ default) or Right — direction of scroll.
🔧 Separator	Free text. ✅ Default • (bullet). Inserted between repeated text instances in the marquee track.
🔧 Font size	Range 12–48px, step 2. ✅ Default 16px.
🔧 Enable edge fade	✅ Default on.
🔧 Fade width	Range 0–25%, step 1. ✅ Default 6%. Visible when edge fade is on.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

text only.

The text content (including font role + bold/italic styling + color override) is configured on each text block. The text repeats internally for seamless looping (the standard marquee duplication pattern).

✅ Use sparingly — one well-placed scrolling text adds energy; multiple feel cluttered.

10.3 Brand Slider (brand-slider)

A logo-strip showing brand partnerships, press features, certifications. The section is a thin @theme wrapper — the auto-scroll mechanics, logo styling, and slide composition live on the slider BLOCK (the rotation engine) and brand BLOCKS (individual logos) inside.

Section-specific settings

Setting	What it does
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px. Gap between stacked blocks inside the section.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

slider (the rotation engine — controls auto-scroll, speed, default logo height) · heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

The slider block in turn accepts brand child blocks (one per logo) — see §10.14.2 for the brand block reference and §5a.9 for the slider block.

Common use

• “As seen in” press strip — 5–8 brand logos with greyscale recolor
• Partner row — 4–6 partner logos with hover-tint
• Certification badges — Trustpilot, BBB, eco-certifications

10.4 Newsletter (newsletter)

A standalone newsletter signup section. Wider and more attention-grabbing than the footer newsletter form. The section is a thin @theme wrapper — heading, description, form, and disclaimer are all composed from blocks.

Section-specific settings

Setting	What it does
🔧 Content alignment	Left / Center (✅ default) / Right.
🔧 Content width	Range 400–1200px, step 20. ✅ Default 600px. Max width of the content column.
🔧 Content gap	Range 0–64px, step 2. ✅ Default 16px.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

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

The newsletter-form block carries the input + submit button + layout (inline / stacked) + success message settings — see §10.14.3. Wrap with heading + text blocks for the section title and value-prop; add a text block below for the privacy disclaimer.

✅ Best as a dedicated section on the home page or a “subscribe” page. The footer newsletter is for visitors who want to subscribe at the end of the journey; this section is for prominent placement.

10.5 Testimonials (testimonials)

A carousel or grid of customer testimonials. The section is a thin @theme wrapper — the carousel/grid mechanics and per-testimonial cards live on the testimonial-list BLOCK (which itself contains testimonial child blocks).

Section-specific settings

Setting	What it does
🔧 Content alignment	Left / Center (✅ default) / Right.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 32px.
🔧 Side padding (section_padding_x)	Range 0–80px, step 4. ✅ Default 24px. Horizontal inner padding.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

testimonial-list (the carousel/grid engine) · heading · text · button · image · video · icon · group · spacer · divider · recently-viewed-grid · wishlist-grid

All testimonial-display settings (carousel vs grid / columns / arrows / dots / card surface / quotation style / autoplay) live on the testimonial-list block — see §10.14.4.

10.6 Countdown (countdown + countdown-timer block)

A countdown timer to a target date/time. Used for sale-ends-in, flash-sale urgency, product-launch hype. The Countdown section is an @theme container — the actual timer lives in a countdown-timer block, and you compose the section with a heading + timer + CTA button + text in any order.

Section-specific settings (countdown)

The Countdown section is a thin @theme container — the timer-specific settings live on the timer block (next subsection).

Setting	What it does
🔧 Max width	Range 400–1200px, step 20. ✅ Default 800px.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px.
🔧 Content alignment	Left / Center (✅ default) / Right. Drives --ne-bw-justify for button-blocks too.

Effects + chrome + color scheme

Standard v7 chrome.

Countdown-timer block settings (countdown-timer)

The timer is a block you drop into the Countdown section (or any @theme container that allows it). Has its own surface + scheme settings so the digit-cards can have a different look than the surrounding section.

Target date/time (5 dropdowns):

Setting	What it does
🔧 Target year	2025 – 2030
🔧 Target month	01 – 12
🔧 Target day	01 – 31 (Hyprism auto-clamps invalid combos like Feb 31 → Feb 28/29, see Day-clamping below)
🔧 Target hour	00 – 23 (24-hour clock)
🔧 Target minute	00 / 05 / 10 / 15 / 20 / 25 / 30 / 35 / 40 / 45 / 50 / 55 / 59
🔧 Expired message	Custom text shown after the target moment passes. ✅ Default: “This event has ended”.

Digit appearance:

Setting	What it does
🔧 Digit font	Body / Subheading / Heading / Accent — picks one of the 4 theme typography roles for the numerals. ✅ Default: Heading.
🔧 Digit surface	Solid (scheme bg) / Transparent (no card) / Glass (blur + tint)
🔧 Tint glass with accent	When digit-surface = glass, tints the glass with the scheme accent for a branded look
🔧 Digit radius	Range 0–32px, step 2. ✅ Default 12px. Corner radius of each digit card.
🔧 Drop shadow	Adds a soft shadow under each digit card
🔧 Accent glow	Adds the accent-colored glow around each digit card

Color scheme (per-block override):

Setting	What it does
🔧 Custom color scheme	Master toggle. When on, the timer uses its own scheme instead of inheriting from the parent section.
🔧 Color scheme	(Single-mode) The scheme to apply when Custom color scheme = on and dark/light pair is off
🔧 Color scheme (dark) / (light)	(Pair-mode) Separate schemes for dark and light states when the theme-wide dark/light pair is active

Day-clamping (Liquid magic)

The day dropdown lets visitors set Feb 31 or Apr 31 (invalid dates). Hyprism’s Liquid auto-clamps these on the server-side ISO-string build:

• Feb 31 → Feb 28 (or Feb 29 if leap year)
• Apr 31 → Apr 30
• Jun 31 → Jun 30
• Sep 31 → Sep 30
• Nov 31 → Nov 30

The dropdown display still shows the user’s chosen value (Shopify can’t write-back to settings from Liquid), but the actual countdown calculation uses the clamped valid date. No broken timers ever, even with sloppy date input.

Composition examples

Countdown section (color scheme: accent-themed, glass)
├─ Heading block ("Sale ends in")
├─ Countdown-timer block (digit-surface: solid, digit-radius: 16)
├─ Text block ("Use code SAVE20 at checkout")
└─ Button block ("Shop the sale") — primary, full-width-on-mobile

Countdown section (transparent, no chrome)
├─ Countdown-timer block (digit-surface: glass, tinted with accent, glow on)

10.7 Tabs (tabs)

A horizontal tabbed content area. Tabs at the top, content panel below.

Section-specific settings

Setting	What it does
🔧 Max width	Range 400–1400px, step 50. ✅ Default 900px.
🔧 Gap between tabs and content	Range 0–80px, step 4. ✅ Default 24px.
🔧 Tab style	Underline (✅ default) / Button / Pill / Minimal.
🔧 Tab alignment	Left (✅ default) / Center / Right.
🔧 Gap between tab buttons	Range 0–32px, step 2. ✅ Default 4px.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

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

Each tab block becomes one tab button at the top + one content panel. Per-tab icon and title are on the tab block. There is no “default open tab” setting at section level — the first tab block opens by default.

✅ Used for: FAQ-style sections, product specs broken down by category, comparison grids.

10.8 Collapsible Content / Accordion (collapsible-content)

A stacked accordion (multiple expandable rows). Perfect for FAQ, terms, return policy, shipping info. The section is a thin @theme wrapper — all item-level settings (icon, surface, schemes, header/content separation) live on the accordion-item BLOCK.

Section-specific settings

Setting	What it does
🔧 Content width	Range 400–1200px, step 40. ✅ Default 800px.
🔧 Gap between items	Range 0–40px, step 2. ✅ Default 8px.
🔧 Item corner radius	Range 0–24px, step 2. ✅ Default 8px. Applied to each accordion-item card.

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

accordion-item · heading · text · button · group · image · icon · divider · spacer

All per-item settings (heading text, content, initial-open state, icon picker, custom icon, item surface, separate header/content schemes, connected/separate visual mode) are on the accordion-item block — covered in Phase 3 block audit.

SEO bonus

If Theme settings → SEO/GEO → FAQ schema is on (✅ default on — see §1.15), the Collapsible Content section emits an FAQPage JSON-LD schema, built client-side from the rendered accordion items. Note: Google now shows the FAQ rich-result only for authoritative health/government sites, but the markup stays valid and helps AI-search engines understand your FAQs.

10.9 Popup (popup)

A modal overlay that triggers based on visitor behaviour (timer, exit-intent, scroll-threshold). Used for newsletter capture, age verification, special offers. Renders as a native <dialog> element body-mounted at runtime so it always sits in the top layer regardless of where the section is placed on the page.

Trigger settings

Setting	What it does
🔧 Enable popup	✅ Default on. Master kill-switch — turn off to suppress this popup instance without removing the section.
🔧 Trigger type	Delay (✅ default — open after N seconds) / Scroll (open at % page scrolled) / Exit (open on mouse-leave at top of viewport — desktop only).
🔧 Trigger delay	Range 0–60s, step 1. ✅ Default 5s. Visible for the Delay trigger.
🔧 Scroll threshold	Range 10–200%, step 10. ✅ Default 50%. Visible for the Scroll trigger. Values above 100% are allowed because some pages are very long and trigger should fire after the visitor has scrolled into a specific deep section.
🔧 Frequency	Always (show every page-load) / Once (✅ default — lifetime) / Daily / Weekly. State is stored in localStorage.

Layout settings

Setting	What it does
🔧 Max width	Range 280–800px, step 20. ✅ Default 500px.
🔧 Inner padding	Range 12–64px, step 2. ✅ Default 32px.
🔧 Gap between blocks	Range 0–48px, step 4. ✅ Default 16px.
🔧 Content alignment	Left / Center (✅ default) / Right. Drives --ne-bw-justify for nested button-blocks too.
🔧 Border radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Backdrop blur	Range 0–24px, step 1. ✅ Default 6px.

Surface settings

Setting	What it does
🔧 Transparent background	Drops the solid scheme background, useful when the popup card has its own image.
🔧 Glassmorphism	Glass surface for the popup card.
🔧 Tint glass with accent	When glass is on, tints with the scheme accent.
🔧 Accent glow / Drop shadow	Surface effects (see §2 Foundation).
🔧 Color scheme + dark/light pair	Per-section scheme override.
🔧 Hide on mobile / desktop	Visibility.

Content

Block container — drop in heading + image + text + button + form (for newsletter capture) blocks. Close-on-Escape and close-on-backdrop-click are built into the native <dialog> and always on (Shopify Theme Store accessibility requirement); the close button at top-right is always rendered.

The dismissed state is stored in a per-section localStorage key so the visitor doesn’t see it again until the frequency window expires.

⚠️ Use sparingly. Aggressive popups (exit-intent + immediate delay) frustrate visitors. Best practice: one popup per session, with a clear value proposition.

10.10 Before-After Comparison (before-after)

An interactive image-comparison slider. Drag a handle to reveal more of one image vs. the other. Classic “before” / “after” or “with” / “without” comparisons. The section is a thin @theme wrapper — the actual comparison mechanism lives on the before-after-comparison BLOCK.

Section-specific settings

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

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

before-after-comparison · heading · text · button · group · image · icon · divider · spacer

For multiple comparisons in one section, add multiple before-after-comparison blocks. Before/After images, labels, handle style, start position, divider settings all live on the block — see §10.14.1.

Interaction (built into the block)

• Mouse: Click and drag the handle.
• Touch: Swipe left/right.
• Keyboard: Arrow keys to nudge, Home/End to jump to extremes.

A11y: includes ARIA role + value-now + value-min + value-max for screen-readers.

✅ Common uses: filter / preset comparison, skin-care before/after, design renovations, product without/with-feature.

10.11 Contact Form (contact-form)

A contact form with configurable fields. Submissions arrive at the shop’s contact email (configured in Shopify Admin → Settings → General). The section is a thin @theme wrapper — the form itself (fields, layout, labels, success message) lives on the contact-form BLOCK.

Section-specific settings

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

Effects + chrome + color scheme

Standard v7 chrome.

Blocks accepted

contact-form · heading · text · button · group · image · icon · divider · spacer

All form field toggles (name / email / phone / subject / message — each as on/off/required), form layout, submit button text, success message, privacy disclaimer live on the contact-form block — covered in Phase 3 block audit. Wrap with heading + text blocks for the section title and intro paragraph.

The form uses Shopify’s native {% form 'contact' %} Liquid tag. Submissions follow Shopify’s spam-prevention rules; spammy submissions go to the spam folder.

10.12 Section Grid / Section Stack (section-grid, section-stack)

These are layout containers that hold atom blocks — they let you compose advanced layouts where multiple atoms sit in a grid or vertical stack.

Section Grid (section-grid)

Setting	What it does
🔧 Columns (desktop)	Range 2–6, step 1. ✅ Default 3.
🔧 Columns (tablet)	Range 1–4, step 1. ✅ Default 2.
🔧 Column gap	Range 0–120px, step 4. ✅ Default 24px.
🔧 Row gap	Range 0–120px, step 4. ✅ Default 24px.
🔧 Content width	Range 400–2400px, step 40. ✅ Default 1200px. Max width of the grid.

There is no “Columns (mobile)” setting and no “Equal heights” toggle — mobile auto-stacks to 1 column, and children stretch to the row height by default.

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

Section Stack (section-stack)

A vertical stacker where blocks sit with controllable gap between them.

Setting	What it does
🔧 Alignment	Left / Center (✅ default) / Right / Stretch — horizontal alignment of stacked children.
🔧 Gap	Range 0–120px, step 4. ✅ Default 24px. Vertical gap between blocks.
🔧 Content width	Range 400–2400px, step 40. ✅ Default 1200px.

There is no section-level “Background” toggle in addition to standard v7 chrome — use the section’s transparent_bg / enable_glass settings if you want a background treatment, or wrap children in a group block.

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

Use for: nested layouts where a “block” of related content (e.g., “Heading + 3 buttons stacked”) should have its own padding, scheme, and surface.

10.13 Custom Section + Custom Liquid (custom-section, custom-liquid)

The escape hatches. Detailed walkthrough in chapter 17 — Customization.

Custom Section (custom-section)

Free-form layout container — drop in any combination of atom blocks. Adds a background image and overlay on top of standard v7 chrome.

Setting	What it does
🔧 Max width	Range 400–1800px, step 20. ✅ Default 1200px.
🔧 Content gap	Range 0–80px, step 4. ✅ Default 24px.
🔧 Content alignment	Left (✅ default) / Center / Right.
🔧 Background image	Optional image. Tiles at cover.
🔧 Background overlay	Range 0–100%, step 5. ✅ Default 0%. Dim the background image.

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

Custom Liquid (custom-liquid)

Drop-in raw Liquid + HTML for snippets or apps that need raw markup.

Setting	What it does
🔧 Custom Liquid	The Liquid / HTML source.
🔧 Max width	Range 400–1800px, step 20. ✅ Default 1200px.

Blocks accepted: None — pure Liquid output. Use for App snippets, custom embeds, or anything Liquid-extensible.

10.14 Block reference — interaction-section sub-blocks

The sections in this chapter use a handful of dedicated blocks for their internal layout. Most are auto-configured by their parent section, but each has its own settings worth knowing.

10.14.1 Before-After Comparison block (before-after-comparison)

The slider mechanism inside the Before-After section (10.10). For “multiple comparisons in one section” you can add multiple Before-After Comparison blocks.

Settings — images

Setting	What it does
🔧 Before image	Image shown initially.
🔧 After image	Image revealed when slider drags.
🔧 Before label	✅ Default Before. Overlay label on the “before” half.
🔧 After label	✅ Default After. Overlay label on the “after” half.

Settings — layout + handle

Setting	What it does
🔧 Aspect ratio	16/9 (✅ default) / 4/3 / 3/2 / 1/1 / 3/4 / 21/9. Note: no 9/16 portrait option — the slider needs horizontal space for the divider.
🔧 Start position	Range 0–100%, step 5. ✅ Default 50%. Where the divider sits at page-load.
🔧 Card radius	Range 0–32px, step 2. ✅ Default 12px.
🔧 Handle style	Circle (✅ default) / Pill / Square — shape of the draggable knob.
🔧 Handle surface	Solid (✅ default) / Glass / Transparent.
🔧 Handle size	Range 28–80px, step 4. ✅ Default 44px.
🔧 Divider width	Range 0–8px, step 1. ✅ Default 2px. Line separating before/after. Set to 0 to hide.

Settings — effects + scheme

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

⚠️ Inverse-clip pattern (Rule 187): for transparent PNGs, both images need to be the same size — otherwise transparent pixels reveal the wrong image through the divider. Use full-frame photos (no transparent backgrounds).

10.14.2 Brand block (brand)

A single logo + name inside the Brand Slider section (10.3). One block per brand.

Settings

Setting	What it does
🔧 Logo	Image upload — preferred SVG for sharp rendering at any size
🔧 Name	Brand name (shown as fallback if no logo, and for accessibility)
🔧 Link	Optional URL to the brand’s page or collection
🔧 Recolor	When on, applies CSS mask to inherit the active text color — gives uniform grayscale brand row look
🔧 Use slider default logo height	Inherit height from the Brand Slider’s “Default logo height” setting (recommended on)
🔧 Logo height	Override per-block when needed (visible when above toggle is off)
🔧 Name font role	Body / Subheading / Heading / Accent
🔧 Name bold / italic	Force weight

💡 For a clean uniform “Our partners” or “As featured in” row, set Recolor on for all brands — they all become monochrome at the same color (typically muted gray), creating a tidy editorial row.

10.14.3 Newsletter Form block (newsletter-form)

The form inside the Newsletter section (10.4). The form submits to Shopify’s built-in customer-signup endpoint.

Content

Setting	What it does
🔧 Placeholder	✅ Default Enter your email.
🔧 Button label	✅ Default Subscribe.
🔧 Button style	Primary (✅ default) or Secondary. No third “Link” style.
🔧 Success message	✅ Default Thanks! Check ….

Layout

Setting	What it does
🔧 Layout	Inline (✅ default — email + button on one row) or Stacked (button below input).
🔧 Merge input + button (merge_input_button)	When on (inline layout only), the email field and submit button render as one joined control. ✅ Default off.
🔧 Alignment	Inherit (✅ default) / Left / Center / Right.
🔧 Full width	✅ Default off. Stretches form to fill container.
🔧 Max width	Range 280–900px, step 20. ✅ Default 480px. Cap on form width.
🔧 Margin top	Range 0–120px, step 4. ✅ Default 0.
🔧 Margin bottom	Range 0–120px, step 4. ✅ Default 0.

⚠️ GDPR consent: if your store is subject to GDPR, install a consent management app (Pandectes GDPR works well — see chapter 16). Hyprism’s newsletter-form does NOT include a built-in checkbox.

10.14.4 Testimonial List block (testimonial-list)

The carousel/grid/stack wrapper inside the Testimonials section (10.5). Contains multiple Testimonial child-blocks.

Layout

Setting	What it does
🔧 Layout	Grid (✅ default — N columns, all visible) / Slider (horizontal scroll with arrows) / Stack (vertical column).
🔧 Enable loop	✅ Default off. Slider cycles infinitely.
🔧 Autoplay	✅ Default off. Auto-advance in slider mode.
🔧 Autoplay interval	Range 3–15s, step 1. ✅ Default 6s.
🔧 Arrow icon	Chevron (✅ default) / Arrow / Caret.
🔧 Arrow shape	Circle (✅ default) / Rounded / Square / Plain.
🔧 Columns	Range 1–4, step 1. ✅ Default 3. Applies in grid mode.
🔧 Gap	Range 0–64px, step 4. ✅ Default 20px.

Card style

Setting	What it does
🔧 Card radius	Range 0–48px, step 2. ✅ Default 16px.
🔧 Card padding	Range 8–64px, step 4. ✅ Default 24px.
🔧 Card glass	✅ Default off.
🔧 Tint glass with accent (card_glass_tint)	✅ Default off. Tints the glass cards 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 scheme	Color-scheme picker. Plus separate Card scheme dark + Card scheme light for pair-mode.
🔧 Quote decoration	✅ Default on. Show a large quote-mark glyph as background decoration.

Avatar

Setting	What it does
🔧 Avatar size	Range 32–96px, step 4. ✅ Default 48px.
🔧 Avatar shape	Circle (✅ default) / Rounded / Square.

Accepted child blocks: testimonial (one block per testimonial card).

💡 For desktop-focus stores, use Grid mode with 3 columns and short testimonials. For mobile-first stores, use Slider mode with autoplay-on and longer testimonials.

10.14.5 Testimonial block (testimonial)

A single testimonial card inside the testimonial-list (10.14.4).

Setting	What it does
🔧 Quote	Rich-text content of the testimonial.
🔧 Rating	Range 0–5, step 1. ✅ Default 5. Star rating displayed above the quote.
🔧 Author	✅ Default Customer Name.
🔧 Title	✅ Default Verified Buyer. Role / job-title / context.
🔧 Avatar	Optional image.
🔧 Custom color scheme	✅ Default off. When on, exposes color_scheme + dark/light pair.

10.14.6 Accordion Item block (accordion-item)

A single expandable row inside Collapsible Content (§10.8).

Content

Setting	What it does
🔧 Heading	✅ Default Question. The summary text shown collapsed.
🔧 Text	Rich-text content of the expanded panel.
🔧 Heading font role	Body / Subheading / Heading (✅ default) / Accent.

Icon

Setting	What it does
🔧 Icon	None (✅ default) / Question / Info / Star / Plus / Check / Custom. The icon next to the heading.
🔧 Custom icon	Image picker (visible when icon = Custom).
🔧 Icon color	Optional color override.

Header style

Setting	What it does
🔧 Pill-shaped header	✅ Default off. Rounds header into a pill.
🔧 Header surface	Scheme (✅ default) / Glass / Transparent.

Content panel

Setting	What it does
🔧 Connected to header	✅ Default off. When on, content panel visually merges with header (no gap, flat-edges between them). Pill+connected auto-applies min-inset (Rule 174).
🔧 Content inset	Range 0–80px, step 4. ✅ Default 0. Inner padding of the content panel.
🔧 Content radius	Range 0–32px, step 2. ✅ Default 8px.
🔧 Content surface	Scheme (✅ default) / Glass / Transparent.
🔧 Tint glass with accent (glass_tint)	✅ Default off. Tints the header/content glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when header or content surface = Glass.

Color schemes

Setting	What it does
🔧 Use separate header/content schemes	✅ Default off. When on, header and content can use different color schemes (e.g., dark header + light content). Exposes 2× (single + dark + light) scheme pickers.

Effects + behavior

Setting	What it does
🔧 Drop shadow	✅ Default off.
🔧 Accent glow	✅ Default off.
🔧 Open by default	✅ Default off. Item starts expanded on page-load.

10.14.7 Tab block (tab)

A single tab inside the Tabs section (§10.7). The tab button at the top + content panel below.

Setting	What it does
🔧 Title	✅ Default Tab. The tab label. Empty title renders an icon-only tab (with auto aria-label “Tab N”).
🔧 Heading font	Body / Subheading / Heading (✅ default) / Accent.
🔧 Icon	None (✅ default) / Info / Star / Heart / Package / Truck / Refresh / Check / Custom.
🔧 Custom icon	Image picker (visible when icon = Custom).
🔧 Icon color	Optional color override.

Accepted nested blocks: heading · text · button · group · image · icon · divider · spacer — drop these inside the tab to compose the panel content.

10.14.8 Contact Form block (contact-form)

The form inside the Contact Form section (§10.11). All form-field toggles + button + scheme live here.

Fields

Setting	What it does
🔧 Show phone	✅ Default off. Add a phone-number field.
🔧 Require phone	✅ Default off. Visible when Show phone is on.
🔧 Show subject	✅ Default off. Add a subject line field.

The form always shows Name, Email, and Message fields (these are required by Shopify’s {% form 'contact' %} API and cannot be hidden).

Layout

Setting	What it does
🔧 Field label align	Inherit (✅ default) / Left / Center / Right.

Submit button

Setting	What it does
🔧 Submit button label	✅ Default Send message.
🔧 Button style	Primary (✅ default) / Secondary / Ghost / Outline.
🔧 Button alignment	Inherit (✅ default) / Left / Center / Right. Visible when Button full width is off.
🔧 Button full width	✅ Default on.

Success message

Setting	What it does
🔧 Success message	✅ Default Thanks for con…. Shown after a successful submission.

Surface

Setting	What it does
🔧 Surface	Solid (✅ default) / Glass / Transparent.
🔧 Tint glass with accent (glass_tint)	✅ Default off. Tints the form’s glass with the scheme accent (strength = Effects → Glass tint intensity). Only visible when Surface = Glass.
🔧 Card radius	Range 0–32px, step 2. ✅ Default 16px.
🔧 Drop shadow	✅ Default off.
🔧 Accent glow	✅ Default off.
🔧 Custom color scheme	✅ Default off. When on, exposes scheme + dark/light pair.

Next

Chapter 11 — Templates and 12 — Cart — page templates and the cart experience.