Slideshow: vertical section
The Slideshow: vertical section shows up to 8 full-screen slides that scroll vertically in Kingdom and turn into a horizontal slider on mobile.
Applies to: Kingdom 6.2.0 and later. Added in: Kingdom 2.0.0. Last checked: 2026-10-13 against Kingdom 6.2.0.
The Slideshow: vertical section shows full-screen slides stacked on top of each other. As customers scroll down the page, each slide takes the whole screen in turn, with a parallax effect on the image and the text. On phones it can turn into a horizontal slider.
Where to find it: select Add section in the theme editor, then choose Slideshow: vertical (Add section category Media & galleries).
Adding slides
Each slide is an Image block; the section holds up to 8. Dots show the position; selecting a dot scrolls to that slide.
- Image sets the slide image, ideally 1920 x 1040 px. It fills the screen and is cropped around the focal point you set on it in Shopify.
- Mobile image replaces Image on screens 948 px wide or less. Use a portrait image for phones.
- Caption, Heading and Subheading set the text. Leave any of them empty to hide it. Heading tag sets the heading's HTML tag (default H2).
- Button label adds a button with an arrow; Link sets where it goes. Without a button label, the slide's text becomes the link.
- Custom text color sets the color of the text and button. Background overlay lays a color over the image behind the text, at 36 percent opacity.
Heading size (Regular, Large or Extra large) and Text alignment (nine positions, default Left bottom) apply to every slide.
The Slideshow: vertical section always runs edge to edge; it has no inner content spacing setting.
Mobile design
On screens 948 px wide or less, the parallax effect is off. Turn the vertical slider into a horizontal one on mobile sets what customers see:
- On (default): the slides become a horizontal slideshow that customers swipe, with dots under it. Horizontal mobile slider height sets its height: Small, Medium, Large (80 percent of the screen, the default) or Full.
- Off: the slides stay stacked, each as tall as the screen, and customers scroll through them.
Why are my slides cropped?
Because each slide fills the whole screen, and screens have many shapes. Every full-screen image is cropped on some screens. Use 1920 x 1040 px images, keep text and faces away from the edges, set a focal point, and add a Mobile image for phones. See Recommended image sizes.
Why does the parallax effect not show in the theme editor or on my phone?
Because the effect follows the page scroll on screens wider than 948 px only. The theme editor preview is narrower than a full browser window and may count as a small screen. Open the page in a full browser window on a computer to see it.
All Slideshow: vertical settings
Every setting in this group, with its type and default.
Accepts these blocks: Image (up to 8 blocks in the section).
Slideshow: vertical section: Mobile design
Where to find it: Slideshow: vertical → Mobile design
Turn the vertical slider into a horizontal one on mobile (checkbox, default: on): On screens 948 px wide or less, shows the slides as a horizontal slideshow that customers swipe. Off, the slides stay stacked, each as tall as the screen.
Horizontal mobile slider height (dropdown, default: Large): Sets the height of the horizontal mobile slideshow, as a share of the screen height. Options: Small, Medium, Large, Full.
Slideshow: vertical section: Text style
Where to find it: Slideshow: vertical → Text style
Heading size (dropdown, default: Regular): Sets the heading size of every slide. Options: Regular, Large, Extra large.
Text alignment (dropdown, default: Left bottom): Places the text on every slide. Options: Left top, Center top, Right top, Left middle, Center middle, Right middle, Left bottom, Center bottom, Right bottom.
Image block
Where to find it: Slideshow: vertical → Add block → Image
Image (image): Sets the slide image. It fills the screen and is cropped around its focal point. Recommended size: 1920 x 1040 px.
Mobile image (image): Replaces Image on screens 948 px wide or less.
Heading (text field).
Subheading (text field).
Caption (text field): Shows a small line of text above the heading.
Button label (text field): Adds a button with an arrow that opens the Link. Empty, the slide's text becomes the link.
Link (link): Unless there is a label for the button, the link will be on the text.
Image block: Colors
Where to find it: Slideshow: vertical → Add block → Image → Colors
Custom text color (color, default: transparent): Sets the color of the slide's text and button.
Background overlay (color, default: transparent): Lays this color over the slide image at 36 percent opacity.
Heading tag (dropdown, default: H2): Specify heading level to help search engines index the structure of your page. Options: H1, H2, H3, H4, span.
Related pages
- Slideshow: horizontal section: slides that move sideways.
- Recommended image sizes: slide sizes and cropping.
- Video: background section: a looping video with text.