Home Sections

Sections

20 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

Hero slideshow

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 what happens as the page scrolls past the slideshow. The control appears only while Overlay this section with the header is on, and only works when the slideshow is at the top of the page. - None: the slideshow scrolls away like any other section. - Scroll over hero: the slideshow stays in place while the next section slides up over it with rounded top corners. - Scroll over hero, then drift: the same, and the section after that one drifts in from behind it. 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 strength: 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 strength 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 Jul 11, 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 alphabetically. Article tags cannot be reordered, so to change which one shows, rename or prefix the tag you want to sort first. - One section reads one blog. To feature posts from a second blog, add a second Featured articles section.

Last updated on Jul 03, 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 shows a photo that eases in as the section scrolls into view. 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 eases in with the section's scroll-in animation and stays visible. 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 Jul 03, 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 the theme's flexible Section, so once you add it you have the section's full set of controls. It lives under the Banners 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 Banners 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. Video and parallax variants The Banners group has two siblings that share Image banner's layout and controls, so everything above applies. They differ only in the background: - Video banner: the background is a video instead of a photo. Set it under Appearance with Background set to Video. The video plays muted and looped behind the text. - Parallax image banner: the background image drifts slowly as the page scrolls, for a sense of depth. It starts at 70% of the screen height with a dark gradient already on. Pick whichever background suits the section. The eyebrow, heading, and caption blocks work the same way in all three. 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 Jul 14, 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 Jul 14, 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 single-card block you add inside container sections. 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 Jul 03, 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 The theme 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 the theme'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 Jul 14, 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. The Lookbook variant The Storytelling group has a Lookbook preset built on the same Collage block. It starts with the Two columns layout and four linked cards, each with an eyebrow over the image, sized as a taller editorial grid. It is a Collage underneath, so every setting on this page applies. Use it for a set of shoppable looks or campaign images that each link somewhere. 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 Jul 05, 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 showing three equal columns, each with a title and a short description 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. The mobile grid variant The Layout group also has a Multicolumn mobile grid preset. It is the same section with a lower Minimum column width, so the columns stay in a two-up grid on phones instead of collapsing to a swipeable carousel. Use it for compact items like icons or stats that read fine at half width. Everything above applies; only the starting Minimum column width differs. 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 Jul 05, 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 Banners. 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 Banners. 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 Jul 05, 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. The row becomes a swipeable carousel with dots whenever the cards do not fit in one row: always on phones, and on desktop when there are more products than fit. 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 Jul 03, 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

Spacing and Scroll to top

Spacing and Scroll to top Two small sections that solve one job each: Spacing inserts an empty vertical gap between two sections, and Scroll to top adds a floating button that returns the shopper to the top of the page. Spacing Add it from Add section under Layout, then drag it between the two sections you want to separate. - Height: the gap's height in pixels, from 10 to 200. - Color scheme: the gap's background, so it can blend with the section above or below. Reach for it when two specific sections need extra distance on one page. When every section needs more breathing room, adjust the sections' own Margin instead (Common section settings); a page full of Spacing sections is harder to maintain than a few margin values. Scroll to top The button lives in the Overlays group, which sits at the bottom of the section list on every page. 1. In the theme editor, expand Overlays at the bottom of the sidebar. 2. Click Add section inside the group and choose Scroll to top. A store can have one Scroll to top section. The button appears once the shopper has scrolled down and floats in the chosen corner. - Color scheme: the colors for the button. - Button style: Primary or Secondary, matching your theme's button styles. - Alignment: which corner holds the button, Left or Right. - Show on home page, Show on pages, Show on product pages, Show on blog posts, Show on other pages: pick the page types that get the button. The section also uses the standard Visibility control. See Common section settings. Tips - On long pages (a collection with infinite scroll, a long blog post) the Scroll to top button saves the most work; that is where to turn it on first. - Keep the button on the side opposite any chat widget so the two do not overlap.

Last updated on Jul 02, 2026

Pop-up

Pop-up The Pop-up is a dialog that opens over the page: a newsletter signup, a promotion, an announcement. You fill it with the same content blocks you use anywhere else, choose what makes it open, and set how often it may reopen for the same visitor. A shopper closes it with the close button or the Escape key. A newsletter pop-up open over the page Add the section The Pop-up lives in the Overlays group, which sits at the bottom of the section list on every page. 1. In the theme editor, expand Overlays at the bottom of the sidebar. 2. Click Add section inside the group and choose Pop-up (under Promotional). 3. Select the section to preview it in the editor while you style it. A store can have one Pop-up. It arrives with an Accent text heading and an Email signup block, ready to use as a newsletter signup. Swap or extend those with your own blocks: the Pop-up accepts the standard content blocks (text, image, buttons, and so on). See Content blocks reference. The Email signup block is the same one the footer uses: see Footer. The Pop-up in the Overlays group with its Accent text and Email signup blocks Trigger These settings decide when the pop-up opens and for whom. The Pop-up Trigger settings in the theme editor - Open pop-up: what triggers it. Load opens it when the page loads. Scroll opens it once the shopper scrolls far enough down the page. Delay opens it after a timer. - Delay: the wait in seconds before the pop-up opens, from 0 to 30. Shown when Open pop-up is Delay or Load. - Scroll trigger point: how far down the page the shopper must scroll before the pop-up opens, from 10 to 90 percent. Shown when Open pop-up is Scroll. - Show pop-up: how often the pop-up may open again for the same visitor, from Once every hour to Once per year. The default is Once every 30 days. Once a visitor has seen it, it stays away until the chosen period passes. - Show only on home page: limits the pop-up to the home page. On by default. Turn it off to let it open on any page. - Hide for logged-in customers: keeps the pop-up away from shoppers with a customer account who are signed in. On by default. Appearance - Size: the dialog width, Small or Medium. - Color scheme: the colors for the dialog surface and its content. The section also uses the standard Padding controls, including separate mobile paddings. See Common section settings. Tips - Show pop-up is the setting that keeps a pop-up polite. A visitor who has already seen it will not see it again until the period passes, so a longer interval reads as less pushy. - For a newsletter pop-up, Scroll with a trigger point around 50 percent tends to interrupt less than Load: the shopper has shown interest before you ask for their email. - While testing, remember the frequency cap applies to you too. If the pop-up does not reopen on the storefront, you have most likely seen it within the chosen period; check it in the theme editor instead, where it always shows. - Keep the content short. One heading, one line of text, and one action fit the small dialog; a long stack of blocks forces the dialog to scroll.

Last updated on Jul 14, 2026