How to Tell Your Brand Story with an Interactive Step-by-Step Scrolling Layout
People keep asking how to tell a brand story on Shopify, step by step, without a fancy page builder app.
Long story short, this section is a vertical timeline. Each step has an image, some text and a button, and a progress bar follows you as you scroll. No app, no extra JS from a third party, and it lives in your theme.
I built it this way because page builder apps usually wreck speed. 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-scrollable-features. 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 Scrollable Features. Add it to the template you want.
- Add a block for each step, 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 step. Add an image, a title, a short description and a button if you want one. The vertical bar fills in as people scroll, so the order of the blocks is the story.
You can tweak spacing, colors and typography in the section settings so it matches the rest of the page. Keep the copy short. If a step needs a paragraph, it probably needs two steps.
If the section doesn't show up
Check the section file name. It has to be ezfy-scrollable-features.
Make sure you added it in Customize, not only pasted the file.
Hard refresh the storefront after you save.
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.