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 SJ Scrollable Features section lets you do just that, no coding required. It creates a smooth, scrollable layout where each step includes an image, description, and button, all connected by a sleek vertical progress bar.
Our Sections Jungle app is approved by Shopify and safely adds this section directly to your theme, running natively without slowing down your store. Follow the steps below to install and customize your scrollable feature layout in just minutes.
Want to see it in action? View the live demo to experience how it looks and feels on a real store page.
Step 1: Install the App
Start by installing the Sections Jungle app just as you can see below, it features this Section and many more:
Find the Scrollable Features section by using the search bar, you may want to take a look at list of customization options inside it! Click Install, choose the theme where you want to use the section in then click Install again, it will be in your store theme after just a few seconds! Once installation is complete, go to your Customize page to begin editing.
Step 2: Add the SJ Scrollable Features Section
Inside the Theme Editor, open the page where you’d like to display your scrollable layout. Click Add section on the left-hand menu and search for SJ Scrollable Features.
Once added, you’ll see a visually engaging vertical layout where each feature appears as a connected step. Now you can start adding your own content and customizing the look.
Step 3: Add and Customize Your Steps
Each step in the layout is built using a feature block. For every block, you can add a title, subtitle, and image, plus an optional call-to-action button with your own link.
Control how images appear by adjusting their width for desktop and mobile, or upload a dedicated mobile background image for a perfect responsive look. You can also set unique button text for each step, like “Learn More” or “View Product.”
To keep things visually balanced, you can choose whether the first feature’s image appears on the left or right: the layout automatically alternates sides for the following steps.
Step 4: Design & Style Settings (Optional)
Make the section match your brand with full color and typography controls. Adjust the background color, text colors, and button styles to fit your theme. You can even set custom progress bar colors to create a smooth gradient effect from start to finish.
Fine-tune text sizes for both desktop and mobile including headings, paragraphs, and button text to ensure your layout looks polished on every screen size. You can also customize the progress number color and link hover effects for extra visual flair.
Step 5: Showcase Your Story
The SJ Scrollable Features section helps you guide visitors through your brand story, product journey, or service process in a clear and interactive way. With alternating layouts, smooth scroll transitions, and a progress bar that connects each step, your content feels both structured and engaging.
Looking to take your store design further? Alongside the Scrollable Features, Sections Jungle offers a growing collection of powerful, ready-to-use sections that help your brand look professional and convert more visitors.
Our team at EZFY Code also provides custom development services for store owners who want features built specifically for their business goals. We’re constantly expanding the Sections Jungle library with fresh, conversion-driven sections and your feedback helps us decide what to build next. We would love to hear what would be the most helpful for you and your store!
Install it today and turn your store’s story into a scrollable experience your visitors will love. Also explore our full collection to see how Sections Jungle can elevate your store today!