Media with text: Vertical
The section arranges images or videos above the accompanying text, creating a vertical flow that guides customers’ attention from media to message.
This layout is ideal for highlighting products, collections, or brand stories in a clear, engaging way while maintaining a clean and modern appearance.
By stacking media and text vertically, the section emphasizes both visual content and messaging equally, making it suitable for mobile-friendly designs and longer storytelling content. It allows stores to present content in a structured, professional manner while keeping the focus on key messages and enhancing overall engagement.
Location: Sections -> Templates -> Storytelling: Media with text: Vertical
Media with text: Vertical – Options Overview
Heading
Configure heading alignment and style.
Heading alignment
Set heading alignment: Left or Center.
Layout
Control spacing, width, text alignment, and content positioning.
Top spacing
Set space above the section: None, Small, Medium, Normal.
Width
Set section width: Default, Boxed, Wide (Wide works for screens ≥1440px).
Content width
Set the width of the text/content area: 50%, 60%, 70%, 80%, 90%, 100%.
Text align
Align the text: Left or Center.
Icon width
Adjust the width of icons in the section.
Underline on hover
Enable or disable underline on headings or links when hovered.
Link
Assign a URL to buttons or headings.
Dividing line
Show or hide a visual line separating content.
Background
Configure section background appearance.
Background
Choose background type: Hide, Color, Gradient, or Image.
Colors
Customize color scheme.
Base
Set the main text/icon color.
Accent
Set the accent color for highlights.
Lines
Set the color for dividing lines.
Texts
Configure text and icon styles.
Heading
Set the style for the main heading.
Heading link hover
Style the heading when linked and hovered.
Description
Set the style for description text.
Text icon
Style icons displayed alongside text.
Button
Configure main button appearance and behavior.
Show background
Enable or disable the button background.
Background
Set button background color.
Background gradient
Apply a gradient to the button background.
Border
Set button border color and thickness.
Text
Set button text color.
Show background on hover
Enable or disable background change on hover.
Background hover
Set button background color on hover.
Background gradient hover
Apply gradient background on hover.
Border hover
Set border color on hover.
Text hover
Set button text color on hover.
Enable shadow
Turn on button shadow effect.
Shadow
Configure shadow style.
Shadow hover
Configure shadow style on hover.
Media button
Settings for video buttons over media.
Background
Set background color of media buttons.
Icon
Configure icon displayed on video buttons.
Background hover
Set background color of media buttons on hover.
Icon hover
Set icon appearance on hover.
Subsections
Each section also has subsections:
Button: Allows customization of the button title from the main section.
Heading: Allows changing the Subheading and Heading of the main section.
Text: Configure options such as Show icon, Image, Preset icon name, Text for additional content display. Can be added multiple times as needed.
Media: Allows adding and configuring media content within the section.
Type: Choose between Image or Video.
Image: Add an image to the section.
Image settings: Configure hover effects and other image options:
Image hover effect – Set interactive behavior on hover.
Basic theme settings – Choose from pre-set effects: Disable, Zoom in #1, Zoom in and rotate, Zoom in #2, Zoom out #1, Zoom out #2, Slide, Shine.
Image ratio – Select the aspect ratio for the image.
Last updated