Visual stories
Overview:
The Visual Stories section allows merchants to create a flexible and engaging layout with headings, descriptions, and image banners. Content can be split into one or two columns using separators and is fully responsive. Merchants can control the layout, spacing, alignment, and visibility of each block across devices.
Section Configuration:
| Setting | Description |
|---|---|
| Container Width | Determines whether the section content is displayed in a boxed layout (container) or stretched edge-to-edge across the screen (container-fluid). |
| Max Content Width | Sets the maximum width of the content as a percentage of the page width. Visible only when the container is boxed. |
| Container Padding | Enables or disables horizontal padding within the content container. |
| Text Alignment (Desktop) | Controls the horizontal alignment of text on larger screens. |
| Text Alignment (Mobile) | Controls the horizontal alignment of text on smaller screens. |
| Color Scheme | Applies a theme-wide color palette to the section’s background and text. |
| Top Padding | Adds vertical spacing above the section. |
| Bottom Padding | Adds vertical spacing below the section. |
Blocks Configuration:
Heading Block
Displays a heading element within the section.
| Setting | Description |
|---|---|
| Heading Text | Sets the heading content. Supports inline rich text formatting. |
| Heading Size | Selects the heading tag (H1–H6) used for styling and SEO hierarchy. |
| Heading Weight | Controls the font weight of the heading, ranging from light (300) to black (900). |
| Visibility | Controls which devices the block is hidden on. Options include desktop, mobile, or visible on all devices. |
| Bottom Margin | Adds vertical spacing below the heading. |
Description Block
Displays a paragraph of descriptive text.
| Setting | Description |
|---|---|
| Description Text | Sets the description content. Supports rich text formatting. |
| Text Size | Selects the size of the description text. Options include small and large. |
| Text Weight | Controls the font weight of the description, ranging from light (300) to black (900). |
| Visibility | Controls which devices the block is hidden on. Options include desktop, mobile, or visible on all devices. |
| Bottom Margin | Adds vertical spacing below the description. |
Image Banner Block
Displays an image with full width inside the section.
| Setting | Description |
|---|---|
| Image | Uploads an image to be displayed as a banner inside the section. |
| Visibility | Controls which devices the block is hidden on. Options include desktop, mobile, or visible on all devices. |
| Bottom Margin | Adds vertical spacing below the image banner. |
Column Separator Block
Divides the content into two columns. Blocks placed before the separator appear in the left column; blocks after the separator appear in the right column.
| Setting | Description |
|---|---|
| Separator Info | This is a visual layout divider with no visible output on the storefront. It is used to control block placement into left and right columns. Only one instance is allowed. |