Slideshow Section

Guide to setting up the slideshow with options for both desktop and mobile images, customizing layout, and adding animations.

1. Steps to Access and Configure the Slideshow Section

Steps:

1. Access the Slideshow Section

   • In your Shopify admin, go to Online Store > Customize to open the theme editor.

   • In the left sidebar, locate Slideshow under Template.

   • If the Slideshow section isn’t present, click Add section and select Slideshow.

   • Click Slideshow to start configuring this section.

2. Configure Slideshow Layout

   • In the Layout field, choose between Full width or Grid to set how the slideshow displays across the screen.

   • For Slide height, select option Adapt to first image to automatically adjust the height according to the first image.

3. Pagination and Controls

   • Select the Pagination style (Dots, Counter, or Numbers) for navigating through slides.

   • Under Control style, choose either Default or Over slides to position navigation buttons as per your preference.

4. Adjust Slideshow Settings

   • Enable options such as Hide arrows, Hide Pagination, Hide autoplay button, and Hide controls on mobile as needed.

   • Toggle Auto-rotate slides and set the interval in seconds under Change slides every to enable auto-rotation.

5. Animations

   • For image animations, choose between None or Ambient movement under Image behavior for a subtle animated effect.

6. Mobile Layout Settings

   • Adjust mobile layout options by selecting Show content below images on mobile or Show separator line for better visual separation on smaller screens.

7. Save Changes

   • After making adjustments, click Save in the top-right corner to apply all changes to the slideshow section.

2. Adding and Configuring Individual Slides

Steps:

1. Adding Slides

   • Under Slides, click Add Slide to insert new images for the slideshow.

2. Desktop and Mobile Image Setup

   • Upload separate images for Image (desktop view) and Mobile image to optimize the slideshow display across different devices.

   • Set an Image URL if you want the slide to link to a specific page, product, or external URL.

3. Text and Button Configuration

   • Use Heading and Subheading fields to overlay text on each slide.

   • For buttons, add labels in First button label and Second button label fields and assign URLs. Toggle Use outline button style to enable an outlined button appearance.

4. Desktop and Mobile Content Positioning

   • Desktop Content Position: Select options for Desktop content position and Desktop content alignment to arrange text and buttons on desktop slides.

   • Image Overlay: Adjust the Image overlay opacity and Desktop color scheme for added color effects on desktop images.

   • Mobile Content Positioning: Set Mobile color scheme, Mobile content position, and Mobile content alignment for tailored mobile display.

5. Save Changes

   • After configuring the slideshow and individual slides, click Save in the top-right corner to apply all changes.