Slider (vertical) section
The Slider (vertical) section of Combine layers images, icons, text and videos over a background with parallax scrolling.
Applies to: Combine 4.2.0 and later. Added in: Combine 1.0.0. Last checked: 2026-10-13 against Combine 4.2.0.
The Slider (vertical) section keeps a caption, a title and a button in the middle of the screen while images, icons, texts and videos scroll past them. You place each layer yourself, and layers can move at their own speed for a parallax effect. The Lookbook and Testimonials page templates are built with it.
Where to find it: in the theme editor, select Add section and choose Slider (vertical). It starts with four Image blocks.
How the layers work
- The text of the section (caption, title, button) stays fixed in the middle of the screen while the customer scrolls through the section.
- Each block is a layer: an Image, an Icon, a Text or a Video, placed with its own width and offsets.
- The section is as tall as it needs to be to reach its lowest layer.
- Up to 16 layers per section.
Setting up a layered slide
Add the section and its text
Select Add section and choose Slider (vertical). Under Text content, fill in Caption, Title, Button label and Button link.
Add the layers
Select Add block and choose Image, Icon, Text or Video, once per layer. Upload the image or video, or type the text.
Place each layer on desktop
Under Desktop layout, set Width (the share of the section width), Horizontal offset (from the left edge) and Vertical offset (from the top of the section, in percent of the screen height, up to 200 percent). Layers with a higher vertical offset come later in the scroll.
Place each layer on mobile
Under Mobile layout, set the same three values for phones, or turn on Hide element on mobile for layers that crowd a small screen. Hide element on desktop does the opposite.
Add parallax, if you want it
Under Parallax, set Scrolling speed from -10 to 10. Positive values move the layer faster than the page, negative values slower; 0 keeps it still. Parallax runs on desktop only.
Choose how the text meets the layers
Set Text blending mode under Text style. Behind puts the text behind the layers; Exclusion and Soft light blend it with them.
Text content
- Caption is the small line above the title. Title is the main text; it takes bold, italic and links.
- Button label and Button link add one button. Open link in a new window appears once a link is set.
- Heading tag under SEO sets the HTML level of the title (default H3).
Text style
- Text alignment places the text in one of nine positions on the screen (default Center middle).
- Title size is Regular, Large (the default) or Extra large.
- Text spacing sets the gap between caption, title and button, from -12 to 60 px (default 32 px).
- Button style is Solid (the default) or Outline. A solid button does not work with the blending modes.
- Text blending mode is Normal, Exclusion, Soft light or Behind. Exclusion works when the text color is close to the background color.
Design
- Background color fills the section (default a light gray). Background image replaces it with an image that moves at half the scroll speed.
- Text color sets the color of the caption, title and button.
- Images border radius rounds the corners of the image and video layers, 0 to 30 px.
- Add top margin adds space above the section; Remove top padding removes the space inside it, above the first layer.
Blocks
Image
Image is the picture and Link makes it clickable. Width (10 to 80 percent), Horizontal offset, Vertical offset, the hide options and Scrolling speed place it. On desktop, the horizontal offset is limited so the image does not leave the screen.
Icon
Icon is a small image, 256 x 256 px, shown at Icon size (64, 96 or 128 px). It has the same offsets, hide options and Scrolling speed as the Image layer, but no width.
Text
Content is a paragraph with its own Text color and Background color, for a quote or a note between the images. It is placed like the Image layer, with a Width of up to 100 percent.
Video
Video plays muted in a loop, with a Fallback image for phones that block autoplay. Use different media on mobile shows Mobile video file, with its own Mobile video aspect ratio. It is placed like the Image layer.
Why do my layers overlap the text?
Because of their offsets. The text stays in the middle of the screen, and layers scroll over it. Move the layers with Horizontal offset, make them narrower with Width, or set Text blending mode to Behind so the text sits under them on purpose.
Can I import the slider from a Combine demo?
Yes, with a page template from the demo. See Rebuild a Combine demo store for the import steps and their limits. The simpler route is the Lookbook page template, which already has two Slider (vertical) sections; see Alternate page templates.
All Slider (vertical) settings
Every setting of this section, with its type and default.
Accepts these blocks: Image, Icon, Text and Video (up to 16 blocks in the section).
Slider (vertical) section: Text content
Where to find it: Slider (vertical) → Text content
Caption (text field, default: "Introducing"): Sets the small line above the title, fixed in the middle of the screen.
Title (rich text, default: "Your best promotion yet"): Sets the main text. Supports bold, italic and links.
Button label (text field, default: "Show more").
Button link (link).
Open link in a new window (checkbox, default: off). Shown only when Button link is set.
Slider (vertical) section: Text style
Where to find it: Slider (vertical) → Text style
Text alignment (dropdown, default: Center middle): Places the fixed text in one of nine positions on the screen. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Title size (dropdown, default: Large). Options: Regular, Large, Extra large.
Text spacing (slider -12 to 60 px, default: 32 px): Sets the gap between caption, title and button.
Button style (dropdown, default: Solid): Solid style doesn't work with blending modes. Options: Outline, Solid.
Text blending mode (dropdown, default: Normal): Blends the text with the layers. Behind puts the text behind them. Options: Normal, Exclusion, Soft light, Behind.
Slider (vertical) section: Design
Where to find it: Slider (vertical) → Design
Background color (color, default: #F7F7F7): Fills the section.
Background image (image): Replaces the background color with an image that moves at half the scroll speed.
Text color (color, default: #000000): Sets the color of the caption, title and button.
Images border radius (slider 0 to 30 px, default: 0 px): Rounds the corners of the image and video layers.
Slider (vertical) section: Gutter
Where to find it: Slider (vertical) → Gutter
The Slider (vertical) section uses the standard Gutter settings, listed in General section styling. Not available in this section: Decrease top margin and Remove bottom margin.
Add top margin (checkbox, default: off): Adds space above the section.
Remove top padding (checkbox, default: off): Removes the space inside the section above the first layer.
Slider (vertical) section: SEO
Where to find it: Slider (vertical) → SEO
The Slider (vertical) section uses the standard SEO settings, listed in General section styling.
Heading tag (dropdown, default: H3): Sets the HTML level of the title for search engines. Options: H1, H2, H3, H4, span.
Image block
Where to find it: Slider (vertical) → Add block → Image
Image (image).
Link (link): Makes the image layer a link.
Image block: Desktop layout
Where to find it: Slider (vertical) → Add block → Image → Desktop layout
Width (slider 10 to 80 %, step 5, default: 25 %): Sets the layer width as a share of the section width.
Horizontal offset (slider 0 to 90 %, step 5, default: 30 %): Places the layer from the left edge. On desktop it is limited so the layer does not leave the screen.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section, in percent of the screen height. Higher values come later in the scroll.
Hide element on desktop (checkbox, default: off): Hides the layer on screens 768 px and wider.
Image block: Mobile layout
Where to find it: Slider (vertical) → Add block → Image → Mobile layout
Hide element on mobile (checkbox, default: off): Hides the layer on screens narrower than 768 px.
Width (slider 10 to 80 %, step 5, default: 25 %): Sets the layer width on mobile.
Horizontal offset (slider -30 to 100 %, step 5, default: 30 %): Places the layer from the left edge on mobile.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section on mobile, in percent of the screen height.
Image block: Parallax
Where to find it: Slider (vertical) → Add block → Image → Parallax
Scrolling speed (slider -10 to 10, default: 0): Moves the layer faster (positive) or slower (negative) than the page while scrolling, for a parallax effect. Desktop only.
Icon block
Where to find it: Slider (vertical) → Add block → Icon
Icon (image): Sets a small image for the icon layer, 256 x 256 px.
To visualize & download icons, please visit our icon library.
Icon size (slider 64 to 128 px, step 32, default: 96 px): Sets the size the icon shows at.
Icon block: Desktop layout
Where to find it: Slider (vertical) → Add block → Icon → Desktop layout
Horizontal offset (slider 0 to 90 %, step 5, default: 30 %): Places the layer from the left edge. On desktop it is limited so the layer does not leave the screen.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section, in percent of the screen height. Higher values come later in the scroll.
Hide element on desktop (checkbox, default: off): Hides the layer on screens 768 px and wider.
Icon block: Mobile layout
Where to find it: Slider (vertical) → Add block → Icon → Mobile layout
Hide element on mobile (checkbox, default: off): Hides the layer on screens narrower than 768 px.
Horizontal offset (slider 0 to 100 %, step 5, default: 30 %): Places the layer from the left edge on mobile.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section on mobile, in percent of the screen height.
Icon block: Parallax
Where to find it: Slider (vertical) → Add block → Icon → Parallax
Scrolling speed (slider -10 to 10, default: 0): Moves the layer faster (positive) or slower (negative) than the page while scrolling, for a parallax effect. Desktop only.
Text block
Where to find it: Slider (vertical) → Add block → Text
Content (rich text, default: "Write a short statement or product description. Inform your customers about brand content."): Sets the text of the layer. Supports bold, italic and links.
Text color (color, default: #000000).
Background color (color, default: transparent): Sets a background behind the text layer.
Text block: Desktop layout
Where to find it: Slider (vertical) → Add block → Text → Desktop layout
Width (slider 10 to 100 %, step 5, default: 25 %): Sets the layer width as a share of the section width.
Horizontal offset (slider 0 to 90 %, step 5, default: 30 %): Places the layer from the left edge. On desktop it is limited so the layer does not leave the screen.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section, in percent of the screen height. Higher values come later in the scroll.
Hide element on desktop (checkbox, default: off): Hides the layer on screens 768 px and wider.
Text block: Mobile layout
Where to find it: Slider (vertical) → Add block → Text → Mobile layout
Hide element on mobile (checkbox, default: off): Hides the layer on screens narrower than 768 px.
Width (slider 10 to 100 %, step 5, default: 25 %): Sets the layer width on mobile.
Horizontal offset (slider 0 to 90 %, step 5, default: 30 %): Places the layer from the left edge on mobile.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section on mobile, in percent of the screen height.
Text block: Parallax
Where to find it: Slider (vertical) → Add block → Text → Parallax
Scrolling speed (slider -10 to 10, default: 0): Moves the layer faster (positive) or slower (negative) than the page while scrolling, for a parallax effect. Desktop only.
Video block
Where to find it: Slider (vertical) → Add block → Video
Video (video): Plays a muted, looping video as a layer.
Fallback image (image): Shows instead of the video on phones that block autoplay.
Use different media on mobile (checkbox, default: off): Shows a different video on screens narrower than 768 px. Shown only when Video is set.
Mobile video file (video). Shown only when Use different media on mobile is on and Video is set.
Mobile video aspect ratio (dropdown, default: Natural): Sets the shape of the mobile video. Natural keeps the video's own proportions. Options: Natural, Wide (16:9), Short (4:3), Square (1:1), Tall (5:6), Taller (2:3), Tallest (9:16). Shown only when Use different media on mobile is on and Mobile video file is set and Video is set.
Video block: Desktop layout
Where to find it: Slider (vertical) → Add block → Video → Desktop layout
Width (slider 10 to 100 %, step 5, default: 25 %): Sets the layer width as a share of the section width.
Horizontal offset (slider 0 to 90 %, step 5, default: 30 %): Places the layer from the left edge. On desktop it is limited so the layer does not leave the screen.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section, in percent of the screen height. Higher values come later in the scroll.
Hide element on desktop (checkbox, default: off): Hides the layer on screens 768 px and wider.
Video block: Mobile layout
Where to find it: Slider (vertical) → Add block → Video → Mobile layout
Hide element on mobile (checkbox, default: off): Hides the layer on screens narrower than 768 px.
Width (slider 10 to 80 %, step 5, default: 25 %): Sets the layer width on mobile.
Horizontal offset (slider 0 to 100 %, step 5, default: 30 %): Places the layer from the left edge on mobile.
Vertical offset (slider 0 to 200 %, step 5, default: 40 %): Places the layer from the top of the section on mobile, in percent of the screen height.
Video block: Parallax
Where to find it: Slider (vertical) → Add block → Video → Parallax
Scrolling speed (slider -10 to 10, default: 0): Moves the layer faster (positive) or slower (negative) than the page while scrolling, for a parallax effect. Desktop only.
Related pages
- Alternate page templates: the Lookbook and Testimonials templates.
- Rebuild a Combine demo store: import the demo sliders.
- Flex slideshow section: a horizontal slideshow.
- General section styling: the standard section settings.