Slideshow
The Slideshow section displays a series of images and videos alongside customizable content (text and buttons with links) to showcase key messages or products.
Slides can transition automatically or allow users to navigate manually. This section is perfect for highlighting promotions, showcasing collections, or conveying brand messages in an engaging format.
(Video screenshot)
1, How to add section in theme editor:
In your theme editor (Customize), scroll to the bottom of the template and select Add Section.
In the list, locate and select Slideshow section. The section will now be added to your page, ready for customization.
(Screenshot)
2, Section settings:
The Section settings allow you to customize the layout, height, and transition options for the slideshow.
Layout: Choose from two layout options for the slideshow:
Displays only one slide on the screen at a time. Ideal for a minimal, focused look.
Shows a main slide in the center with a partial view of the next and previous slides on either side. This layout hints at additional content and encourages user interaction.
Pagination style: Controls how the slideshow navigation appears.
Displays slide numbers for navigation (e.g., 1 - 5).
Shows a series of dots representing each slide.
Displays navigation arrows to move between slides.
Desktop slide height: Set the height of the slide images on desktop screens. Options include: Small, Medium, Large, Full screen: Expands the slide to cover the entire desktop screen height, and Adapt to first media height: Height is based on the dimensions of the first slide media.
Autoplay: Configure slide rotation with the following settings:
+ Auto-rotate slides: Enable this option to make the slides rotate automatically. If unchecked, slides will transition manually.
+ Change slides every: Set the interval for automatic slide transitions, with a range from 3 to 9 seconds.
Mobile layout:
+ Mobile slide height: Set slide height on mobile devices, with options including: Adapt to first media: Matches the height of the first media slide. Small, Medium, Large, or Full screen for various height preferences.
+ Show pagination on mobile: If unchecked, pagination will be hidden on mobile. Users can still swipe to navigate between slides.
(Screenshot)
3, Block settings
The Slideshow section includes two types of blocks—Image slide and Video slide—each with unique settings for optimal display.
a. Image slide block:
(Screenshot)
Image: Select an image for the slide on desktop and mobile. If no mobile image is provided, the desktop image will be used by default.
Desktop content position: Set the position of content over the image on desktop. Options include: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right. The position is automatically optimized for mobile devices.
Desktop content width: Adjust the content width on desktop to Small, Medium, or Large. Content width is optimized automatically for mobile devices.
Highlight: Highlight specific keywords in the heading by: Color: Changing the color of highlighted text. Underline: Underlining selected phrases for emphasis.
b. Video slide block
(Screenshot)
Shopify-hosted video: Upload a video directly to your Shopify store, hosted within your account.Note: Use MP4 format, as it is the most universally supported format. If your video is over 20MB, consider uploading it to YouTube and embedding it via a link.
External video: Link to videos hosted on YouTube or Vimeo.
Note: If a video is uploaded in Shopify-hosted video, an external video link will not display.
Last updated
Was this helpful?