Add Stories to your storefront

You add Instagram-style Stories to your storefront with the Story block, or start faster from the Group block's Stories preset. Shoppers tap a story circle to open image or video slides in a full-screen viewer that advances automatically.

Stories are configured in the Shopify theme editor. You build pages from a section that accepts theme blocks and then arrange blocks inside it; add the Story block to that same kind of parent. See the Section article for how the Section parent works.

Add the Story block

The Story block renders a story circle you can place anywhere a section accepts theme blocks.

1. Open the POPS theme in the Shopify theme editor, then add or select a section that accepts theme blocks, such as Section.

2. Add a Story block to that section.

3. Give it a Story title and set a Cover image — the image shown on the circle shoppers tap.

Start from the Stories preset

To see Stories working immediately, add a Group block and choose its Stories preset. It creates three ready-made Story blocks with nested slides: Story 1 with two slides, Story 2 with three, and Story 3 with four.

Add and reorder Story slides

Each Story slide is one frame of the story. A story plays as many slides as you add — there is no minimum or maximum. Drag slide items up and down to change the order they play in.

1. Select a Story block.

2. Add Story slide items to build the story. Each slide is one frame.

3. Drag the slide items to set the order they appear to shoppers.

Configure each slide

Every Story slide takes either an image or a video, plus how long it stays on screen. Set Media type to Image or Video; the matching media picker appears for the type you choose.

• Image — choose the image shown for that frame.

• Video — choose the video. Videos play muted and advance automatically when they finish.

• Duration — how many seconds an image slide stays on screen before advancing, from 3 to 15. The default is 5. Video slides use their own length.

Customize the story circle

The border around the story circles is a theme-level setting that applies to every Story block on the storefront.

1. In the theme editor, open theme settings, then find the Story group.

2. Set Story circle border gradient to a background color or CSS gradient. The default is a five-stop orange-to-pink gradient.

3. Adjust Story bubble size (Desktop) and Story bubble size (Mobile) if you want circles larger or smaller on each screen.

What shoppers see

Tapping a story circle opens a full-screen viewer with the first slide. Image slides advance automatically after their configured duration, and the segmented progress bar fills at that same speed; video slides play and advance when the video ends, with the bar reflecting the video's own length. Shoppers can also move between slides by tapping the viewer's previous and next zones or pressing the arrow keys, and close the viewer with Escape, the close control, or by tapping the background. Advancing past the last slide closes the viewer.

For the full reference to every Story and Story slide setting, see the Story block article.