Slideshow

Steps to add Slideshow:

1. In your Shopify admin dashboard, go to Online Store > Themes.
2. Choose the theme you want to edit and click on the Customize button.
3. Click on the arrow down next to Home page↓and select a template you want your Slideshow section to add to. 
4. Click on + Add section which can be found in your left sidebar or directly in the live editor. 
5. Scroll down, or search for Slideshow, then click on Slideshow. 
6. Click and hold the drag-and-drop handles ⋮⋮  to re-order your sections.

Congrats! 👏 You just added your Slideshow section.

Slideshow

1. Layout - Choose between Vertical scroll (Desktop only) and Horizontal scroll. Vertical scroll (Desktop only) and Horizontal scroll.

• Vertical scrolling (Desktop only) allows you to scroll up and down. Please note that we recommend setting the Desktop image height to Hero mode (100% viewport height) for a correct slider display.
• Horizontal scroll will make the images change from right to left. If you hover over the slider, it will pause the automatic slide change unless you hover out the slider area.

2. Enable narrow width - If checked, an additional space will be added to the right and left of the slider.
3. Desktop image height - The height of the slideshow. Available options are Original, Hero mode, Large, Medium, and Small.
4. Pagination (dots) - The style of the slideshow navigation that appears below the images:
• Dots
• Counter
• None
5. Auto-rotate slides - Check this box to automatically rotate through the images in the slideshow. If this box isn't checked, then the slideshow displays a static image until the customer manually advances the slideshow.
6. Slide changes every - Use the bar to set the auto-rotate time of the slideshow. Minimum: 3 seconds, maximum: 9 seconds.
7. Slider animation - Select an animation for your image:

• Slide
• Fade

Accessibility

1. Slideshow description - Add a description for your slideshow for visually impaired customers.
2. Enable lazy loading - Enable a technique for waiting to load images until they are needed. If Slideshow is a first section on your website, this feature will be disabled.

Section padding

1. You can change both top and bottom section padding (the empty space above and below the section) and set it anywhere from 0px to 100px.
2. Read more about Custom CSS ↗.

Steps

1. Find the Slideshow section you added and customized following the steps above.
2. Click + Add Slide underneath.
3. Once you add a slide, click on it to see additional block customization options.
4. (Optional) Click and hold the drag-and-drop handles ⋮⋮   to re-order your blocks.

Slide controls

1. Image - Choose a static or dynamic image for your slideshow. Click Select Image to view your media library, or click the source button to connect a dynamic source. After an image has been selected, clicking the Change button allows you to remove, change, or delete the image. Follow the same steps for Mobile image (optional).
2. Image focal point -  You can set a focal point to ensure that a key part of an image won't get cropped. Choose Top, Middle, or Bottom Image focal point.
3. Image overlay opacity - Adds an overlay to the banner images. Use the slider to set the opacity of the overlay. Defaults to 0%.
4. Link - Make an entire image clickable by adding an url or choosing one of the options (Products, Page, Collection, etc.).

Content controls

1. Section max-width - Specify the maximum width for the content section that may contain the heading, description, button, etc.
2. Content position - Choose where, relative to the image, you want to display your content block. Available options include Top left, Middle Right, Bottom Left, etc.
3. Text alignment - Set the alignment of the image banner text for desktop computers. Choose between right, left, or center.
4. Color scheme - It controls the background color of your content block, the text color, etc. Click Change to pick a different color scheme. Remember that you can Edit the existing scheme or add a new one ↗ in Theme settings.
5. Enable Gradient - If marked, this will bring the text to the bottom and add a gradient to the image.

Text fields

1. Subheading - Optional subheading text for the image. Text is added to each image individually. Use the buttons to make the text bold or italicized, or to add a link. Alternatively, you can connect it to a dynamic source by clicking on Connect dynamic source.
2. Subheading size - Choose between a small or medium subheading.
3. Heading - Optional heading text for the image. Text is added to each image individually. Use the buttons to make the text bold or italicized, or to add a link. Alternatively, you can connect it to a dynamic source by clicking on Connect dynamic source.
4. Heading size - Choose between a small, medium, large, or extra large heading.
5. Collection - Select collection to display product count next to the Heading.
6. Description - Optionally use this field to put in a description. Alternatively, you can connect it to a dynamic source by clicking on Connect dynamic source.
7. Button label / Second button label - Enter text for a button, or leave blank to hide the button entirely.
8. Button link / Second button link - The URL that you want the button to link to. Click the source button to add a dynamic source as a URL.
9. Button style - Choose a style for your buttons.