Slideshow

The Slideshow section provides a bold and visually striking layout by combining side-by-side blocks of images and video.

Each block can feature customized text, buttons, and media settings, perfect for showcasing hero images or highlighting multiple products and offers. With autoplay and comprehensive layout controls, this section creates an engaging user experience that balances aesthetics and functionality.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Slideshow section. The section will now be added to your page, ready for customization.

2, Section settings

The Section settings control the layout, appearance, and functionality of the entire section.

• General settings

  • Layout: Choose whether to display one or two or three blocks side by side in the section.

  • Desktop height: Adjust the height of images and videos on desktop: Adapt to first media height: Matches the height of the first block's media. Small, Medium, Large, Full screen: Predefined height options for uniformity.

  • Media overlay opacity: Add an overlay to media elements to improve text visibility and create a polished look.

• Autoplay settings:

  • Enable autoplay on desktop: When enabled, the section automatically cycles through the blocks (images or video). Each block’s media becomes the focal point, while its associated content is displayed prominently. Only the media (image or video) is visible for inactive blocks, with content hidden to minimize distractions.

  • Speed: Define the speed at which the progress bar moves and blocks transition: from 3 seconds to 9 seconds.

• Mobile layout:

  • Mobile height: Control the height of media on mobile screens. Options include: Adapt to first block height, Small, Medium, Large, Full screen.

3, Blocks settings:

Each block—Image or Video—has settings for layout, media, text, and buttons. While many settings overlap, the blocks have unique features to cater to their respective content types.

• Settings for all blocks

  • Text settings:

    • Heading: Create a primary heading for the logo block.

    • Heading size: Customize the size of the heading text.

    • Description: Add additional details below the heading.

    • Desktop content position: Adjust the placement of text and buttons within the block: Top left, Top center, Top right, Middle left, Middle center, Middle right, Bottom left, Bottom center, Bottom right.

  • Button settings: Enter the text for the button label. Assign a URL to the button for navigation. Select the visual style of the button: Solid, Outline or Text.

  • Mobile layout: Mobile content alignment: Align text on mobile.

• Unique settings:

Image block

Video block

Block is designed for static visuals such as promotional banners or product images. Image: Upload a high-resolution image for desktop use. Mobile image: Upload a separate image optimized for mobile. If no mobile image is uploaded, the desktop image will be used. Image link: Assign a clickable link to the image for direct navigation.

Block is designed for dynamic content such as product demonstrations, tutorials, or brand stories to draw more attention. Shopify-hosted video: Upload a video directly to Shopify for seamless playback. External video: Embed a video using a YouTube or Vimeo URL. Shopify-hosted videos override external videos if both are set. Video description: Enter a short text line to describe the video content. This description is also used by screen readers, helping visually impaired customers understand the video content.