The Shop the Story section combines an interactive scrolling story with product shopping. As customers scroll through each Step, the section displays its corresponding image and content. You can let customers select a variant and add a product from an individual step, or purchase all featured products together using the Set panel at the end.
Unlike Scroll story, which focuses on storytelling with an optional single-product Buy panel, Shop the Story is designed to sell multiple products throughout the story and as a set.
Steps:
Add the Shop the 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 show the story.
- Click Add section and select Shop the Story.
- Click Save.
The default section preset includes several Step blocks and one Set panel block. You can edit and reorder these blocks.
Configure the story layout
- Open the Shop the Story section settings.
- Use Image position on desktop to display the image area on the Left or Right.
- Enable Show step numbers to display step numbers when a custom subheading is not provided.
- Enable Show product captions on the image to display image captions.
- Click Save.
As visitors scroll on desktop, the image area follows the active step. On mobile, the images appear with their corresponding story content.
Add and configure Step blocks
- Under Shop the Story, click Add block and choose Step.
- Select a Product to feature and sell in that step.
- Upload an Image, or leave it blank to use the selected product's image.
- Add a Subheading, Heading, and Text.
- Use Caption and Caption detail to control the text shown with the image. If left blank, the selected product's title and price can be used.
- Optionally enter a Button label and Button link, then choose the button style and whether to open the link in a new tab.
- Repeat to add more steps, then drag the blocks into your preferred story order.
- Click Save.
Enable shopping within each Step
- Open the main Shop the Story section settings.
- Enable Show the variant picker and an Add button in each step.
- Under Variant picker, choose Dropdown or Button.
- If you choose Button, turn on Enable color swatches if needed.
- Choose the swatch type: Color swatch or Variant image.
- Click Save.
When enabled, steps with selected products can display a product price, variant choices, and an Add button. Customers can purchase individual products without waiting for the final set panel.
Configure the Set panel
- Under Shop the Story, add or open the Set panel block.
- Choose an optional Image for the final panel. If left blank, the first featured product's image is used.
- Customize the Label, Title, and Button label.
- Click Save.
The Set panel appears after the story steps and lists the unique products selected across the steps. Customers can choose available variants from the panel's dropdowns, review the total, and click Add the set to add those products to the cart together.
Set up an optional bundle discount
- In Shopify admin > Discounts, create the automatic discount or discount code that should apply to the selected products.
- Return to Online Store > Themes > Customize and open the Shop the Story section.
- Enable Set discount created in Shopify Admin after the matching discount has been created.
- Set the Discount percentage to match your Shopify discount.
- If you created a discount code, enter it in Discount code. Leave this field blank for an automatic discount.
- If you are using an automatic discount, customize the Note under the button if needed.
- Click Save.
The section previews a discounted set total and can apply the specified discount code when the set is added to the cart. The final discount is calculated by Shopify according to the discount's actual conditions.
Customize the section heading and appearance
- Set the section Heading, Subheading, and Description.
- Adjust Heading size, Heading alignment, and Heading tag.
- Add an optional section-level Button label and Button link.
- Customize Highlighted text, text and background colors, highlight colors, and button colors.
- Under Section, adjust spacing, divider, full-width layout, and rounded corners.
- Click Save.
Preview the Shop the Story section
- Preview the page and scroll through each step to check the image and content transitions.
- Check the layout on desktop and mobile.
- Test each step's variant picker and Add button, if enabled.
- In the Set panel, select variants and check the displayed total.
- Test Add the set and verify that the expected products and any eligible Shopify discount appear in the cart or checkout.
Notes and limitations
- The section supports up to 10 blocks in total, including Step blocks and the Set panel.
- Only one Set panel can be added.
- A selected product can be featured in multiple steps but is included only once in the set.
- The Set panel displays variant dropdowns for products with multiple variants, independently of the Step variant picker style.
- Unavailable variants cannot be selected for the set; the set purchase button is unavailable when a selected item cannot be purchased.
- The discount displayed in the section is a preview and must match an eligible discount configured in Shopify.
Troubleshooting
- The story does not appear: Add at least one Step block.
- A step has no image: Upload an image or select a product with a featured image.
- The Add button does not appear in a step: Enable Show the variant picker and an Add button in each step and select a product for that step.
- The Set panel does not appear: Add a Set panel block and assign a product to at least one Step.
- A product is missing from the set: Check that its Step block has a selected product. Duplicate occurrences of the same product are combined.
- The set cannot be added to the cart: Check inventory and variant availability for every item in the set.
- The discount is not applied: Check the matching discount in Shopify admin > Discounts, including its code, eligibility, and requirements.
- Color swatches do not appear: Select the Button variant picker, enable color swatches, and verify your product color options or variant images.
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 Scroll Story Section in Concept
How to Set Up the Quiz Kit Section in Concept