Vertical slider section
The Vertical slider section in Seventh shows full-screen slides that move vertically as customers scroll, each with media, text and buttons.
Applies to: Seventh 4.0.0 and later. Added in: Seventh 1.0.0. Last checked: 2026-10-12 against Seventh 4.0.0.
The Vertical slider section stacks full-size slides one below the other, each with a background image or video and its own text and buttons. Customers move through the slides by scrolling down the page: each slide's content stays in view while its slide passes, and the backgrounds move with a parallax effect.
Where to find it: select Add section in the theme editor, then choose Vertical slider.
What it shows
- Slide blocks, stacked one below the other.
- Each slide has its own media, overlay, text position, color scheme and optional link.
- Each slide holds content blocks such as Heading, Text, Button, Caption, Icon or Countdown.
The section has no Section design settings. Each slide sets its own colors with its Color scheme, and the slides have no padding around them.
Slider height
Desktop height and Mobile height apply to every slide:
- Natural uses the shape of each slide's image or video, so slides can have different heights. A slide without media is square.
- The Fixed options give every slide the same shape.
- Fixed: Fullscreen (the default) makes each slide as tall as the screen.
Note: If the inner content is taller than the slider height, it will get cut out (hidden).
To fix cut-off text, choose a taller Desktop height or Mobile height (for example Fixed: Fullscreen or Natural), or remove blocks. On mobile, you can also turn on Custom mobile style on the slide and reduce its Inner blocks spacing.
Parallax effect
- Parallax effect moves the slide media at a different speed than the page while customers scroll: None, Subtle, Medium (default) or Strong.
Slide
- Media: an Image (with an optional Mobile image) or a Video fills the slide. Hide media shows only the color scheme background. Media overlay keeps the text readable.
- Text content: Vertical alignment, Content width, Text alignment and Inner blocks spacing place the blocks. Color scheme sets the text and button colors.
- Slide link: set Link to make the whole slide clickable. Add a Link text that describes the destination: it is hidden on the storefront and read by screen readers and search engines.
- Mobile style: Custom mobile style turns on separate alignment and spacing for mobile.
Does the Vertical slider change slides automatically?
No. The Vertical slider has no autorotate and no slider arrows: the slides are stacked and customers scroll down to see the next one. For slides that change automatically, use the Horizontal slideshow section with Enable autorotate on.
How do I show a different image on mobile?
Select the slide and choose a Mobile image. It appears once Image is set. The mobile image replaces the desktop image on screens narrower than 768 px. With Mobile height set to Natural, the mobile slide takes the shape of the mobile image.
All Vertical slider settings
Every setting on this page, one list per section or block, with its type and default.
Accepts these blocks: Slide.
Desktop height (dropdown, default: Fixed: Fullscreen): Sets the slide height on desktop. Natural follows the shape of each slide image or video; the Fixed options give every slide the same shape. Options: Natural, Fixed: Fullscreen, Fixed: Ultra-Wide (21:9), Fixed: Wide (2:1), Fixed: Landscape (16:9), Fixed: Standard (3:2), Fixed: Short (4:3), Fixed: Square (1:1), Fixed: Tall (5:6), Fixed: Taller (2:3).
Mobile height (dropdown, default: Fixed: Fullscreen): Sets the slide height on mobile. Natural follows the shape of each slide mobile image, image or video; the Fixed options give every slide the same shape. Options: Natural, Fixed: Fullscreen, Fixed: Square (1:1), Fixed: Tall (5:6), Fixed: Taller (2:3), Fixed: Ultra tall (9:16).
If the inner content is larger than the slider's height, the content will be clipped.
Parallax effect (dropdown, default: Medium): Moves the slide media at a different speed than the page while customers scroll. Subtle, Medium and Strong move it by up to 5, 10 and 20 percent. Options: None, Subtle, Medium, Strong.
Where to find it: Vertical slider → Slide.
Accepts these blocks: Heading, Text, Button, Icon, Empty space, Divider, Caption, Star rating, Content group, Countdown and Custom HTML / Liquid.
Image (image): Sets the background image of the slide. Shown only when Hide media is off.
Mobile image (image): Replaces the slide image on screens narrower than 768 px. Shown only when Hide media is off and Image is set.
Video (video): Plays a muted, looping video as the slide background. When both a video and an image are set, the video is shown. Shown only when Hide media is off.
Hide media (checkbox, default: off): Hides the slide media, so the slide shows only its color scheme background and content.
Media overlay (dropdown, default: Color): Sets the layer over the slide media: a flat color or a gradient. Options: Color, Gradient. Shown only when Hide media is off.
Overlay color (color with transparency, default: rgba(0,0,0,0.3)): Sets a color layer over the slide media, to keep the text readable. The default is black at 30 percent opacity. Shown only when Hide media is off and Media overlay is Color.
Overlay gradient (gradient, default: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%)). Shown only when Hide media is off and Media overlay is Gradient.
Slide block: Text content
Where to find it: Vertical slider → Slide → Text content
Vertical alignment (dropdown, default: Center): Sets where the content sits vertically in the slide. Stretch spreads the blocks over the full slide height. Options: Top, Center, Bottom, Stretch.
Stretch alignment type (dropdown, default: Space between): Sets how the blocks are spread when Vertical alignment is Stretch. Space between pins the first block to the top and the last block to the bottom. Options: Space between, Space around. Shown only when Vertical alignment is Stretch.
Content width (dropdown, default: Large): Sets the maximum width of the slide content: Small 50, Medium 70 and Large 100 percent. Options: Small, Medium, Large.
Text alignment (alignment, default: Left).
Inner blocks spacing (dropdown, default: Small): Sets the vertical space between the blocks inside the slide. Options: XXSmall, XSmall, Small, Regular, Large, XLarge.
Color scheme (color scheme): Sets the text and button colors of the slide, and the background when the media is hidden.
Slide block: Slide link
Where to find it: Vertical slider → Slide → Slide link
Link (link): Makes the whole slide clickable and sets where it leads.
Open link in a new window (checkbox, default: off). Shown only when Link is set.
Link text (text field): Hidden on the storefront. Used for screen readers and SEO. Shown only when Link is set.
Slide block: Mobile style
Where to find it: Vertical slider → Slide → Mobile style
Custom mobile style (checkbox, default: off): Turns on separate alignment and spacing settings for mobile.
Vertical alignment (dropdown, default: Center). Options: Top, Center, Bottom. Shown only when Custom mobile style is on.
Text alignment (alignment, default: Left). Shown only when Custom mobile style is on.
Inner blocks spacing (dropdown, default: Small). Options: XXSmall, XSmall, Small, Regular, Large, XLarge. Shown only when Custom mobile style is on.
Related pages
- General section styling: the Section design and Cards arrangement settings this section shares with others.
- Horizontal slideshow section: slides that customers move through sideways, with autorotate.
- Heading block: the main text of a slide.
- Button block: the call to action of a slide.