The Scroll story section lets you present a sequence of images and text that changes as customers scroll down the page. On desktop, the image area stays in place while the story progresses through each step. On mobile, each image appears above its corresponding content.
You can use Step blocks to explain product features or tell a visual story, then add an optional Buy panel at the end so customers can select a product variant and add it to their cart.
Steps:
Add the Scroll story section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on your Concept theme.
- Open the page template where you want to display the story.
- Click Add section and select Scroll story.
- Click Save.
The section comes with Step blocks and a Buy panel in its default preset. You can edit, reorder, or remove these blocks as needed.
Configure the story layout
- Open the Scroll story section settings.
- Use Image position on desktop to place the images on the Left or Right.
- Enable Show step numbers to display the current step number when no custom subheading is entered.
- Enable Show product captions on the image to display captions on the images.
- Click Save.
On desktop, the image changes as customers scroll through the steps. On mobile, the images are displayed alongside their respective steps rather than in a sticky image column.
Add and configure Step blocks
- Inside Scroll story, click Add block and select Step.
- Select an Image to display for that step.
- Optionally select a Product. If no custom image is selected, the theme uses the product's featured image.
- Enter a Subheading, Heading, and Text to describe the step.
- Adjust Heading tag if needed.
- Enter Caption and Caption detail to customize the information shown on the image.
- Add a Button label and Button link if you want the step to link to another page.
- Choose the Button style, and enable Open link in new tab if needed.
- Add more Step blocks and reorder them to control the story sequence.
- Click Save.
If the caption fields are left blank, the theme can use the selected product's title and price. The Show product captions on the image setting must be enabled for these captions to appear.
Add an optional Buy panel
- Inside Scroll story, add or open the Buy panel block.
- Choose the Product you want customers to purchase.
- Select an Image for the panel, or leave it blank to use the selected variant's image where available.
- Enter a Label and optional Title. If the title is blank, the product title is used.
- Customize Button label, or leave it blank to use the default Add to cart text.
- Click Save.
The Buy panel appears after the story steps, displaying the product's price, available variant options, and an Add to cart button. Only one Buy panel can be added to this section.
Configure the Buy panel variant picker
- Open the main Scroll story section settings.
- Under Variant picker, choose Variant picker type: Dropdown or Button.
- If you choose Button, enable Enable color swatches if needed.
- Choose Swatch type: Color swatch or Variant image.
- Click Save.
These settings control how customers select product options in the Buy panel. Variant-image swatches require images to be assigned to the relevant product variants.
Customize the section heading and appearance
- Add a Heading, Subheading, or Description in the section settings.
- Adjust Heading size, Heading alignment, and Heading tag.
- Add an optional section-level Button label and Button link.
- Use Highlighted text and related settings if you want a styled heading.
- Under Colors, customize text, background, highlight, and button colors.
- Under Section, adjust the top and bottom spacing, Show section divider, Make section full width, and Make section rounded.
- Click Save.
Preview the Scroll story section
- Open your storefront preview and scroll through the section.
- Confirm that the correct image and text appear for each step.
- Check the layout on desktop and mobile.
- If you added a Buy panel, test the variant picker and Add to cart button.
- Click Save after making any adjustments.
Section behavior
- The section supports up to 10 blocks in total, including Step and Buy panel blocks.
- You can add one Buy panel at most.
- At least one Step block is needed for the story to display.
- Step images change with the scroll position on desktop, while mobile shows each image with its step.
- The Buy panel is optional and appears after the story content.
- This section is intended for a visual story with an optional final purchase action, rather than a separate Add to cart button for every Step.
Troubleshooting
- The section is empty: Add at least one Step block.
- A step image is missing: Select an image or assign a product with a featured image to the Step block.
- Image captions do not appear: Enable Show product captions on the image and enter captions or assign a product.
- Step numbers do not appear: Enable Show step numbers. A custom Subheading replaces the default step number.
- The Buy panel does not show a purchasable product: Make sure a product is selected in the Buy panel.
- Variant-image swatches do not appear: Check that variant images are assigned in Shopify admin.
- Add to cart is disabled: Check the selected product variant's availability and inventory.
- The scrolling effect looks different on mobile: This is expected; mobile displays images alongside the steps instead of using a sticky image column.
Need Further Assistance
If you encounter any issues or need additional help with your Concept theme, please reach out to our support team via our Ticket System for assistance within 8 hours.
Share:
How to Set Up the Reveal Image with Text Section in Concept
How to Set Up the Shop the Story Section in Concept