Stories Block

Adds a row of cover rings to the page. When a visitor taps a ring, the frames play full screen one after another; a frame can be an image or a video…

Where to find: Theme editor → left panel → Media category → Stories Who it's for: Anyone who wants to present products, campaigns or behind-the-scenes moments as vertical, tap-through frames in the style of Instagram highlights In short: Adds a row of cover rings to the page. When a visitor taps a ring, the frames play full screen one after another; a frame can be an image or a video from your gallery, and can link to a product with a "View product" button.

What is it for?

The story format people know from social media works on a storefront too: short, vertical, advanced by tapping. You put a few images and a short video behind a cover ring; the visitor watches the frames without leaving the page and taps the button on the frame they like to jump to the product.

The block has two parts:

Cover rings: The part visible on the page. A round cover for each highlight with a short title underneath.
Story viewer: The full-screen layer that opens when a ring is tapped. Progress bars for each frame at the top, the image or video in the middle, the caption and the link button (if any) at the bottom.

Glossary

Term	Meaning
Highlight	A story made of one cover, one title and ordered frames. A block holds at most 12 highlights.
Frame	A single image or video shown once in the viewer. At most 20 frames per highlight.
Cover	The image inside the ring. If left empty, the first image frame itself or the video's thumbnail is used.

Adding the block to a page

Open the Media category in the left panel and click Stories, or drag it onto the canvas. The block can be added to any page type, including the home page.
A newly added block is empty; the canvas shows three sample rings (New Season · Campaign · Behind the Scenes). The samples appear only in the editor and are never rendered on the storefront.
Select the block and the Properties panel on the right opens the Content · Style · Background · Appearance · Layout · Visibility · Advanced tabs.

A block with no highlights, or whose frames have no media selected, is not rendered at all on the storefront; it leaves no empty section behind.

Content tab — Highlights

The tab has a single field, the Highlights list. The top right shows how many highlights you are using (e.g. 3 / 12).

Adding and editing highlights

The Add highlight button opens a new row in the list and expands its frames.
The round box at the start of the row is the cover; clicking it opens the gallery picker with images only.
Type the title in the box next to it; it takes at most 20 characters and appears under the ring.
The arrow on the right expands or collapses the frames; the trash icon deletes the highlight with all of its frames.
Drag rows by the handle (⋮⋮) to reorder; rings are laid out in this order.

Adding frames

The Add frame button under the highlight opens a new frame. Each frame has:

Field	Description
Media	Click the thumbnail at the top left of the frame; the gallery picker lists images and videos together. If a video is picked, a camera icon appears on the thumbnail and the video's duration is taken automatically.
Caption	Short text shown under the frame in the viewer. Optional.
Duration (s)	How many seconds an image frame stays on screen. Default 5, range 1–30. The field is locked on video frames; the frame plays for the video's own length.
Link	A product, category, page, blog post or custom URL. Once picked, a button appears under the frame. Remove the link with the trash icon.
Button text	The text on the button. If left empty, product links say View product and other links say Open link.

Frames are reordered by dragging their handle too. A frame without media is skipped on the storefront.

Short, vertical (9:16) clips uploaded to the gallery give the best result for video frames. Long videos slow the flow down; under 15 seconds is recommended.

Style tab

Setting	What it does
Ring Size	Small (56 px), Medium (72 px) or Large (96 px) cover ring.
Ring Color	The colored ring around the cover. The default tab uses the theme's primary color; pick a custom color if you prefer.
Show Titles	When off, only the rings are shown and titles are hidden.
Alignment	Aligns the row of rings to the left, center or right.
Horizontal Scroll on Mobile	When on, rings stay on a single line on narrow screens and can be swiped. When off, they wrap to the next line.
Product Name and Price	On frames linked to a product, the product's name and current price appear above the button. The price is formatted in the store currency.

The Background, Appearance (border, corners, shadow, opacity), Layout (container, inner/outer spacing), Visibility and Advanced tabs are the same as for other blocks; see Properties Panel (Right Panel).

How it looks on the storefront

The rings arrive server-rendered as soon as the page loads; the viewer's code is downloaded only when a ring is tapped. Adding the block does not slow down the first paint of the page.
The viewer opens full screen. The bars at the top show which frame you are on and fill up over the frame's duration.
Progress: Frames advance automatically. Tapping the right two thirds of the screen goes forward, tapping the left third goes back. Holding a finger down pauses the flow. When the last frame of a highlight ends, the next highlight starts; when the last one ends, the viewer closes.
Keyboard: ← and → move between frames, Space pauses/resumes, Esc closes. The Tab key does not leave the viewer.
Closing: The × button at the top right, Esc, or swiping down.
Video: Starts muted; the speaker button at the top right turns the sound on. When the video ends, the next frame starts.
Reduce motion: For visitors with "reduce motion" enabled in their operating system, frames do not advance on their own; the viewer opens paused and resumes with the button.
Accessibility: The viewer is announced as a dialog, every progress bar carries a percentage value, and each frame change is announced to screen readers.

Frequently asked questions

I did not pick a cover; does the ring stay empty? No. The first image frame becomes the cover; if the first frame is a video, its thumbnail is used.

Can I use the same image in two highlights? Yes. Gallery items are not copied; only the reference is stored.

I deleted the product I linked to. What happens? The button stays but the product name and price disappear; the button goes to the product's old address. Editing the frame and refreshing the link is recommended.

Can I add the block to more than one page? Yes. The block on each page carries its own highlights; content is not shared.

On this page