A block is content inside a section or inside a supported parent block. The choices in Add block depend on that parent. Structural blocks such as Slide, Tab and Column are not standalone sections. Product-page information blocks and other section-specific blocks are documented in their section tutorial.
Accordion item
Add this inside Accordion. Set Heading and optional Caption, then add child content blocks for the expanded answer. Open by default controls this item's starting state.
Accordion item controls (5)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Heading | Text | Default: Accordion item. |
| Caption | Text | Default: Not set. |
| Icon image | Choose an image | Default: Not set. |
| Icon image size | 20–80 px; step 4 | Default: 32. This control appears only when the relevant layout or related option is selected. |
| Open by default | On / Off | Default: Off. |
Supported nested content includes:
Story chapter
Add this inside Brand story. Choose its story type, date/label and image or video, then add nested editorial content. Configure mobile content order separately from media position. For a video chapter, test its cover after reordering chapters in the editor.
Story chapter controls (20)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Chapter / Story type | Founder · Mission · Heritage · Milestone · Custom | Default: Milestone. |
| Chapter / Label | Text | Default: A CHAPTER. |
| Chapter / Year or date | Text | Default: 2026. |
| Chapter / Media position | Inherit · Left · Right | Default: Inherit. Inherit follows the section layout. |
| Chapter / Content vertical alignment | Top · Center · Bottom | Default: Center. |
| Media / Media type | Image · Video | Default: Image. |
| Media / Image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Alt text | Text | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Video source | Shopify-hosted video · YouTube or Vimeo | Default: Shopify-hosted video. This control appears only when the relevant layout or related option is selected. |
| Media / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Video URL | YouTube / Vimeo URL | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Playback | Click to play · Autoplay muted | Default: Click to play. This control appears only when the relevant layout or related option is selected. |
| Media / Cover image | Choose an image | Default: Not set. Optional. A Shopify-hosted video's original cover is used when this is blank. This control appears only when the relevant layout or related option is selected. |
| Media / Loop video | On / Off | Default: On. This control appears only when the relevant layout or related option is selected. |
| Media / Show video controls | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Media / Media ratio | Portrait · Square · Landscape · Wide | Default: Landscape. |
| Supporting image / Show supporting image | On / Off | Default: On. Used by Layered story and Editorial story layouts. |
| Supporting image / Image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Supporting image / Alt text | Text | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Mobile / Content order | Image first · Content first | Default: Image first. |
Supported nested content includes:
Tile
Add this inside Collage. Set the tile background and overlay, add its child content and use custom desktop spans only when the selected collage layout calls for them.
Tile controls (14)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Background image | Choose an image | Default: Not set. |
| Background color | Choose a color | Default: #f2eee8. |
| Background color opacity | 0–100 %; step 5 | Default: 100. |
| Text color | Choose a color | Default: #333333. |
| Dark overlay opacity | 0–90 %; step 5 | Default: 0. |
| Use custom desktop size | On / Off | Default: Off. Turn this on to make the Columns and Rows settings below override the selected Section layout for this tile. |
| Columns spanned | 1 · 2 · 3 | Default: 1. This control appears only when the relevant layout or related option is selected. |
| Rows spanned | 1 · 2 | Default: 1. This control appears only when the relevant layout or related option is selected. |
| Content horizontal alignment | Left · Center · Right · Stretch | Default: Center. |
| Content vertical alignment | Top · Center · Bottom | Default: Bottom. |
| Desktop content padding | 0–80 px; step 4 | Default: 24. |
| Mobile content padding | 0–48 px; step 4 | Default: 20. |
| Content gap | 0–48 px; step 2 | Default: 16. |
| Corner radius | 0–40 px; step 2 | Default: 0. |
Supported nested content includes:
Column
Add this inside a Custom section Row. Set widths for desktop, tablet and mobile, then add content blocks inside the column. Review padding and alignment separately from row gaps.
Column controls (23)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Responsive width / Desktop width | 10–100 %; step 5 | Default: 50. |
| Responsive width / Tablet width | 10–100 %; step 5 | Default: 50. |
| Responsive width / Mobile width | 10–100 %; step 5 | Default: 100. |
| Desktop spacing / Padding top | 0–160 px; step 4 | Default: 24. |
| Desktop spacing / Padding bottom | 0–160 px; step 4 | Default: 24. |
| Desktop spacing / Padding left | 0–160 px; step 4 | Default: 24. |
| Desktop spacing / Padding right | 0–160 px; step 4 | Default: 24. |
| Mobile spacing / Padding top | 0–120 px; step 4 | Default: 20. |
| Mobile spacing / Padding bottom | 0–120 px; step 4 | Default: 20. |
| Mobile spacing / Padding left | 0–120 px; step 4 | Default: 20. |
| Mobile spacing / Padding right | 0–120 px; step 4 | Default: 20. |
| Background / Background color | Choose a color | Default: #ffffff. |
| Background / Background color opacity | 0–100 %; step 5 | Default: 0. |
| Background / Background image | Choose an image | Default: Not set. |
| Background / Background image opacity | 0–100 %; step 5 | Default: 100. This control appears only when the relevant layout or related option is selected. |
| Border / Border width | 0–12 px; step 1 | Default: 0. |
| Border / Border color | Choose a color | Default: #000000. |
| Border / Border style | Solid · Dashed · Dotted | Default: Solid. |
| Border / Border radius | 0–80 px; step 2 | Default: 0. |
| Content alignment / Horizontal alignment | Left · Center · Right · Stretch | Default: Stretch. |
| Content alignment / Vertical alignment | Top · Center · Bottom · Space between | Default: Top. |
| Content alignment / Content gap | 0–80 px; step 2 | Default: 16. |
| Advanced / Custom CSS class | Text | Default: Not set. Enter class names only, without a period. |
Supported nested content includes:
Row
Add this inside Custom section, then add Column blocks. Choose wrapping and direction for desktop/mobile; enable slideshow only when the columns should become a browsable sequence.
Row controls (15)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Slideshow / Enable slideshow | On / Off | Default: Off. |
| Slideshow / Show navigation arrows | On / Off | Default: On. This control appears only when the relevant layout or related option is selected. |
| Slideshow / Columns on desktop | 1 · 2 · 3 · 4 · 5 · 6 | Default: 3. This control appears only when the relevant layout or related option is selected. |
| Slideshow / Columns on tablet | 1 · 2 · 3 · 4 · 5 · 6 | Default: 2. This control appears only when the relevant layout or related option is selected. |
| Slideshow / Columns on mobile | 1 · 2 · 3 · 4 · 5 · 6 | Default: 1. This control appears only when the relevant layout or related option is selected. |
| Slideshow / Accessibility label | Text | Default: Content slideshow. This control appears only when the relevant layout or related option is selected. |
| Direction / Desktop direction | Row · Row reverse | Default: Row. |
| Desktop / Horizontal alignment | Start · Center · End · Space between · Space around · Space evenly | Default: Start. |
| Desktop / Vertical alignment | Top · Center · Bottom · Stretch | Default: Stretch. |
| Desktop / Gap | 0–120 px; step 4 | Default: 24. |
| Desktop / Wrap | Wrap · No wrap | Default: No wrap. |
| Mobile / Direction | Row · Column · Row reverse · Column reverse | Default: Column. |
| Mobile / Gap | 0–80 px; step 4 | Default: 16. |
| Mobile / Horizontal alignment | Start · Center · End | Default: Start. |
| Mobile / Vertical alignment | Start · Center · End | Default: Start. |
Supported nested content includes:
Slide
Add this inside Hero slideshow. Choose image or hosted video, desktop/mobile media and content positions, then add child content. The optional feature image is a separate layer with its own positioning controls.
Slide controls (36)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Content / Desktop content position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center left. |
| Content / Mobile content position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Content / Content width | 280–900 px; step 20 | Default: 600. |
| Content / Desktop content padding | 16–160 px; step 4 | Default: 64. |
| Content / Mobile content padding | 12–80 px; step 4 | Default: 24. |
| Content / Content gap | 0–80 px; step 4 | Default: 16. |
| Content / Text color | Choose a color | Default: #ffffff. |
| Media / Media type | Image · Shopify-hosted video | Default: Image. |
| Media / Desktop image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. This control appears only when the relevant layout or related option is selected. |
| Media / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Desktop media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Media / Mobile media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Media / Background color | Choose a color | Default: #6d6258. |
| Media / Background color opacity | 0–100 %; step 5 | Default: 100. |
| Media / Overlay color | Choose a color | Default: #000000. |
| Media / Overlay opacity | 0–90 %; step 5 | Default: 25. |
| Content image / Image | Choose an image | Default: Not set. When selected, the content and image display side by side on desktop. |
| Content image / Image alt text | Text | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Content image / Desktop image width | 25–60 %; step 5 | Default: 45. This control appears only when the relevant layout or related option is selected. |
| Content image / Mobile image width | 40–100 %; step 5 | Default: 80. This control appears only when the relevant layout or related option is selected. |
| Content image / Maximum image width | 300–1000 px; step 20 | Default: 700. This control appears only when the relevant layout or related option is selected. |
| Content image / Content and image gap | 0–120 px; step 4 | Default: 48. This control appears only when the relevant layout or related option is selected. |
| Content image / Image ratio | Natural · Square · Portrait · Landscape | Default: Portrait. This control appears only when the relevant layout or related option is selected. |
| Content image / Image fit | Cover · Contain | Default: Cover. This control appears only when the relevant layout or related option is selected. |
| Content image / Image crop position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. This control appears only when the relevant layout or related option is selected. |
| Content image / Image corner radius | 0–80 px; step 4 | Default: 0. This control appears only when the relevant layout or related option is selected. |
| Content image / Show image shadow | On / Off | Default: Off. This control appears only when the relevant layout or related option is selected. |
| Desktop image position / X position | -50–50 %; step 5 | Default: 50. -50% is left, 0% is center, and 50% is right. This control appears only when the relevant layout or related option is selected. |
| Desktop image position / Y position | -50–50 %; step 5 | Default: 0. 50% is top, 0% is center, and -50% is bottom. This control appears only when the relevant layout or related option is selected. |
| Desktop image position / Mobile position relative to content | Above content · Below content | Default: Below content. This control appears only when the relevant layout or related option is selected. |
| Mobile image position / X position | -50–50 %; step 5 | Default: 0. -50% is left, 0% is center, and 50% is right. This control appears only when the relevant layout or related option is selected. |
| Mobile image position / Y position | -50–50 %; step 5 | Default: 0. 50% is top, 0% is center, and -50% is bottom. This control appears only when the relevant layout or related option is selected. |
| Content image animation / Slide-in direction | From left · From right · From top · From bottom | Default: From right. This control appears only when the relevant layout or related option is selected. |
| Content image animation / Animation duration | 300–1600 ms; step 100 | Default: 800. This control appears only when the relevant layout or related option is selected. |
| Content image animation / Animation delay | 0–1000 ms; step 50 | Default: 100. This control appears only when the relevant layout or related option is selected. |
Supported nested content includes:
Hotspot
Add this inside Interactive image. Set a short marker text, descriptive accessible label, desktop/mobile coordinates and panel direction. Add child blocks for the actual information panel.
Hotspot controls (8)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Marker / Marker text | Text | Default: Not set. Use a short label such as 1, 2 or A. Leave blank to show a plus icon. |
| Marker / Accessible label | Text | Default: Explore image detail. Describes this marker for screen readers. |
| Desktop position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Desktop position / Vertical position | 0–100 %; step 1 | Default: 45. |
| Desktop position / Panel opening direction | Right · Centered · Left | Default: Right. |
| Desktop position / Panel vertical position | Below marker · Above marker | Default: Below marker. |
| Mobile position / Horizontal position | 0–100 %; step 1 | Default: 35. |
| Mobile position / Vertical position | 0–100 %; step 1 | Default: 45. |
Supported nested content includes:
Look
Add this inside Lookbook. Choose the scene image and caption, then add Product blocks inside the Look to connect real products to it.
Look controls (6)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Image | Choose an image | Default: Not set. |
| Image alt text | Text | Default: Not set. |
| Heading | Text | Default: The everyday edit. |
| Caption | Formatted text | Default: Not set. |
| Text position | Below image · Over image | Default: Below image. |
| Text alignment | Left · Center · Right | Default: Left. |
Supported nested content includes:
Product
Add this inside a Lookbook Look. Select a Product and place its marker against the scene; desktop and mobile positions can differ. Opening directions help keep the popup inside the screen.
Product controls (7)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Product | Choose a product | Default: Not set. |
| Desktop hotspot position / Horizontal position | 5–95 %; step 1 | Default: 50. |
| Desktop hotspot position / Vertical position | 5–95 %; step 1 | Default: 50. |
| Mobile hotspot position / Horizontal position | 5–95 %; step 1 | Default: 50. |
| Mobile hotspot position / Vertical position | 5–95 %; step 1 | Default: 50. |
| Hotspot product card / Horizontal opening direction | Open right · Centered · Open left | Default: Centered. |
| Hotspot product card / Vertical opening direction | Below marker · Above marker | Default: Below marker. |
Promotion badge
Use inside a compatible promotion composition. Enter a short, accurate label and choose icon, alignment and colors. It is a visual badge, not a store discount rule.
Promotion badge controls (6)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Text | Text | Default: Limited-time offer. |
| Icon | None · Bolt · Star · Percent | Default: Bolt. |
| Alignment | Left / Center / Right | Default: left. |
| Background color | Choose a color | Default: #f4d35e. |
| Text color | Choose a color | Default: #18251f. |
| Corner radius | 0–40 px; step 2 | Default: 20. |
Promo code
Use inside a compatible promotion section. Enter an actual Shopify discount code and configure its copy-button labels. Displaying or copying a code does not create or validate it in Shopify.
Promo code controls (8)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Label | Text | Default: Use code. |
| Code | Text | Default: SAVE20. |
| Show copy button | On / Off | Default: On. |
| Copy button text | Text | Default: Copy. This control appears only when the relevant layout or related option is selected. |
| Copied text | Text | Default: Copied. This control appears only when the relevant layout or related option is selected. |
| Alignment | Left / Center / Right | Default: left. |
| Background color | Choose a color | Default: #ffffff. |
| Text color | Choose a color | Default: #183127. |
Countdown
Use inside Countdown or a compatible promotion section. Set End date and time together with UTC offset, then review completed text and hiding behavior. The countdown does not schedule a Shopify discount.
Countdown controls (7)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Label | Text | Default: Offer ends in. |
| End date and time | Text | Default: Not set. Use YYYY-MM-DDTHH:MM, for example 2026-12-31T23:59. You can include a timezone, such as 2026-12-31T23:59+08:00. This timer does not schedule Shopify discounts. |
| UTC offset | Text | Default: Not set. For example +00:00 (UTC) or +08:00 (China). An offset in the end date takes priority. Leave blank for the visitor's local time. Set an offset for a worldwide deadline; update it for daylight-saving changes. |
| Text after countdown | Text | Default: This offer has ended. |
| Hide when complete | On / Off | Default: Off. |
| Time color | Choose a color | Default: Not set. |
| Alignment | Left / Center / Right | Default: left. |
Banner
Add this inside Split banner. Choose panel media and mobile overrides, add content blocks, then set desktop/mobile positions and overlays for that banner.
Banner controls (17)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Content / Desktop content position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Bottom left. |
| Content / Mobile content position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Bottom left. |
| Content / Content width | 240–700 px; step 20 | Default: 480. |
| Content / Desktop content padding | 16–120 px; step 4 | Default: 40. |
| Content / Mobile content padding | 12–80 px; step 4 | Default: 24. |
| Content / Content gap | 0–64 px; step 4 | Default: 12. |
| Content / Text color | Choose a color | Default: #ffffff. |
| Media / Media type | Image · Shopify-hosted video | Default: Image. |
| Media / Desktop image | Choose an image | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Mobile image | Choose an image | Default: Not set. Uses the desktop image when left blank. This control appears only when the relevant layout or related option is selected. |
| Media / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Media / Desktop media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Media / Mobile media position | Top left · Top center · Top right · Center left · Center · Center right · Bottom left · Bottom center · Bottom right | Default: Center. |
| Media / Background color | Choose a color | Default: #66574d. |
| Media / Background color opacity | 0–100 %; step 5 | Default: 100. |
| Media / Overlay color | Choose a color | Default: #000000. |
| Media / Overlay opacity | 0–90 %; step 5 | Default: 20. |
Supported nested content includes:
Tab
Add this inside Tabs. Set Tab label, then place the actual content blocks inside this panel. Keep labels short and make each tab's content useful on its own.
Tab controls (1)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Tab label | Text | Default: Tab. |
Supported nested content includes:
Button
Enter a clear Button label and matching Button link. Choose Primary or Secondary and its alignment. A second button uses its own label, link and style.
Button controls (8)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Button label | Text | Default: Learn more. |
| Button link | Choose or enter a link | Default: Not set. |
| Style | Primary · Secondary | Default: Primary. |
| Alignment | Left · Center · Right | Default: Left. |
| Gap between buttons | 4–40 px; step 2 | Default: 12. |
| Second button / Button label | Text | Default: Not set. |
| Second button / Button link | Choose or enter a link | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Second button / Style | Primary · Secondary | Default: Secondary. This control appears only when the relevant layout or related option is selected. |
Collection
Select a real Collection. Choose Editorial overlay or Standard card, and set contained width/alignment when this card appears within a larger tile.
Collection controls (6)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Collection | Choose a collection | Default: Not set. |
| Presentation | Editorial overlay · Standard card | Default: Editorial overlay. |
| Editorial card height | 220–600 px; step 20 | Default: 300. This control appears only when the relevant layout or related option is selected. |
| Card width | Fill tile · Contained | Default: Fill tile. |
| Alignment | Left · Center · Right | Default: Center. This control appears only when the relevant layout or related option is selected. |
| Maximum width | 200–1600 px; step 20 | Default: 600. This control appears only when the relevant layout or related option is selected. |
Custom Liquid
Enter only custom code you intend to maintain and preview it in an unpublished theme copy. Resource-dependent output needs the corresponding page context.
Custom Liquid controls (1)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Custom Liquid | Custom Liquid | Default: Not set. Add supported Liquid or HTML. |
Divider
Use a real line between neighboring content blocks. Configure width, thickness, color and spacing rather than uploading an image of a rule.
Divider controls (5)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Divider width | 10–100 %; step 5 | Default: 100. |
| Thickness | 1–12 px; step 1 | Default: 1. |
| Color | Choose a color | Default: #d1d1d1. |
| Vertical spacing | 0–80 px; step 4 | Default: 8. |
| Alignment | Left · Center · Right | Default: Left. |
Heading
Write a clear heading, choose its visual size separately from its heading level, and preserve one main H1 per page. Supporting sections normally use H2 or lower levels.
Heading controls (4)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Heading | Formatted inline text | Default: Add a heading. |
| Heading level | H1 · H2 · H3 · H4 | Default: H2. |
| Heading size | Small · Medium · Large | Default: Medium. |
| Alignment | Left / Center / Right | Default: left. |
Icon
Choose a built-in icon, its size and color. Supply an accessible label when the icon communicates information that is not already stated in adjacent text.
Icon controls (5)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Icon | Account · Cart · Chevron · Search · Tag | Default: Tag. |
| Size | 16–160 px; step 4 | Default: 40. |
| Color | Choose a color | Default: #111111. |
| Alignment | Left · Center · Right | Default: Left. |
| Accessible label | Text | Default: Not set. Optional. Leave blank when the icon is decorative. |
Image
Choose the Image, meaningful Alt text and an optional Link. Configure image ratio, maximum width and alignment so the original is not enlarged beyond a useful size.
Image controls (6)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Image | Choose an image | Default: Not set. |
| Alt text | Text | Default: Not set. Describe informative images. Leave blank for decorative images. |
| Link | Choose or enter a link | Default: Not set. |
| Image ratio | Natural · Square · Portrait · Landscape | Default: Natural. |
| Maximum width | 100–2000 px; step 20 | Default: 1200. |
| Alignment | Left · Center · Right | Default: Left. |
Link
Provide both a descriptive Link label and Link destination. Use the arrow option for visual emphasis while keeping the text understandable without the icon.
Link controls (4)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Link label | Text | Default: Learn more. |
| Link | Choose or enter a link | Default: Not set. |
| Show arrow | On / Off | Default: Off. |
| Alignment | Left · Center · Right | Default: Left. |
Product
Select an actual Product and choose Editorial overlay or Standard card. Price and availability follow the product; a decorative image alone would not keep them synchronized.
Product controls (6)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Product | Choose a product | Default: Not set. |
| Presentation | Editorial overlay · Standard card | Default: Editorial overlay. |
| Editorial card height | 220–600 px; step 20 | Default: 300. This control appears only when the relevant layout or related option is selected. |
| Card width | Fill tile · Contained | Default: Fill tile. |
| Alignment | Left · Center · Right | Default: Center. This control appears only when the relevant layout or related option is selected. |
| Maximum width | 200–1600 px; step 20 | Default: 600. This control appears only when the relevant layout or related option is selected. |
Rich text
Enter formatted text and links, then choose alignment. Keep paragraphs and list items concise and do not rely on color alone to convey meaning.
Rich text controls (2)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Text | Formatted text | Default: Add formatted text to this column.. |
| Alignment | Left / Center / Right | Default: left. |
Spacer
Set desktop and mobile heights independently. Review spacing already supplied by its parent rather than combining several large empty gaps.
Spacer controls (2)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Desktop height | 0–200 px; step 4 | Default: 24. |
| Mobile height | 0–120 px; step 4 | Default: 16. |
Text
Enter Text and choose the visual Text style and alignment. Visual Title style is not a replacement for the separate Heading block's semantic level.
Text controls (3)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Text | Text | Default: Text. |
| Text style | Title · Subtitle · Normal text | Default: Title. |
| Alignment | Left / Center / Right | Default: left. |
Video
Match Video source to the hosted video or supported external URL. Set playback, cover, ratio and fit; autoplay is muted and can still depend on browser preferences. For click-to-play video, test its cover again after moving the block in the editor. For hosted video, optionally set up to two direct HTTPS WebVTT URLs, matching language codes and display names. URL and language are both required for each track. External hosts must allow cross-origin requests. Caption tracks keep native controls available even for autoplay. Use the player to select a language or turn captions off. Provider captions and product-gallery/Quick view videos are configured separately.
Video controls (18)
| Setting | Control or choices | Default and guidance |
|---|---|---|
| Video / Video source | Shopify-hosted video · YouTube or Vimeo | Default: Shopify-hosted video. |
| Video / Video | Choose a Shopify-hosted video | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Video / Video URL | YouTube / Vimeo URL | Default: Not set. This control appears only when the relevant layout or related option is selected. |
| Video / Playback | Click to play · Autoplay muted | Default: Click to play. |
| Video / Cover image | Choose an image | Default: Not set. Optional. The original video cover is used when this is blank. This control appears only when the relevant layout or related option is selected. |
| Video / Loop video | On / Off | Default: Off. |
| Video / Show controls | On / Off | Default: Off. Caption tracks always enable player controls so visitors can select a language or turn captions off. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / WebVTT file URL | Choose or enter a link | Default: Not set. Use a direct HTTPS link to a .vtt file. External hosts must allow cross-origin requests. Leave blank to omit this track. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / Caption language | Text | Default: Not set. Enter the language code matching the file, for example en, es or zh-CN. Required when a file is set. This control appears only when the relevant layout or related option is selected. |
| Captions 1 / Caption name | Text | Default: Not set. Name shown in the player, for example English. Uses the language code when blank. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / WebVTT file URL | Choose or enter a link | Default: Not set. Use a direct HTTPS link to a .vtt file. External hosts must allow cross-origin requests. Leave blank to omit this track. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / Caption language | Text | Default: Not set. Enter the language code matching the file, for example en, es or zh-CN. Required when a file is set. This control appears only when the relevant layout or related option is selected. |
| Captions 2 / Caption name | Text | Default: Not set. Name shown in the player, for example English. Uses the language code when blank. This control appears only when the relevant layout or related option is selected. |
| Layout / Aspect ratio | Landscape (16:9) · Square (1:1) · Portrait (4:5) | Default: Landscape (16:9). |
| Layout / Video fit | Cover · Contain | Default: Cover. |
| Layout / Maximum width | 200–2000 px; step 20 | Default: 1200. |
| Layout / Alignment | Left · Center · Right | Default: Left. |
| Layout / Corner radius | 0–40 px; step 2 | Default: 0. |