Horizontal slideshow section
The Horizontal slideshow section in Seventh shows full-width slides with media, text and buttons that rotate automatically or by swipe.
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 Horizontal slideshow section shows full-width slides that customers move through sideways. Each slide has a background image or video and its own text and buttons. It is usually the first section of the home page.
Where to find it: select Add section in the theme editor, then choose Horizontal slideshow or Horizontal slideshow: boxed.
What the section shows
The section holds Slide blocks. Each slide has its own media, overlay, text position, color scheme and optional link. It holds content blocks such as Heading, Text, Button, Caption, Icon or Countdown.
The two presets differ in size and frame:
- Horizontal slideshow fills the full width and height of the screen.
- Horizontal slideshow: boxed sits inside the page container with rounded corners (Corner radius Rounded), at a Landscape (16:9) height on desktop and Ultra tall (9:16) on mobile.
Slideshow size and frame
- Desktop height and Mobile height set the slide height. Fullscreen fills the screen; the other options set an aspect ratio.
- Extend section width to the edges of the screen makes the slideshow full width. Turn it off for a boxed slideshow.
Color scheme, Top padding, Bottom padding and Corner radius apply only when Extend section width to the edges of the screen is off. A full-width slideshow has no frame around the slides.
Automatic rotation
Turn on Enable autorotate in the section settings and set Interval from 3 to 10 seconds.
- After the last slide, the slideshow starts again from the first one.
- When a customer changes the slide by hand, the interval starts again.
Slides
- Image or Video sets the slide background. Hide media shows only the color scheme background.
- Media overlay darkens the media, so the text stays readable.
- Vertical alignment, Content width and Text alignment place the content in the slide.
- Custom mobile style turns on separate alignment and spacing settings for mobile.
Why is the slide text cut off?
The content is taller than the slide. The slide height comes from Desktop height and Mobile height, and content that does not fit is clipped. Choose a taller height (for example Fullscreen or Taller (2:3) on mobile), remove blocks, or turn on Custom mobile style and reduce Inner blocks spacing for mobile.
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, so you can use a portrait crop that suits Mobile height.
How do I make a whole slide clickable?
Select the slide and set Link under Slide link. Add a Link text that describes the destination: it is hidden on the storefront and read by screen readers and search engines.
All Horizontal slideshow 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: Fullscreen): Sets the slide height on desktop: Fullscreen fills the screen, the other options set an aspect ratio. Options: Fullscreen, Ultra-Wide (21:9), Wide (2:1), Landscape (16:9), Standard (3:2), Short (4:3).
Mobile height (dropdown, default: Fullscreen): Sets the slide height on mobile: Fullscreen fills the screen, the other options set an aspect ratio. Options: Fullscreen, Square (1:1), Tall (5:6), Taller (2:3), 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.
Horizontal slideshow section: Autorotate
Where to find it: Horizontal slideshow → Autorotate
Enable autorotate (checkbox, default: off): Moves to the next slide automatically. After the last slide, the slideshow starts again from the first one.
Interval (slider 3 to 10 s, default: 5 s): Sets the time each slide stays on screen, from 3 to 10 seconds. Shown only when Enable autorotate is on.
Horizontal slideshow section: Section design
Where to find it: Horizontal slideshow → Section design
The Horizontal slideshow section uses the standard Section design settings, listed in General section styling. In this section the group has only Extend section width to the edges of the screen, Color scheme, Top padding, Bottom padding and Corner radius.
Extend section width to the edges of the screen (checkbox, default: on): Stretches the slideshow to the full width of the browser window. When off, the slideshow sits inside the page container and uses Color scheme, Top padding, Bottom padding and Corner radius.
Color scheme (color scheme, default: Scheme 1): Sets the background color around the boxed slideshow. Shown only when Extend section width to the edges of the screen is off.
Top padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest. Shown only when Extend section width to the edges of the screen is off.
Bottom padding (dropdown, default: Default). Options: Default, None, Smaller, Larger, Largest. Shown only when Extend section width to the edges of the screen is off.
Corner radius (dropdown, default: None): Sets the corner rounding of the boxed slideshow. Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Extend section width to the edges of the screen is off.
These settings differ from the standard ones or exist only here:
Extend section width to the edges of the screen (checkbox, default: on): Stretches the slideshow to the full width of the browser window. When off, the slideshow sits inside the page container and uses Color scheme, Top padding, Bottom padding and Corner radius.
Corner radius (dropdown, default: None): Sets the corner rounding of the boxed slideshow. Options: None, Slighty rounded, Rounded, Fully rounded. Shown only when Extend section width to the edges of the screen is off.
Where to find it: Horizontal slideshow → 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: Horizontal slideshow → 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: Horizontal slideshow → 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: Horizontal slideshow → 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.
- Vertical slider section: slides that change while customers scroll down.
- Sliders navigation theme settings: the arrows and pagination of every slider.
- Heading block: the main text of a slide.
- Button block: the call to action of a slide.