The Products Story section displays products in an interactive story-style format, combining images or videos with products embedded directly within each story.
This section enhances product visibility through a modern horizontal scrolling experience, allowing users to open a story modal to view details and interact with products quickly.
Setting | Description |
|---|---|
Reveal on scroll | Shows animation when the section enters the viewport. |
Make section full width | Expands the section to full screen width. |
Color scheme | Applies a color scheme to the section. |
Background image | Sets a background image for the section. |
Section padding | Controls top and bottom spacing for desktop and mobile. |
Setting | Description |
|---|---|
Alignment | Aligns content (left, center, right). |
Heading | Section title. |
Heading size | Controls heading size. |
Heading tag | HTML heading tag (H1–H6), affects SEO. |
Uppercase | Displays heading in uppercase. |
Description | Supporting text below the heading. |
Text size | Controls description text size. |
Setting | Description |
|---|---|
Color scheme | Applies color scheme to story cards. |
Image ratio | Defines image ratio (e.g., 9:16). |
Number of images on desktop | Number of visible stories on desktop. |
Spacing between | Space between stories on desktop. |
Mobile spacing between | Space between stories on mobile. |
Desktop auto scroll | Automatically scrolls when stories exceed screen width. |
Label | CTA button text. |
Show icon | Displays an icon inside the button. |
Icon button | Selects the button icon. |
Uppercase | Displays label in uppercase. |
Setting | Description |
|---|---|
Auto-rotate | Automatically switches between stories in modal view. |
Change story every | Time interval for switching stories (in seconds). |
Enable quick view | Enables product quick view inside the modal. |
Setting | Description |
|---|---|
Author name | Displays the author name. |
Author avatar | Author avatar image (recommended 100×100px). |
Author link | Link to author page or blog. |
Open in new tab | Opens the link in a new tab. |
Each Story block represents a single story card.
Setting | Description |
|---|---|
Image | Background image of the story. |
Video | Background video (overrides image if provided). |
Product list | Products displayed within the story. |
Products are shown as interactive items, allowing users to:
Open quick view
Navigate to the product page
Use vertical images/videos (9:16) for optimal display.
Limit the number of products per story to maintain clarity.
Focus on visual storytelling to increase engagement.