The Product story section combines lifestyle imagery with shoppable products, allowing customers to discover and shop featured items directly from each story. This section also enhances product visibility through a modern horizontal scrolling experience, allowing users to open a story modal to view details and interact with products quickly.
1. Product story settings
1.1 Appearance
Use the general section settings to customize the appearance of the Product story section.
Reveal on scroll: Show an animation when the section becomes visible as customers scroll down the page.
Make section full width: Extend the section across the full available width.
Color scheme: Select the section's color scheme.
Custom background type: Choose how the section background is displayed:
Inherit: Use the default background from the selected color scheme.
Color: Use a custom background color.
Image: Use an image as the section background.
1.2 Section header
Use the Section header settings to introduce the Product story section.
Align center: Center the heading and description within the section.
Heading: Add the main heading for the section.
Heading size: Select the size of the heading.
Heading tag: Choose the HTML heading tag, such as H1, H2, or H3. This setting can affect SEO.
Uppercase: Display the heading in uppercase.
Description: Add supporting text below the heading.
Text size: Adjust the size of the description text.
1.3 Story cards
Use the Story cards settings to control the layout and appearance of the stories.
Color scheme: Select a color scheme for the story cards.
Image ratio: Choose the aspect ratio used to display story images, such as Portrait.
Number of images on desktop: Set how many story cards are displayed at the same time on desktop. The layout is automatically optimized for mobile.
Spacing between: Adjust the space between story cards on desktop.
Mobile spacing between: Adjust the space between story cards on mobile.
Auto scroll: Enable Desktop auto scroll to automatically move the stories horizontally on desktop.
Auto-scroll is activated only when there are more stories than can be displayed on the screen.
Speed: Adjust the auto-scroll speed on desktop devices.
Mobile auto scroll: Enable automatic scrolling through story cards on mobile devices as well
Mobile speed: Adjust the auto-scroll speed on mobile devices separately from Desktop speed.
Button label: Set the text displayed on the button, such as Shop now.
Show icon: Show or hide an icon inside the button.
Icon button: Select the icon displayed with the button.
Uppercase: Display the button label in uppercase.
Video autoplay trigger: Allows you to control when videos in the Products story section start playing automatically. You can choose between two options:
On hover: Videos automatically start playing when customers hover over them.
When in view: Videos automatically start playing when customers scroll to the section and the videos become visible on the screen, without requiring any hover interaction.
Select When in view if you want videos to play automatically as customers scroll through the Products story section.
Show sound button: Enable this option to display a sound control button, allowing customers to turn video sound on or off while watching product stories. When customers enable sound and open the video popup, the video will play with sound. After closing the popup, the sound button on the story video will automatically switch off.
1.4 Modal
The Modal settings control the story viewer that opens when customers interact with a story.
Auto-rotate: Automatically move between stories while the modal is open.
Change story every: Set how many seconds each story remains visible before automatically moving to the next story. This option works with Auto-rotate.
Quick view: Enable product Quick view from the story modal, allowing customers to view connected product information without leaving the story experience.
Author name: Add the author or account name displayed in the story experience.
1.5 Section padding
Adjust the spacing around the section separately for desktop and mobile:
Top padding: Space above the section on desktop.
Bottom padding: Space below the section on desktop.
Mobile top padding: Space above the section on mobile.
Mobile bottom padding: Space below the section on mobile.
2. Add Story blocks
Click Add Story to add individual stories to the section. Each Story block can contain visual content and associated products.
Image: Select the image displayed for the story. For best results, use images with a consistent aspect ratio across all stories.
Video: Add a video to the story. If a video is selected, its playback behavior follows the Video autoplay trigger configured in the Story cards settings.
Product list: Selected products are represented on the story card and allow customers to discover the products featured in the image or video. Multiple products can be connected to the same story.
