How to Add an Interactive Stories Slider to Your Shopify Store
I'm a Shopify Expert with 9+ years in this (I don't mean that in an arrogant way). The Instagram-style circle slider is one of those things people see on a competitor and want on Dawn the same day.
Long story short, this is a stories slider. Circular images, optional labels, each one links somewhere. No app, no extra JS from a third party.
I built it this way because story apps are usually overkill for a row of links. This one is copy/paste. Last tested on Dawn in 2026.
Want to see it first? Here's a live demo.
Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and most OS 2.0 themes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.
This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.
Looking to install this on a premium or custom theme? Contact us.
How to add it
- From your Shopify admin, go to Online Store > Themes.
- Find the theme you want to edit, click the 3 dots > Edit code.
- Open the sections folder and click Add a new section. Name it exactly ezfy-stories-slider. The file name and the section name have to match, otherwise Shopify won't load it.
- Paste this code, then save. This is the whole section, schema included:
- Click Save.
- Click the 3 dots > Customize.
- Click Add section and look for SJ Stories Slider. Add it to the template you want.
- Add a story block for each circle, then save.
- Save the theme.
If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.
How to customize it
Each block is one circle. Image, link, optional text under it. On desktop you pick how many show at once and the gap between them. Mobile has its own counts, width and margins.
If you use labels, set the font and size so they don't wrap into two ugly lines. Square images crop the cleanest. A 1:1 png with a transparent circle looks better than a random product photo.
If the slider doesn't show up
Check the section file name. It has to be ezfy-stories-slider.
In Customize, look for SJ Stories Slider.
If you see empty circles, the blocks have no images yet. Add those in each block.
If you get stuck, tell me which theme you're on. That usually solves it.
Subscribe for Shopify researches, tips & guides
Get high quality posts about Shopify insights. No spam, unsubscribe anytime.