Home Sections

Sections

• 19 articles

Featured collections

Featured collections Featured collections shows a row or grid of collections you pick, each as a card linking to that collection, under a heading. It lives under the Products group in Add section. Add the section 1. In the theme editor, open the page where you want it, usually the home page. 2. Click Add section and open the Products group. 3. Choose Featured collections. Section content The heading area is a content slot named Header in the block list. Expand it to edit the blocks inside: - An Eyebrow: the small label above the heading. - A heading, built from an Accent text block so you can italicize part of it for an accent color. - A Rich text intro line below the heading. Edit, reorder, or remove these the same way you would any block. To learn how content slots work, see Sections, blocks, and groups. Settings - Collections: pick the collections to show, in the order you want them. You can add up to 6. Each one becomes a card linking to that collection. Leaving it empty shows placeholder cards so you can build the layout; fill it in before you publish. - Button label: the text on the call-to-action pill inside each collection card (it also feeds each card's accessible name). The default is View collection. Common settings Featured collections uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - A card uses the collection's image. Set one in the Shopify admin under Products > Collections, or the card falls back to the first product's image, then to a placeholder. - The layout rebalances to the number of collections, on a 12 column grid. Two collections show as two half width plates, three as equal thirds in one row, four as a two row mosaic (a wider plate, two narrower ones, then a wider one again), and five or six as a uniform four across grid. So the row stays even at every count, but the shape changes as you add cards. - To feature individual products instead of collections, use the Featured products section.

Last updated on Jun 24, 2026

Set up the Hero slideshow

Set up the Hero slideshow The Hero slideshow is a full-width banner that rotates through one or more slides at the top of a page. Each slide carries its own background image or video and its own stacked content (heading, subheading, eyebrow, button). You add it from the Banners group under Add section. Hero slideshow with a heading and button Add the section 1. In the theme editor, open the page where you want the banner. The home page is the usual spot. 2. Click Add section and open the Banners group. 3. Choose Hero slideshow. It arrives with three example slides you can edit, reorder, add to, or remove. Build a slide Each slide is a Slide block inside the section. The slide holds two things: a background (the Background settings) and the content stacked on top of it. That content is itself made of blocks you add inside the slide, such as a heading, a rich text paragraph, an eyebrow, and a button. 1. In the section, open a Slide block. 2. Set its background under Background (see Slide settings below). 3. Add or edit the content blocks inside the slide, then drag them to set their stacking order. 4. To add another slide, use Add block in the section and pick Slide. To reorder slides, drag them in the block list. A slideshow holds up to 20 slides. Keep one clear message per slide. Long headings fight the image and read poorly on phones. Section settings These controls sit in the section panel and apply to the whole slideshow. Entry choreography Controls how the sections below this one appear as the page scrolls in. Choose None, Rounded corners, or Rounded corners, then drift. Color - Color scheme. Sets the colors for the slideshow frame and any content that is not overridden per slide. - Use dark header theme over this section. Switches the header to its dark style while it sits over this section, so the links stay readable on a dark image. - Overlay this section with the header. Lets the slideshow sit behind a transparent header. This only works when the slideshow is at the top of the page. While it is on, the margin controls for the top edge are hidden, because the section runs under the header instead of below it. Size - Desktop height. The slideshow height on desktop, as a percent of the screen height (70 to 100). - Mobile height. The slideshow height on phones, as a percent of the screen height (65 to 100). Navigation - Show thumbnails. Shows small slide previews a visitor can click to jump between slides. Thumbnails appear only when the slideshow has more than one slide. - Thumbnail side. Places the thumbnail rail on the Right or the Left. Available when Show thumbnails is on. Autoplay - Auto-rotate slides. Advances the slides on their own. - Rotate every. How long each slide stays before the next one appears, in seconds (3 to 20). Available when Auto-rotate slides is on. - Pause on hover. Stops the rotation while a visitor hovers over the slideshow. Available when Auto-rotate slides is on. Margin Space outside the section. - Top. Space above the section, in pixels. Hidden when Overlay this section with the header is on. - Bottom. Space below the section, in pixels. - Use different margins on mobile. Reveals separate margin controls for phones. - Top (mobile) and Bottom (mobile). Per-phone spacing, shown once Use different margins on mobile is on. Slide settings These controls live on each Slide block, so every slide can differ. Background - Media type. Choose Image or Video for the background. - Image. The desktop background image. Shown when Media type is Image. - Mobile image. A separate image for phones. Falls back to the desktop image when not set. Shown when Media type is Image. - Video. The background video, played muted and looping. Shown when Media type is Video. Color - Color scheme. The color scheme for this slide. Set it per slide so the text reads against that slide's background. Overlay A tint laid over the media so light text stays readable. - Overlay. Choose None, Solid, or Gradient. - Color. The overlay color, with transparency. Shown when Overlay is Solid. - Overlay opacity. How strong the gradient tint is, as a percent. Shown when Overlay is Gradient. Layout - Content alignment. Side aligns the content to the edge opposite the thumbnails. Center places it in the middle. - Gap. Vertical space between the stacked content blocks, in pixels. - Mobile gap. The same spacing on phones, in pixels. Animation - Image animation. A slow motion on the background image. Choose None, Drift, or Zoom. Tips - The first slide loads first and is the LCP image. Pick a sharp, well-composed image for it, and keep the heading short so the banner paints fast. - For the overlay header look, give the first slide a dark image or a stronger Overlay so the header links stay readable, and leave Use dark header theme over this section on. - On a slide with a video background, the overlay still applies. Raise Overlay opacity or switch to a Solid overlay if the text gets lost in busy footage. - Two or three focused slides usually convert better than many. Put your most important slide first, since many visitors never reach the second one.

Last updated on Jun 20, 2026

Featured articles

Featured articles Featured articles shows recent posts from one blog as a row of cards. Each card links to its post and can show the image, category, title, excerpt, date, and author. Add it from Add section, where it appears under Storytelling. Add the section 1. Open the page in the theme editor and click Add section. 2. Under Storytelling, choose Featured articles. 3. In the section settings, set Blog to the blog you want to pull posts from. The section starts with a header and a card. The cards fill in from the blog you pick, newest first, so you do not add them one by one. The header is a content slot, and the card is the layout each post uses. Section settings - Blog: the blog the section reads posts from. Leave it unset and the section shows placeholder cards in the editor so you can arrange the layout while you set things up. - Articles to show: how many posts appear, from 2 to 6. Set 2 and the cards form a two column row, otherwise a three column row. On phones the cards stack. Header The header sits above the cards. It is a content slot holding an eyebrow (From the blog by default) and a heading (Keep reading. by default). Select those blocks under the section to change their text, or remove them for cards on their own. See Sections, blocks, and groups. Card (Blog post card) One Blog post card block sets the look of every card in the row. Select it under the section to change these controls. - Aspect ratio: the shape of each card image. Landscape (3:2), Square (1:1), Portrait (4:5), or Wide (16:9). - Show category: shows the post's first tag above the title, as a category. - Show excerpt: shows the post excerpt. When a post has no excerpt set, the start of its content is used. - Show author: shows the post author. Off by default. - Show date: shows the published date. The card image, title, and link come from the post itself, so you set those in the blog post, not here. When Show author and Show date are both on, they appear together separated by a dot. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - The category is each post's first tag. To control what shows there, set the tag you want first on the post in the Shopify admin. - One section reads one blog. To feature posts from a second blog, add a second Featured articles section.

Last updated on Jun 20, 2026

Countdown

Countdown Countdown is a starting layout for the flexible Section. It places a Countdown timer over a background image, with a heading, an eyebrow, and a call to action beside the timer. Use it for a launch, a product drop, or a sale that ends on a set date. For how presets and blocks fit together, see Sections, blocks, and groups. Countdown section with a timer over a background image Add it 1. In the theme editor, open the page where you want the countdown. 2. Click Add section. 3. Under Layout, choose Countdown. It arrives as a Section holding a Parallax pane with a background image, a text Group, and a Countdown timer block. Change any setting and swap, add, or remove the blocks inside it. Set the background The background image, overlay, and rounded card live on the Parallax pane inside the section, not on the section itself. Select the Parallax pane in the block list to set its Background image and Overlay. Those are the standard container controls covered in Common section settings. Countdown timer block Select the Countdown timer block to set the target and how it counts. Date and time - Date: the day the timer counts down to. Format is YYYY-MM-DD. - Time: the time of day on that date, in 24-hour HH:MM format. The timer uses your store timezone. - Show days: show a days unit alongside hours, minutes, and seconds. Turn it off for a countdown shorter than a day. - Show separator: show a colon between each unit. Appearance - Alignment: where the timer sits in its space. Left, Center, or Right. - Size: scales the timer from 50% to 150% of its default size. When the timer expires - Hide when expired: on by default. When the target date and time pass, the timer disappears from the live page. In the editor it stays visible so you can keep working on it. - Expired message: shown in place of the timer after it reaches zero. This field appears only when Hide when expired is off. Use it for a line like "Now open" once the countdown ends. This block also uses the standard Padding, Margin, and Visibility controls. See Common section settings. Section settings The Section that wraps the timer uses the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. See Common section settings. Tips - The countdown only disappears on the live storefront. In the editor it keeps showing past its date so you can edit it, so check the published page to confirm the expired state. - To show a message instead of an empty space when the sale ends, turn off Hide when expired and fill in Expired message. - Set the Date and Time to your store timezone, not the customer's. A shopper in another timezone sees the same remaining time, counting to the same moment.

Last updated on Jun 20, 2026

Display list

Display list Display list is a section that presents named items in two stacks, one above and one below a center statement line, with a decorative illustration behind the rows. Each row reveals a photo when a visitor hovers or focuses it. It appears in Add section under the Storytelling group, and cannot be added to the header, footer, or an overlay section group. For how sections and blocks fit together, see Sections, blocks, and groups. Display list section Add the section 1. Open your theme in the Shopify theme editor. 2. Pick the page where you want the list. 3. Click Add section, then choose Display list. The section starts with four items: two in the Above stack, two in the Below stack, a center Manifest line, and an Illustration behind the rows. The section's blocks Under the section in the block list you see four nested blocks: - Illustration: a decorative graphic that sits behind the rows. - Above: the top stack of rows. - Manifest: the center statement line between the two stacks. - Below: the bottom stack of rows. Above and Below are stacks. You add Item blocks inside each one. A row's position (top or bottom) comes from which stack holds it, so an item has no setting for that. Add or edit items 1. In the block list, open Above or Below. 2. Click Add block, then choose Item. 3. Set the item's fields (below). 4. Drag items inside the stack to reorder them. Item settings Each Item is one row. Click an item in the block list to edit it. - Title: the main text of the row. It is the largest text and drives the row's size, so a shorter title renders larger. - Caption first line: the first line of the small label next to the title. - Caption second line: a second small label line. Leave it empty to show only the first line. - Image: a photo for this row. It stays hidden until a visitor hovers or focuses the row, then it follows the pointer. Leave it empty for a text-only row. - Label side: which side the caption label sits on. Choose Right or Left. Manifest settings Manifest is the center statement between the two stacks. Click it in the block list to edit it. - Text: the statement line shown in the middle of the section. - Hover cursor image: an image that follows the pointer over the center of the section. Leave it empty to skip it. Illustration settings Illustration is the static graphic behind the rows. The default ships a built-in drawing marked Decorative. Click it in the block list to edit it. - Illustration: pick the drawing from the grouped list (for example Suit, Map, Mountains). - Decorative: keep this on when the drawing is purely visual, so screen readers skip it. Turn it off to give it alternative text. - Size: the height as a percentage of the standard height. Every illustration shares the same height at a given value, so a row of them lines up. - Use a different size on mobile: turn on to set a separate Mobile size for phones. - Its ink color follows the section text by default (Text (auto)). Switch to Custom to pick a fixed color. The Illustration block also uses the standard Margin controls. See Common section settings. Section settings This section uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Titles set the visual weight of a row. A short Title renders large, a long one renders smaller. Use that to control which rows stand out. - Row photos appear only on hover or focus, so they are not visible on first load. Set an Image when you want a reveal on interaction, and leave it empty for a clean text row. - Switch a row's caption to the other side with Label side when one side feels crowded. - The default ships two items in Above and two in Below. Add or remove items in either stack to balance the two halves.

Last updated on Jun 24, 2026

Image banner

Image banner Image banner is a heading and short text centered over a background image, the full width of the page. It is a preset of Reign's flexible Section, so once you add it you have the section's full set of controls. It lives under the Storytelling group in Add section. Image banner with a heading and button over a photo Add the section 1. In the theme editor, open the page where you want the banner. 2. Click Add section and open the Storytelling group. 3. Choose Image banner. It starts with an eyebrow, a heading, and a caption over an empty background. Add your image and edit the text. Set the background image The image is the section's background, set under Appearance. 1. Select the section and open Appearance. 2. Set Background to Image. 3. Pick your Image, and a Mobile image if you want a different crop on phones. A dark Overlay gradient is already on so the text stays readable. Adjust it under Appearance if your image is light or dark. Edit the content The banner ships with three blocks, stacked and centered. Select each one in the block list to edit it: - An Eyebrow: the small label above the heading. - A heading: the large line, built from an Accent text block so you can italicize part of it for an accent color. - A Rich text caption: the supporting line below the heading. Add a Button block if you want a call to action, or remove any block you do not need. Size and height By default the banner ships at 70% of the screen height on desktop and 60% on phones. Change this under Size with Minimum height. Set Width to Page if you want it to match your content width instead of spanning the screen. Common settings Image banner uses the standard Layout, Size, Appearance, Border, Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Pick an image with room for text. A busy center makes the heading hard to read, even with the overlay. - Keep the heading to one line or two. A long heading competes with the image and wraps awkwardly on phones. - For two banners side by side, use the Split banners preset instead. For a banner with the header sitting over it, see the Hero slideshow.

Last updated on Jun 20, 2026

FAQ section

FAQ section The FAQ section pairs a heading area with a list of expandable questions. Each question opens to reveal its answer. Use it on the homepage, a page, or anywhere shoppers look for common answers without leaving the page. FAQ section with expandable questions Add the section 1. In the theme editor, open the page where you want the FAQ. 2. Click Add section. 3. Under the Storytelling group, choose FAQ. The section arrives as one preset: a filled-in heading area and five sample questions. Edit or replace the samples with your own. You can add up to 24 questions in one section. The heading area The heading area is a content slot named Header at the top of the section. It comes preloaded with an illustration, an eyebrow, a heading, a short intro paragraph, and a link button. These are blocks: click any one to change its text, remove the ones you do not want, or add more. Add and edit questions Each question is a Question block in the section's blocks. 1. Select the FAQ section. 2. Click Add block and choose Question. 3. Fill in the question and its answer. 4. Drag blocks in the block list to reorder them. Question settings Open a Question block to set: - Icon: the icon shown next to the question. Pick one from the grouped list. Groups include Shipping & delivery, Payments, Trust & guarantees, Service & contact, Products & services, Sustainability, Materials & care, Sizing, Seasonal & promotions, Store & location, and General. - Category: a short topic label above the question, such as Shipping or Returns. Leave it empty to hide it. - Question: the text on the row shoppers click to expand. - Answer: the text revealed when the row opens. This field accepts rich text, so you can add links, bold, and lists. Section settings This section uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Every row starts collapsed, including the first. The section opens no answer on load. - Use Category only when a one-word topic helps shoppers scan the list. Leave it blank for a cleaner row. - Long answers are fine. The answer reveals at full height when a shopper opens the row, so you do not need to keep them short. - For a collapsible row on a product page rather than a standalone section, use the Collapsible row block in the Product info column instead. See Product page layout.

Last updated on Jun 24, 2026

Content blocks reference

Content blocks reference Content blocks are the small pieces you drop into a section to build a layout: a paragraph, an image, a button, a countdown. For how blocks fit inside sections and groups, see Sections, blocks, and groups. This article documents one block per heading and covers only the settings unique to each. The shared controls (padding, margin, color, visibility) are described once in Common section settings. Add a content block 1. In the theme editor, select the section you want to add to. 2. Open the section's blocks and click Add block. 3. Pick the block. Rich text, Text, Button, Eyebrow, and Tabs sit under the Basic group. Image and Video sit under the Media group. Icon and Illustration are under Decorative, Quote and Marquee under Storytelling, Countdown timer under Promotional, and Separator under Layout. 4. Configure it in the settings panel. Each section allows its own set of blocks, so a block you see in one section may not appear in another. Rich text A multi-paragraph text block for body copy. The Text field accepts paragraphs, headings, lists, and links. - Typography: pick a Preset (the named text styles from Display down to Caption) and a Font (Body or Heading). Choose Custom under Preset to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap. - Layout: Width is Fit (shrinks to the text) or Fill (takes the available width). Max width caps the line length: None, Narrow, Medium, Normal, or Custom (sets a Custom width in pixels). Inherit alignment keeps the parent's alignment; turn it off to set Alignment for this block. - Appearance: Apply custom color sets a Custom color for the text. Emphasis dims the text to Muted or Faded. This block also uses the standard Padding controls. See Common section settings. Text A single plain-text block. Same typography surface as Rich text, but the Text field is plain: line breaks become new lines, with no headings, lists, or links. Use it for a short line where formatting is more than you need. Its settings match Rich text above: Typography, Layout (Width, Max width, Inherit alignment, Alignment), and Appearance (Apply custom color, Emphasis). This block also uses the standard Padding controls. See Common section settings. Eyebrow A short label that sits above a heading, in small uppercase type. The Text field holds the label. - Use accent color: paints the label in the scheme's accent. When on, Accent color picks Default (the standard accent) or Overlay (the accent tuned for text over images). - Decorative line: adds a hairline beside the text. None, Left (one line), or Both. - Layout: Inherit alignment keeps the parent's alignment; turn it off for Alignment. Emphasis dims the text to Muted or Faded. - Appearance: Apply custom color sets a Custom color. This block also uses the standard Margin controls. See Common section settings. Quote A styled blockquote with an optional quotation mark. The Text field holds the quote. - Typography: pick a Preset and Font, or choose Custom to expose Size, Line height, Thickness, Letter spacing, Text transform, and Line wrap. - Layout: Alignment and Mobile alignment (Same as desktop keeps the desktop value). Max width is Full, Narrow, or Medium. - Decorative mark: Show quotation mark adds a large quote glyph. Mark style is Double or Single. - Italic accent and Bold accent: style any italic or bold words inside the quote. Style for each is None, Color, Underline, Gradient sweep, or Shimmer. Keep italic and Keep bold keep the original slant or weight alongside the accent. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. Apply custom color sets a Custom color for the text. This block also uses the standard Padding controls. See Common section settings. Image A single image with its own size and frame. Image is the desktop picture; Mobile image swaps in on phones (it falls back to the desktop image when not set). - Link: makes the image clickable. When set, Open in new tab and Link label (read to screen readers) appear. - Aspect ratio: Original keeps the file's own ratio, or pick Square (1:1), Landscape (16:9), Portrait (4:5), or Custom. Custom replaces the ratio with a fixed Custom height in the size groups. - Desktop size and Mobile size: Width is Full, Percent, or Pixels, each revealing its own Custom width field. - Border: Style (None, Solid, Dashed, Dotted, Inset, Outset) with Border thickness and Color, plus Corner radius to round the frame. - Animation: None, Sway left, or Sway right gives the image a slow tilt. This block also uses the standard Padding controls. See Common section settings. Video Plays an uploaded or hosted video. - Media: Source is Uploaded (pick a Video from your files) or External URL (paste a YouTube or Vimeo URL, and set Video alt text for accessibility). Poster image is the still shown before play; it falls back to the video's preview frame. - Playback: Autoplay (forces the video to play muted), Loop, Show controls, and Mute. - Appearance: Aspect ratio is Landscape (16:9), Classic (4:3), Square (1:1), or Portrait (9:16). This block also uses the standard Margin controls. See Common section settings. Button A link or action button. See Buttons for the full styling reference. In short: Label is the visible text, Link is the destination, Style and Size match the theme button styles, and Show arrow adds a trailing arrow. Desktop size and Mobile size set the button width. The block uses the standard Margin controls. Icon A small symbol, picked from a bundled set or uploaded. - Width: the icon size in pixels. - Type: Default picks a bundled Icon from the grouped list (Shipping & delivery, Payments, Materials & care, and so on). Custom uploads your own Custom icon and exposes Make icon round. - Apply custom color: for a default icon, overrides the inherited color with a Custom color. A default icon otherwise takes the section's text color. This block also uses the standard Margin controls. See Common section settings. Illustration A hand-drawn line illustration from Reign's set, rendered in the scheme's text color. - Illustration: pick the drawing from the grouped list (Wardrobe, Footwear, Kitchen, Travel, and many more). - Size: a percentage of the standard illustration height, so a row of illustrations lines up at the same value. Use a different size on mobile adds a Mobile size. - Decorative: marks the illustration as decoration so screen readers skip it. Leave it off when the drawing carries meaning. - Color: Text (auto) follows the scheme text color, or Custom sets a fixed Custom color. This block also uses the standard Margin controls, including separate mobile margins. See Common section settings. Countdown timer A live timer counting down to a date. - Date (format YYYY-MM-DD) and Time (24-hour HH:MM, in your store timezone) set the target. - Show days: includes a days unit alongside hours, minutes, and seconds. - Show separator: shows a colon between the units. - Alignment: Left, Center, or Right. - Size: scales the digits as a percentage. - Hide when expired: removes the timer once it reaches zero. Turn it off to keep it visible and show an Expired message instead. In the editor the timer stays visible so you can keep styling it. This block also uses the standard Padding, Margin, and Visibility controls, including separate mobile values. See Common section settings. Marquee A row of text and images that scrolls sideways on a loop. You fill it with child blocks. - Add Text and Image blocks inside the marquee. A Text child holds a phrase with its own Color (Auto, Accent, or Custom). An Image child holds a single picture, sized by the marquee's Image height. - Behavior: Separator is the glyph placed between items (Bullet (•), Slash (/), Angle bracket (›), Middle dot (·), Star (✦), Diamond (◆), a long dash, or None). Scroll speed, Pause on hover, and Direction (Forwards or Reverse) control the motion. Text size and Image height scale the items. - Color: Inherit color scheme keeps the section scheme; turn it off for a Color scheme. This block also uses the standard Margin controls. See Common section settings. Separator A divider line. - Orientation: Horizontal or Vertical. - Appearance: Style is Solid, Dashed, Dotted, or Fade (a line that fades at both ends). Thickness and Opacity set its weight and strength. - Size: for a horizontal line, Limit width caps the length and reveals Width. For a vertical line, Height sets the length. - Color: Apply custom color sets a Custom color; otherwise the line takes the scheme color. This block also uses the standard Margin controls. See Common section settings. Tabs A pill-style tab group: a bar of labelled tabs above a panel that swaps as the shopper switches tabs. You fill it with Tab child blocks, and each Tab holds its own content blocks. - Bar label: an accessible label for the tab bar, read to screen readers. - Card surface: wraps the panel in a raised card surface instead of sitting flush with the section. - Each Tab child carries a Tab name, the text shown on its pill in the bar. Open a Tab and add content blocks for what shows when it is selected. This block also uses the standard Color and Padding controls. See Common section settings. Tips - Width and Max width do different jobs on the text blocks. Width decides whether the block fills its column, while Max width caps how long a line of text can run for readability. - Inherit alignment and Inherit color scheme are on by default so a block matches its section. Turn them off only when one block needs to differ. - Turn on Decorative for an Illustration that is purely ornamental, so it does not clutter the page for screen reader users. Leave it off when the drawing stands in for a label. - For a looping logo strip, set the Marquee Separator to None and add Image children instead of text.

Last updated on Jun 27, 2026

Video with text

Video with text Video with text is a preset of the flexible Section. It places a video on one side and a caption (eyebrow, heading, text, button) on the other, built from a Proportional group. On phones the two sides stack, video first. It lives in Add section under the Storytelling group. Because it is a Section preset, the section itself carries the controls in Common section settings. This article covers the two pieces inside it: the Video block and the caption. Video with text section Add it 1. In the theme editor, open the page you want to edit. 2. Click Add section and pick Video with text under Storytelling. 3. The section comes with a video on the left and a caption on the right. Edit each in the steps below. Edit the video Select the Video block in the section's blocks. Its settings are grouped under the editor's own headings. Media - Source: where the video comes from. Uploaded uses a file from your Shopify Files. External URL uses a YouTube or Vimeo link. - Video: shown when Source is Uploaded. Pick or upload a video file. - URL: shown when Source is External URL. Paste a YouTube or Vimeo URL. - Video alt text: shown when Source is External URL. Describe the video for screen readers. - Poster image: the still frame shown before the video plays. Leave it empty to fall back to the video's own preview frame. Playback - Autoplay: starts the video on load. Autoplay always plays muted, so Mute turns on with it. - Loop: restarts the video when it ends. - Show controls: shows the play, pause, and volume controls. On by default. - Mute: starts the video with no sound. Appearance - Aspect ratio: the shape of the video frame. Landscape (16:9), Classic (4:3), Square (1:1), or Portrait (9:16). The Video block also has standard Margin controls (top and bottom). See Common section settings. Edit the caption The caption side is a Proportional part holding four blocks you edit one by one: - Eyebrow: the small label above the heading (the preset reads "Watch"). - Accent text: the heading. Wrap a word in emphasis to give it the accent color. - Rich text: the body copy under the heading. - Button: the link below the text. Each of these is a standard content block. Add, reorder, or remove them like any block in the section's blocks, and swap in others (image, icon) if you want a different caption. Adjust the split and spacing The video and caption sit in a Proportional group. Select a Proportional part to change its Proportion (the width share of each side) or its mobile stacking. See Proportional group for how the proportion values compare. The section itself uses the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. See Common section settings. Tips - Use a real Poster image for an externally hosted video. The poster is what shows until a visitor clicks play, so it sets the first impression. - For a looping background-style clip, turn on Autoplay and Loop and turn off Show controls. Autoplay forces mute, which is what lets it start without a click. - Set Aspect ratio to Portrait (9:16) for phone-shot vertical video so it is not letterboxed.

Last updated on Jun 20, 2026

Media card slider

Media card slider Media card slider is a horizontal carousel of editorial cards. Each card carries its own image or video, an overlay, and stacked content (eyebrow, heading, text, button). It suits lookbooks, category highlights, or campaign callouts. Add it from Add section under the Media group. It cannot go in the header, footer, or overlay groups. Media card slider with overlay text Add the section 1. Open your store theme in the Shopify theme editor. 2. Pick the page where you want the slider (for example, the home page). 3. Click Add section. 4. Choose Media card slider. The section starts with a header content slot and three sample Slide blocks. Click a slide in the section's blocks to edit it, or use Add block to add another Slide. The header content slot holds your title and intro text as ordinary blocks. For how slots and blocks fit together, see Sections, blocks, and groups. Section settings These control the slider as a whole. Per-card content lives on each Slide block (below). Layout - Slides per view: how many cards show side by side on desktop, from 1 to 4. On narrow screens the carousel falls back to a single card you swipe through. - Gap: the space between cards in pixels, from 0 to 32. - Aspect ratio: the shape every card uses on desktop. Pick Wide (16:9), Landscape (3:2), Portrait (4:5), or Square (1:1). This applies to all cards, so it is the one place to change card proportions for the whole slider. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Slide settings Each Slide block holds one card. Open a slide to set its media, overlay, and layout. The text inside a slide (eyebrow, heading, paragraph, button) comes from blocks you add within the slide, so you control the wording and order there. Background - Media type: choose Image or Video for the card background. - Image: the desktop background image. Shown when Media type is Image. - Mobile image: an optional image for small screens. It falls back to the desktop image when not set. Shown when Media type is Image. - Video: the background video. It autoplays muted and loops. Shown when Media type is Video. Overlay The overlay is a tint over the media that keeps text readable. - Overlay: choose None, Solid, or Gradient. - Color: the tint color and opacity for a solid overlay. Shown when Overlay is Solid. - Overlay opacity: how strong the gradient tint is, from 0 to 100 percent. Shown when Overlay is Gradient. Layout - Content position: where the text sits on the card. Nine options run from Top left through Middle center to Bottom right. - Text alignment: align the text Left, Center, or Right. - Content width: the maximum width of the text block on the card, from 320 to 960 px. A slide also uses the standard Color, Padding, and Margin controls. See Common section settings. The slide ships with separate desktop and mobile padding turned on, so you will see a Desktop padding and a Mobile padding group from the start. Tips - The first slide loads its video right away. Later video slides defer their download until you swipe to them, so put the slide you most want seen first. - Card shape comes from the section's Aspect ratio, not the slide. Change it on the section to reshape every card at once. - The navigation arrows appear only when the slider holds more than one slide. - A slide with no image or video shows a placeholder graphic, so an empty slide will not break the layout while you build. Media card block The Media card block is a related single-card block you add inside other container sections, not inside this slider's Slide. It pairs one image or video with stacked text and an optional link. Its settings mirror the slide with a few additions: - A Media group (Media type, Image, Mobile image, Video). - Aspect ratio with the four shapes above plus Adapt to image and Custom (which reveals a Custom ratio field, for example 16/9). - Overlay style: Gradient or Caption bar, with Overlay strength when set to Gradient. - Link, which makes the whole card clickable. It also uses the standard Color, Padding, and Margin controls. See Common section settings.

Last updated on Jun 24, 2026

Testimonials

Testimonials Testimonials shows customer quotes in a horizontal slider. Each quote is a Testimonial block with an author, an optional role, an avatar, and a star rating. Add it from Add section under Storytelling. Add the section 1. In the theme editor, open the page where you want the testimonials. 2. Click Add section, then choose Testimonials under Storytelling. 3. The section loads with a header and three sample quotes. Edit them, then add or remove Testimonial blocks in the section's blocks. When the section holds more than one Testimonial block, slider dots appear so visitors can move between quotes. A single quote sits on its own with no dots. Section header The text above the slider lives in a content slot, not in section settings. Open it in the section's blocks to edit the eyebrow and heading, or remove them to show the quotes on their own. See Sections, blocks, and groups for how content slots work. Layout - Gap: the space between testimonials in the slider, in pixels. Testimonial blocks Each quote is its own Testimonial block. Add, reorder, or remove them in the section's blocks. Each block has these settings. - Quote: the testimonial text. This is a rich text field, so you can italicize or bold words inside it. - Style: how an emphasized word inside the quote is treated. None leaves it plain, Color tints it with the accent color, and Shimmer gives it a moving sheen. To emphasize a word, italicize it in the Quote field. - Author: the name shown under the quote. - Role: a line under the author, for a job title, company, or location. Leave it empty to hide it. - Avatar: a photo shown beside the byline. Leave it empty to show the name on its own. A square image gives the cleanest round crop. - Show rating: turns the row of stars on or off above the quote. - Rating: the number of filled stars, from 1 to 5. This appears only when Show rating is on. Common settings This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Keep quotes short. One or two sentences read better in the slider than a full paragraph, and similar lengths keep the cards even. - Use the same Style across every testimonial for a consistent row. - Avatars are optional. A set of quotes without photos still reads as a clean row, so leave Avatar empty if you do not have headshots.

Last updated on Jun 24, 2026

Scroll-driven sections

Scroll-driven sections Reign ships three sections built for long-form stories that respond to scrolling. Each one pairs text with media in its own way. This article covers all three. - Scrolling content holds a text column in place while a rail of images moves past it. - Sticky story keeps a full-height image in place while chapter text moves over it. - Vertical tabs stacks tabs on the left and swaps the panel on the right as the reader clicks through. Each section is built from blocks. The text, images, and buttons inside come from Reign's shared content blocks, covered in Content blocks reference. This article documents what is unique to each section and its purpose-built blocks. Scrolling content section with marquees and a media grid Scrolling content A two-column layout. One column holds editorial text (an eyebrow, a heading, a paragraph, a button), and the other is a rail of images that scrolls alongside it. A strip of moving text runs above and below the content. In the editor, Scrolling content appears in the Add section list under the Storytelling group. Add it 1. Open the page you want in the theme editor. 2. Click Add section. 3. Choose Scrolling content. 4. Edit the text and swap the images in the section's blocks. How it is built The section comes set up with these blocks in the section's blocks: - A column of text blocks: Eyebrow, Accent text, Rich text, and Button. - An Image rail: a content slot that holds the Image blocks scrolling alongside the text. Add or remove Image blocks to change the rail. - Top marquee and Bottom marquee: the moving text strips above and below the content. Each is a Marquee block (see Content blocks reference). The number and order of Image blocks in the rail set how the rail reads. There is no count setting: add, remove, or reorder the blocks instead. Image block Each Image block in the rail has its own settings under Media. - Image: the picture for that tile. Left empty, the block shows a placeholder. - Mobile image: an alternate picture for small screens. It falls back to the desktop image when not set. The Image block also uses the standard Padding controls. See Common section settings. Settings The section adds one control of its own, under Layout. - Pin text column on scroll: holds the text column in place while the images scroll past it. Off makes both columns scroll together. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Sticky story A full-height section where a background image or video stays in place while chapter text scrolls over it. Each chapter is its own block, so the media and the copy can change as the reader moves down the page. In the editor, Sticky story appears in the Add section list under the Storytelling group. Add it 1. Open the page in the theme editor. 2. Click Add section. 3. Choose Sticky story. 4. It starts with three chapters (Chapter one, Chapter two, Chapter three). Edit each, or add more with Add block. Chapter block Each Chapter block holds its own background media and a stack of content blocks (an eyebrow, a heading, prose, a button, a separator, a metric). Its own settings: Media - Media type: Image or Video for the chapter background. - Image: the background picture, shown when Media type is Image. - Mobile image: an alternate background for small screens, shown when an Image is set. It falls back to the desktop image when not set. - Video: the background clip, shown when Media type is Video. Supply your own file. The background does not fill from a product. Layout - Alignment: place the chapter text to the Left or Right over the media. - Enable side gradient: adds a gradient behind the text so it reads against a busy image. - Show number: shows the chapter's number. The chapter count is read from how many Chapter blocks the section has. Add or remove blocks to change the story. Metric block The default first chapter includes a Metric block, a figure with a label under it. It has two fields: - Value: the figure. - Label: the line under it. Settings This section uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Vertical tabs A row of tabs down the left side with a content panel on the right. Click a tab and its panel swaps in. On small screens the panels reflow into an accordion. A section header (eyebrow, heading, subtitle) sits above the tab list. In the editor, Vertical tabs appears in the Add section list under the Storytelling group. Add it 1. Open the page in the theme editor. 2. Click Add section. 3. Find Vertical tabs under Storytelling and choose it. 4. It starts with a header and three tabs (Tab one, Tab two, Tab three). Edit each, or add more with Add block. The header above the tab list is a static content slot named Header. Edit its eyebrow, heading, and subtitle blocks like any other content. Tab block Each Tab block is one entry in the tab list plus the panel it opens. The panel holds its own content (by default an Editorial images block with a button inside). Its own settings: Tab - Title: the main label in the tab list. - Caption: a short line under the title. - Description: a longer supporting line that shows when the tab is open. The tab also has a Color group with Inherit color scheme (on by default, so the panel uses the section's colors) and a Color scheme that appears when you turn inheritance off, plus the standard Padding controls for space inside the panel. See Common section settings. Settings This section uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - These sections read their layout from the number and order of their blocks. Reorder or remove Image, Chapter, or Tab blocks to change the story instead of looking for a count setting. - When chapter text in Sticky story struggles against a busy image, turn on Enable side gradient for that chapter before reaching for a darker color scheme. - If the header menu washes out over a dark section image, turn on Use dark header theme over this section in the section's Color group.

Last updated on Jun 24, 2026

Storytelling presets

Storytelling presets Brand ethos, Quote, and Highlights are three prebuilt layouts of the flexible Section. Each one arrives finished, with groups and content blocks already arranged, so your work is editing the words and images, not building the structure. They are presets, so every control on a plain Section applies once you want to adjust the design. Brand ethos section with a heading and three columns Add one 1. In the theme editor, open Add section. 2. Under the Storytelling group, pick Brand ethos, Quote, or Highlights. 3. The layout appears with placeholder copy and empty image slots. Open the section's blocks in the editor sidebar to edit them. To replace text, click a block (such as Eyebrow, Accent text, Rich text, Text, or Quote) and type your own. To add a picture, click an Image or Illustration block, or set a background on a group. The illustrations and signature marks are decorative and you can remove them. Brand ethos A wide statement of what your brand stands for. A short eyebrow and a large headline sit at the top, with a small illustration and caption to one side, then a divider, then three numbered columns (I, II, III) for your principles. Each column has an Eyebrow label, a Text title, a Rich text paragraph, and an optional Button. What to edit: - The headline and intro line at the top. - The three column titles and paragraphs. The numerals (I, II, III) are Accent text blocks and the column labels (Feature, Benefit, Detail) are Eyebrow blocks you can rename. - The side illustration and the "A featured piece" caption, or remove them. Quote A press or testimonial layout. A masthead Image (a publication logo, for example) sits at the top, then a dateline rule, then a large pull quote with a byline, paired with a signature illustration. Use it to feature a review, a quote, or a line that sums up your brand. What to edit: - The Quote block: your quotation. The decorative quote mark is part of the block. - The byline Text: the author and publication, plus a Button linking to the full piece. - The masthead Image and the dateline text ("Source · Date"). Highlights Four promises in a row inside a bordered panel: a common pattern for quality, delivery, packaging, and support. A centered heading introduces the panel, and each of the four cells has an Illustration, an Eyebrow tag, a Text title, and a Text description. On phones the four cells stack. What to edit: - The heading and intro line above the panel. - Each cell's tag, title, and description. Rewrite them for the four things you most want customers to know. - Each cell's Illustration, or remove it. Settings These presets carry no settings of their own beyond the standard Section controls. Adjust the layout, background, spacing, and color the same way you would on any Section: see Common section settings for the Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility groups. The arrangement inside each preset comes from group blocks (a Proportional group, Group, or Styled group), which have their own copies of those controls. Tips - A preset is a starting point. You can add, reorder, or remove any block inside it, and every cell or column is a separate block in the sidebar. - To add or drop a Highlights cell, duplicate or delete one of the four Group blocks inside the panel. The remaining cells re-space to fill the row. - The illustrations are decorative defaults. Swap them for your own under each Illustration block, or remove them for a cleaner, text-only look.

Last updated on Jun 24, 2026

Collage

Collage Collage arranges a set of media cards into a grid: one large feature card with smaller cards around it, or an even mosaic. Each card holds an image or video with its own heading, text, and link. It is a preset of the flexible Section, so it shares the standard section controls. Collage section with a featured card and supporting cards Add a Collage 1. In the theme editor, open the page you want to edit. 2. Click Add section. 3. Under Storytelling, choose Collage. The section arrives with a Collage block holding three Media card blocks. The cards show placeholders until you add an image to each one. The Collage block Select the Collage block in the section's blocks to set how the cards are arranged. Its settings sit under two headings. Layout - Layout: how the cards are placed. - Featured left, Featured right, Featured top, Featured bottom: one large card with two smaller cards beside or below it. The name says where the large card sits. These use the first three cards in the block list. - Two columns: an even grid built from four cards. - Three columns: a row of three cards. - Size: Normal or Compact. Compact tightens the cards for a smaller block. - Gap: the space between cards, in pixels. The layout decides how many cards fill the grid. Add or remove Media card blocks to match: three for the featured layouts and Three columns, four for Two columns. Extra cards wrap to a new row. Size - Width: Fill spans the section edge to edge, Page matches the standard content width, and Custom sets your own. Custom adds Max width in pixels. - Minimum height: Fit sizes to the cards. Pixels sets a fixed grid height. Percent sets the height as a share of the screen, for a tall block. This block also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Each Media card Each card is a Media card block under the Collage block. Select one to set its image and content. Media - Media type: Image or Video. - Image: the card image. Shown when Media type is Image. - Mobile image: an optional image for phones. Falls back to the desktop image when not set. - Video: the card video. Shown when Media type is Video. - Aspect ratio: the card shape. Adapt to image follows the image's own proportions. The rest are fixed: Square (1:1), Portrait (4:5), Landscape (3:2), Wide (16:9), or Custom. - Custom ratio: your own ratio (for example 16/9 or 1.5). Shown when Aspect ratio is Custom. - Overlay style: how text sits over the media. Gradient fades the lower edge dark so text reads over the image. Caption bar places the text in a band below the image. - Overlay strength: how dark the gradient is behind overlaid text. Shown when Overlay style is Gradient. - Link: a destination for the card. Set it to make the whole card clickable. Card content The heading, text, and any button live as blocks inside the card. Add, reorder, or remove them under the Media card in the block list. See Sections, blocks, and groups. This card also uses the standard Color, Padding, and Margin controls. See Common section settings. Common settings The Collage section also uses the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. See Common section settings. Tips - Over-image text stays readable through each card's Overlay style, not its color scheme. Gradient darkens the lower edge of the image so light text reads on top. - Give the cards in one collage a consistent Aspect ratio so the grid lines up. Mix ratios only when you want an irregular look. - Use Caption bar when the image is busy and a gradient would not give enough contrast for the text.

Last updated on Jun 24, 2026

Multicolumn

Multicolumn Multicolumn is a row of text columns: a heading and a short paragraph in each. It is a preset of the flexible Section, built from one Horizontal content block that holds the columns. See Sections, blocks, and groups for how presets and blocks fit together. It appears in the Add section list under Layout. Multicolumn section with a numbered list of columns Add it 1. In the theme editor, open the page you want it on. 2. Click Add section. 3. Under Layout, choose Multicolumn. It starts with three columns, each holding a title and a short description as Text blocks. Open each Column in the section's blocks to edit its text. To add or remove a column, add or delete a Column block under the Horizontal content block. Reorder columns by dragging them in the block list. How columns wrap The columns sit in one row that fits as many as the width allows. The Horizontal content block controls when they reflow, on its own settings. - Minimum column width: the narrowest a column gets before the row changes. Below this width the row becomes a swipeable carousel with dots, instead of squeezing the columns. Raise it to force the carousel sooner (wider columns), lower it to keep more columns in a row. - Gap: the space between columns, in pixels. - Column content alignment: where the text sits inside each column. Left, Center, or Right. - Accessibility label: text read by screen readers when the row collapses to a carousel. Leave it blank to use the default. The Horizontal content block also has its own Inherit color scheme and Color scheme controls, plus Padding and Margin. See Common section settings. Section settings Multicolumn is the Section, so the band around the columns uses the full set of section controls: the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility. See Common section settings. Tips - The starting columns hold Text blocks, but a column can hold any block. Add an image, a button, or an icon inside a Column to build a richer card. - To keep every column in a row on tablet instead of dropping to a carousel, lower Minimum column width. To give each column more room, raise it. - For uneven column widths (one wide, one narrow), use a Proportional group instead. See Sections, blocks, and groups.

Last updated on Jun 20, 2026

Split banners

Split banners Split banners is a preset of the flexible Section: two image cards side by side, each with a heading over a background image, and each one a link to a collection or page. Add it from Add section under Storytelling. Because it is the Section underneath, the section itself has no settings unique to this preset. Everything that makes a split banner lives in the two cards inside it, which are Styled group blocks. See Sections, blocks, and groups for how the Section and its blocks fit together. Add it 1. In the theme editor, open the page where you want the banners. 2. Click Add section and choose Split banners under Storytelling. 3. The section arrives with two cards already set up. Open each card in the section's blocks to add its image, heading, and link. How it is built The section is set to a Horizontal direction so the two cards sit in a row, and it stacks them on phones. Inside it are two Styled group blocks (the cards). Each card holds three blocks: - An Eyebrow (the small accent label above the heading). - An Accent text heading. - A Text block used as the link cue. To change a card, open it in the section's blocks. The settings that make it a banner are on the Styled group card itself, covered next. To edit the wording, open the Eyebrow, Accent text, or Text block inside the card. Each card (Styled group) Each card is a Styled group, so it carries that block's full set of controls. The ones that shape a split banner: - Link: the collection or page the whole card opens. Because the link sits on the card, the entire image is clickable, not only the text. Open in new tab and Link label appear once you set a link. Link label is the accessible name screen readers announce for the card, so write it to describe the destination. - Background: set to Image, with the card's photo in Image. This is the picture behind the heading. - Overlay: set to Gradient, which darkens the lower part of the image so the heading stays readable over it. Adjust the gradient if your photo is lighter or darker than the default. - Corner radius and Shadow: the preset rounds the corners and adds a Subtle shadow to give each card its raised look. - Minimum height: set to a fixed height so both cards match. Change the desktop and mobile heights together to keep the row even. To make the two cards different sizes instead of equal, adjust each card's height and the section's alignment, or swap the cards for a Proportional group if you want a width split. Common settings The Styled group cards also use the standard Color, Layout, Size, Appearance, Border, Padding, Margin, and Visibility controls. The section uses Color, Layout, Size, Padding, Margin, and Visibility. See Common section settings. Tips - Keep the two cards' images close in tone and crop. Side by side, a mismatch in brightness or framing shows. - Set the same Minimum height on both cards so the row stays even. If one card's content is taller, the fixed height holds them level. - To turn this into three banners, copy one of the cards and drop it into the row. On phones the section stacks the cards. On desktop a third card narrows the row; to let it wrap to a new line instead, turn on Wrap elements when space is limited.

Last updated on Jun 24, 2026

Shoppable image

Shoppable image Shoppable image places one lifestyle photo next to a list of products. Each product gets a dot (a hotspot) on the image, so a shopper can tap a spot in the scene to open that product's card and add it to cart. Add it from Add section under the Products group in the theme editor. Shoppable image with product hotspots Add the section 1. In the theme editor, open the page where you want the section. 2. Click Add section and choose Shoppable image. It loads with a heading area, a button, and three hotspots. 3. In the section, set Image to your lifestyle photo. 4. Click each Hotspot block, assign a Product, and set its position on the image. Image - Image: the main lifestyle photo the hotspots sit on. This is the scene shoppers tap. Until you set it, the section shows a placeholder. - Mobile image: a separate photo for phones. Falls back to the desktop image when not set, so leave it empty unless your main photo is wide and you want a tighter crop for small screens. Header and Footer The text beside the image and the button below it live in two content slots you fill with blocks. See Sections, blocks, and groups. - Header: the intro above the product list. It starts with an eyebrow line, a heading, and a description. Click each block to change its text or remove what you don't need. - Footer: the area below the list. It starts with a button. Click it to set its label and link, for example a link to the full collection. Hotspot blocks Each dot on the image is a Hotspot block. The section holds up to 10. Add or remove them under the section in the block list. - Product: the product this dot links to. Its image, title, and price fill the card and the matching row in the product list. Until you pick a product, the hotspot shows a placeholder. - Horizontal position: how far across the image the dot sits, from left (0) to right (100). - Vertical position: how far down the image the dot sits, from top (0) to bottom (100). A shopper who taps a dot opens that product's card, and the row in the side list scrolls to match. The price, availability, and the small bag (add to cart) button come from the product you assign. A sold out product shows a sold out label and a disabled bag button. Common settings This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Place each dot on or near the item it sells so the link between the dot and the product reads clearly. - The hotspots sit at the same percentage positions on every screen. If your Mobile image crops the scene differently from the desktop Image, check that every dot still lands on its item on mobile. - Order the Hotspot blocks in the block list the way you want the side list to read, since the rows follow that order. - Keep the number of hotspots low enough that the dots do not overlap and crowd the photo.

Last updated on Jun 24, 2026

Featured products

Featured products Featured products shows a row of product cards, drawn from a collection or hand-picked one by one. Above the cards it carries a Header content slot for a heading and supporting text. On phones the row becomes a swipeable carousel with dots. Featured products shown as a row of product cards under a heading Add the section 1. In the theme editor, open the page where you want it (the home page is typical). 2. Select Add section. 3. Under Products, choose Featured products. The section ships with a heading and product cards in place, so it shows a preview row before you change anything. Choose which products show The section has two pickers at the top. You fill in one of them. - Collection: pick a collection and the section shows its products in the collection's order. Use this when you want the row to track a collection automatically. - Products: hand-pick up to 12 products, in the order you want them, when you need an exact lineup rather than a whole collection. If you set both, the Collection wins and the hand-picked Products list is ignored. The row shows up to 12 products. With both pickers empty, it shows placeholder cards so you can see the layout while you build the page. The Header content slot The Header is a content slot above the product row. It comes prefilled with an eyebrow line and a heading. Edit, reorder, add, or remove the blocks inside it the same as any content slot: select a block in the section's blocks and change its text. Leave the slot empty to show only the products. The product cards Each card is built from blocks (image, title, price, and optional label, rating, and swatches). Select a card's blocks to add, remove, or reorder these parts. Card content such as the label and rating comes from your product data, not from text you type here. The cards inherit the section's color scheme. Settings This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Use Collection for a row that updates itself when the collection changes (a "New arrivals" or "Best sellers" feed). Use Products when the exact items and their order matter. - If you hand-picked products but the row shows different items, check the Collection picker. A collection overrides the Products list, so clear it to use your picks. - The carousel dots appear only with two or more products. A single product shows as one card with no dots.

Last updated on Jun 24, 2026

Image compare

Image compare Image compare shows two images stacked in one frame with a slider the shopper drags to wipe between them. Use it for a before and after: a product worn versus unworn, a room before and after a restyle, an edit versus the original. Add it from Add section under Storytelling. Before and after image compare slider Add the section 1. In the theme editor, open the page where you want the comparison. 2. Click Add section and choose Image compare from the Storytelling group. 3. The section drops in with placeholder images. Set your two images in the settings below. The section starts with a Header content slot above the frame, holding an illustration, an eyebrow, a heading, and a short paragraph. Edit or remove those blocks, or add your own, the same way you edit any block. See Sections, blocks, and groups. Left side The left side is the image the shopper sees first, before they move the slider. - Image: the picture for the left side. When empty, the section shows a placeholder. - Label: a short caption pinned to the left of the frame, for example Before. Leave it empty to hide it. Right side The right side is revealed as the slider moves toward the start. The editor notes this side is visible when the slider is at the start. - Image: the picture for the right side. When empty, the section shows a placeholder. - Label: a short caption pinned to the right of the frame, for example After. Leave it empty to hide it. Slider - Starting position: where the slider sits when the section loads, from 0 to 100 percent. The default is 53, near the middle. A lower value reveals more of the right image at first, a higher value more of the left. - Footnote: a short line of text under the frame, centered between two rules. Leave it empty to hide it. This section also uses the standard Color, Padding, Margin, and Visibility controls. See Common section settings. Tips - Use two images shot at the same size, angle, and crop. The slider lines them up edge to edge, so any shift in framing shows as the shopper drags. - Set descriptive alt text on each image in the file picker. When an image has no alt text, the section uses its Label as the alt text for accessibility. - Keep labels to one or two words. They sit inside the frame, so long captions crowd the image.

Last updated on Jun 20, 2026