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.
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.
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.
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.
Desktop 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.
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: Choose how a story video starts playing. For example, On hover starts the video when the customer hovers over the story.
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.
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.
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.