How to Tell Your Brand Story with an Interactive Step-by-Step Scrolling Layout
Want to showcase your process, product features, or brand story in a visually dynamic way? The Scrollable Features section helps you do exactly that. It creates a smooth, scrollable layout where each step includes an image, description, and button, all connected by a vertical progress bar.
Want to see it in action? View the live demo to experience how it looks and feels on a real store page.
Manual Installation
You can install the section manually, keeping full control over your theme files. Follow these steps:
- Go to Online Store > Themes > Edit code
- In the Sections folder, click Add a new section
- Name it sj-scrollable-features.liquid and click Done
-
Copy the code from the gist below and paste it into the file
- Click Save
- Go to Customize and add the Scrollable Features section to your desired page
Customization Settings
Step 1: Add and Customize Your Steps
Each step in the layout is created using a feature block. For every block, you can add a title, subtitle, and image, along with an optional call-to-action button.
Control how images appear by adjusting their width for desktop and mobile, or upload a dedicated mobile background image for a fully responsive layout. You can also define custom button text for each step, such as “Learn More” or “View Product”.
You can choose whether the first feature’s image appears on the left or right. The layout automatically alternates sides for the following steps to maintain visual balance.
Step 2: Design & Style Settings (Optional)
Match the section to your brand using full color and typography controls. Customize the background color, text colors, and button styles to blend seamlessly with your theme.
You can also customize the progress bar colors, adjust text sizes for both desktop and mobile, and fine-tune elements such as progress numbers and link hover effects for a polished finish.
Showcase Your Story
The Scrollable Features section helps guide visitors through your brand story, product journey, or service process in a clear and engaging way. With alternating layouts, smooth scrolling, and a connected progress bar, your content feels structured, interactive, and easy to follow.
At EZFY Code, we also offer custom development services for merchants who need tailored features built specifically for their store. If you have a unique idea or requirement, feel free to reach out.