Slideshow: vertical section
The Slideshow: vertical section is Highlight's signature slider: slides that scroll vertically, each with up to 3 images or videos and blended text.
Applies to: Highlight 4.1.0 and later. Added in: Highlight 1.0.0. Last checked: 2026-10-13 against Highlight 4.1.0.
The Slideshow: vertical section is Highlight's signature section, where the whole theme concept started. Its slides follow each other vertically as the customer scrolls, on desktop and on phones, so nobody misses a slide the way they often do with horizontal sliders. Each slide has a large heading and up to 3 images or videos, placed asymmetrically and moving with a parallax effect.
Where to find it: Online Store → Themes → Customize → Add section → Slideshow: vertical (Media & galleries category). The default home page of Highlight starts with one.
Ways to use it:
- Featured collections: one slide per collection, each linking to it, with images of different products from that collection. Use the captions for the product names, shown on desktop.
- A featured product: one slide that links to the product, with two or three images of it. Or several slides, each one a featured product.
- A brand story or a history timeline: one slide per chapter or year.
Text size and blending
- Text size sets the size of the slide headings: Large (the default) scales with the height of the browser window; Regular uses the heading size from Typography theme settings.
- Text blending modes makes the heading text change color where it passes over an image, so it stays readable on light and dark parts. Default: on. Turn it off for plain text in the store text color.
Slides
Each slide is an Image block, up to 8. The section starts with three. The heading of each slide stays in place while its images scroll past.
- Heading is the slide's large title. Default: "Welcome to our store".
- Subheading shows a line under it. Default: "Showcase your best products".
- Button label and Button link add an underlined link under the subheading. On phones the button is hidden and the heading and subheading become the link instead.
- Heading tag sets the HTML level of the slide heading for search engines. Default: H2.
Blocks
Image
Each slide has three media areas: Media 1 (primary), Media 2 and Media 3. Each has the same four settings:
- Image picks the picture. It keeps its own proportions; landscape images show larger than portrait ones.
- Video plays a video uploaded to Shopify over the image, muted and in a loop. The image shows when the video cannot play, and it sets the shape of the video, so upload one anyway.
- Caption shows a short text next to the media on desktop and tablets, not on phones. A long caption is cut off.
- Media link makes the media a link, for example to the product it shows.
The primary media is the large one. Media 2 and Media 3 are smaller and scroll at different speeds; their positions change from slide to slide in a pattern of three.
Media 2 and Media 3 show only when their Image is set. A video without an image in those areas does not show.
Building a vertical slideshow
Add a slide
Select the Slideshow: vertical section, then Add block → Image. Each Image block is one slide.
Add two or three media
Upload an Image in Media 1 (primary) and in Media 2, and optionally Media 3. Add a Video to any of them to play it over its image.
Write the heading
Type the slide's Heading and Subheading. Keep the heading short: with Text size set to Large it is very big.
Add the links
Fill in Button label and Button link for the slide, and a Media link for each image that should open a product or collection.
Add captions
Write a Caption for each media, for example the product name. Captions show on desktop and tablets.
How many images should a slide have?
Two or three. The layout is made to place the images asymmetrically around the heading, so slides with two or three media look the most like Highlight. A slide with one image works but looks plain.
Why do captions not show on mobile?
Captions are shown only on larger screens: desktop and tablets. On phones (under 600 px) there is no room next to the media, so Highlight hides them. Put information that phone customers need in the heading or subheading.
Why does the button not show on my phone?
On phones, the button is hidden to keep the slide clean. The slide's heading and subheading link to the Button link instead, so customers tap the heading.
All Slideshow: vertical settings
Every setting, with its type and default.
Accepts these blocks: Image (up to 8 blocks in the section).
Text size (dropdown, default: Large): Sets the size of the slide headings: Large scales with the window height, Regular uses the heading size from Theme settings → Typography. Options: Regular, Large.
Text blending modes (checkbox, default: on): Makes the heading text change color where it passes over an image, so it stays readable on light and dark parts.
Image block
Where to find it: Slideshow: vertical → Add block → Image
Heading (text field, default: "Welcome to our store"): Sets the slide's large title. It stays in place while the slide's images scroll past.
Subheading (text field, default: "Showcase your best products"): Sets the line shown under the slide heading.
Button label (text field): Sets the text of the link under the subheading. On phones the button is hidden and the heading links instead.
Button link (link): Sets where the slide's button goes, and where the heading links on phones.
Image block: Media 1 (primary)
Where to find it: Slideshow: vertical → Add block → Image → Media 1 (primary)
Image (image): Sets the slide's large primary picture, at its own proportions.
Video (video): Plays a video uploaded to Shopify over the primary image, muted and in a loop. The image sets its shape and shows when the video cannot play.
Caption (rich text): Sets a short text shown next to the primary media on desktop and tablets. Long captions are cut off.
Media link (link): Makes the primary media a link.
Image block: Media 2
Where to find it: Slideshow: vertical → Add block → Image → Media 2
Image (image): Sets the second picture. Media 2 shows only when this is set.
Video (video): Plays a video over the second image. It shows only when Media 2 has an image.
Caption (rich text): Sets a short text shown next to the second media on desktop and tablets.
Media link (link): Makes the second media a link.
Image block: Media 3
Where to find it: Slideshow: vertical → Add block → Image → Media 3
Image (image): Sets the third picture. Media 3 shows only when this is set.
Video (video): Plays a video over the third image. It shows only when Media 3 has an image.
Caption (rich text): Sets a short text shown next to the third media on desktop and tablets.
Media link (link): Makes the third media a link.
Image block: SEO
Where to find it: Slideshow: vertical → Add block → Image → SEO
Heading tag (dropdown, default: H2): Sets the HTML heading level of the slide heading for search engines. It does not change the size. Options: H1, H2, H3, H4, span.
Related pages
- Highlight's unique features: the vertical slideshow and the other Highlight features.
- Slideshow: horizontal section: images that slide sideways.
- Typography theme settings: the heading font and size.
- Troubleshoot sections and blocks: videos that do not play.