Scrolling vertical content

The Scrolling Vertical Content section allows for animated vertical scrolling effects, displaying text, images, icons, and videos in a staggered and visually engaging manner. This section is ideal for storytelling, product highlights, or branding elements with parallax effects.

How to add scrolling vertical content section

Quick Start Guide

‍

Access the Theme Editor: Navigate to `Online Store > Themes > Customize`.
Add a Section: Click on `Add section` and select the desired section from the list of available sections.
Customize Your Section: Adjust the settings such as display type, alignment, and visibility according to your preferences.
‍

If you need a more detailed, step-by-step guide on accessing the theme editor, adding sections and blocks, refer to our Setting up theme sections and blocks article.

General section settings

Within this section, you'll find common settings like containers, visibility options, and color settings that are consistent across all sections. For more detailed information on these shared settings, please refer to the Common settings between all sections article.

Note

Unlike the other sections that contain a section header, this particular section does not include one. Instead, the content is presented as blocks that overlay the image within the section.

Section Settings
‍

Allow Transparent Header: Enable or disable the transparent header option.
Content Position on Desktop: Set the alignment of content on desktop (Top Left, Top Center, Top Right, Middle Left, Middle Center, Middle Right, Bottom Left, Bottom Center, Bottom Right).
Content Position on Mobile: Choose where the content appears on mobile (Top, Middle, Bottom).
Content Alignment on Desktop: Adjust the alignment of text content within the section on desktop (Left, Center, Right).
Content Alignment on Mobile: Adjust the alignment of text content on mobile (Left, Center, Right).
Content Maximum Width: Set the maximum width for the content area (400-700px).
Overlay Opacity: Adjust the background overlay transparency (0-10%).

Color Settings

Color Scheme: Choose a color scheme for the section.

Block Settings
‍

Icon

Icon Selection: Choose an icon from the available list or select "None."
Custom Icon: Upload a custom icon image.
Icon Height on Desktop: Adjust the icon size on desktop (30-140px).
Icon Height on Mobile: Adjust the icon size on mobile (30-140px).
Show on Desktop: Enable or disable icon visibility on desktop.
Horizontal Position on Desktop: Set the horizontal placement of the icon (0-100%).
Vertical Position on Desktop: Adjust the vertical position of the icon (0-200%).
Show on Mobile: Enable or disable icon visibility on mobile.
Horizontal Position on Mobile: Set the horizontal placement of the icon on mobile (0-100%).
Vertical Position on Mobile: Adjust the vertical position of the icon on mobile (0-200%).
Scrolling Speed: Adjust the parallax effect speed (-10 to 10%).

Text

Text Content: Add a short text description or statement.
Text Color: Select a color for the text.
Background Color: Set the background color for the text block.
Width on Desktop: Adjust the text block width (10-100%).
Horizontal Position on Desktop: Set the horizontal placement of the text (0-100%).
Vertical Position on Desktop: Adjust the vertical position of the text (0-200%).
Show on Mobile: Enable or disable text visibility on mobile.
Width on Mobile: Adjust the text block width on mobile (10-100%).
Horizontal Position on Mobile: Set the horizontal placement of the text on mobile (0-100%).
Vertical Position on Mobile: Adjust the vertical position of the text on mobile (0-200%).
Scrolling Speed: Adjust the parallax effect speed (-10 to 10%).

Image

Image Upload: Select an image to display.
Image Link: Add a clickable URL for the image.
Width on Desktop: Adjust the image width (10-60%).
Horizontal Position on Desktop: Set the horizontal placement of the image (0-100%).
Vertical Position on Desktop: Adjust the vertical position of the image (0-200%).
Show on Mobile: Enable or disable image visibility on mobile.
Width on Mobile: Adjust the image width on mobile (10-60%).
Horizontal Position on Mobile: Set the horizontal placement of the image on mobile (0-100%).
Vertical Position on Mobile: Adjust the vertical position of the image on mobile (0-200%).
Scrolling Speed: Adjust the parallax effect speed (-10 to 10%).

Video

Video Upload: Add a video to display.
Cover Image: Upload a placeholder image for the video before playback.
Width on Desktop: Adjust the video width (10-60%).
Horizontal Position on Desktop: Set the horizontal placement of the video (0-100%).
Vertical Position on Desktop: Adjust the vertical position of the video (0-200%).
Show on Mobile: Enable or disable video visibility on mobile.
Width on Mobile: Adjust the video width on mobile (10-60%).
Horizontal Position on Mobile: Set the horizontal placement of the video on mobile (0-100%).
Vertical Position on Mobile: Adjust the vertical position of the video on mobile (0-200%).‍
Scrolling Speed: Adjust the parallax effect speed (-10 to 10%).

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!