--- title: Slideshow Section description: How to add a slideshow to your Homepage. --- [Skip to content](https://help.boostertheme.com/knowledge/slideshow-section#main-content) ![logo_white_booster-Sep-13-2022-06-54-02-62-PM.png\]](https://help.boostertheme.com/hs-fs/hubfs/logo_white_booster-Sep-13-2022-06-54-02-62-PM.png?height=36&name=logo_white_booster-Sep-13-2022-06-54-02-62-PM.png) - [Home - Help Center](https://help.boostertheme.com/knowledge) Open main navigation Close main navigation - [Home - Help Center](https://help.boostertheme.com/knowledge) - [Go to boostertheme.com](https://boostertheme.com/) [Go to boostertheme.com](https://boostertheme.com/?hsLang=en) Hello. How can we help you? - There are no suggestions because the search field is empty. 1. [Home - Help Center](https://help.boostertheme.com/knowledge?hsLang=en) 2. [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en) 3. [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections) # Slideshow Section ## How to add a slideshow to your Homepage. [![Booster Theme Homepage Slideshow](https://help.boostertheme.com/hs-fs/hubfs/Booster%20Theme%20Homepage%20Slideshow.jpg?width=688&height=403&name=Booster%20Theme%20Homepage%20Slideshow.jpg)](https://help.boostertheme.com/hubfs/Booster%20Theme%20Homepage%20Slideshow.jpg?hsLang=en) With the help of our Booster Theme, you get the convenience of setting up slideshows easily. We understand that the slideshows help to attract a customer's attention and make your Shopify store look more appealing. Read on to learn how to set up slideshows successfully in Booster Theme. #### In this article: 1. [Video tutorial](https://help.boostertheme.com/knowledge/slideshow-section#video-tutorial) 2. [Slideshows available in Booster Theme](https://help.boostertheme.com/knowledge/slideshow-section#Types-of-slideshows) 3. [Setting up your slideshow](https://help.boostertheme.com/knowledge/slideshow-section#setting-up-your-slideshow) 4. [Autoplay slides](https://help.boostertheme.com/knowledge/slideshow-section#autoplay-slides) 5. [Animations](https://help.boostertheme.com/knowledge/slideshow-section#slideshow-animations) 6. [Content animations available](https://help.boostertheme.com/knowledge/slideshow-section#slideshow-animations-available) 7. [Animating all elements at once](https://help.boostertheme.com/knowledge/slideshow-section#slideshow-animate-all-at-once) 8. [How to make the slideshow responsive](https://help.boostertheme.com/knowledge/slideshow-section#how-to-make-slideshow-responsive) --- #### **Let's get started!** Full-width images that include slideshows and images with text overlays make the store look appealing and add to the product's charm on the page. We provide you with a chance to grab attention by using slideshows. Build your brand's identity by using relevant images and setting them up for a slideshow.   #### Video Tutorial #### Slideshows available in Booster Theme 1.  **Adaptive Slideshow** Adapts to the width and height of the image. If you want your image to show entirely choose this option. 2.  **Responsive** **Slideshow** Allow you to select mobile and desktop images separately, this way you can optimize your page speed on your mobile version without putting aside your desktop UX. 3.  **Default** **Slideshow** Makes a standard slideshow, but you have the option to [**add a video as a slide**](https://help.boostertheme.com/knowledge/how-to-add-a-mp4-video-to-your-shopify-slideshow?hsLang=en). #### **Setting up your slideshow** To add a slideshow to your homepage, click on Add Section → Slideshow/Responsive Slideshow/Adaptive Slideshow → Add Image Slide. ![A screenshot of the steps on how to add a slideshow and an image slide.](https://help.boostertheme.com/hs-fs/hubfs/Add%20Image%20Slide.jpg?width=662&height=429&name=Add%20Image%20Slide.jpg) #### **Autoplay slides** With this setting, the slides will autoplay, the customer won't need to click on the arrow to change the slides, it will do it automatically. ![A screenshot of the autoplay slides option](https://help.boostertheme.com/hs-fs/hubfs/Autoplay%20slides.jpg?width=362&height=254&name=Autoplay%20slides.jpg)   #### **Animations ** We provide the convenience of setting up animations for your slideshows to make them look more attractive and enhance the visitor’s experience. You can animate the content, images, or any other elements which are used in the slideshow.   #### **Content animations available ** 1. Fade in 2. Slide and fade in 3. Slide from top 4. Slide from bottom 5. Slide from left 6. Slide from right 7. Grow 8. Rotate and grow 9. Shake #### **Animating all elements at once ** This section allows the animation of every element present in your slideshow. You can either choose to animate them separately or all together.   By checking on the option of animating all elements on your slideshow at once, you get the feasibility of altering all of them at once. By unchecking, each element will behave separately and will animate at different time slots. However, by animating separately, you may experience a slight delay in each animation.   ![A screenshot of the animate elements option](https://help.boostertheme.com/hs-fs/hubfs/Animate%20elements.jpg?width=331&height=449&name=Animate%20elements.jpg) #### How to make the slideshow responsive The default slideshow can sometimes not be optimal for your mobile and desktop at the same time. It's recommended to use a different aspect ratio to better fit content on mobile. The responsive slideshow and adaptive slideshow allow you to upload different images for your desktop and mobile. Note: If you want to always show the full height of the image, you can use the Adaptive Slideshow. This slider will adjust its height to the currently shown image. ![AdaptiveResponsive Slideshow](https://help.boostertheme.com/hs-fs/hubfs/AdaptiveResponsive%20Slideshow.jpg?width=567&height=403&name=AdaptiveResponsive%20Slideshow.jpg) Make sure to add a separate image for mobile with a different aspect ratio. ![Responsive Slideshow](https://help.boostertheme.com/hs-fs/hubfs/Responsive%20Slideshow.jpg?width=688&height=405&name=Responsive%20Slideshow.jpg)   *- End of article -* - [Get started](https://help.boostertheme.com/knowledge/get-started?hsLang=en#main-content) - [Installation Process](https://help.boostertheme.com/knowledge/get-started?hsLang=en#installation-process) - [Learning the basics](https://help.boostertheme.com/knowledge/get-started?hsLang=en#learning-the-basics) - [In-depth Tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#main-content) - [Sections](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#sections) - [Theme settings](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#theme-settings) - [Product Page](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#product-page) - [More tutorials](https://help.boostertheme.com/knowledge/in-depth-tutorials?hsLang=en#more-tutorials) - [More support](https://help.boostertheme.com/knowledge/more-support?hsLang=en#main-content) - [Partners app Ressource center](https://help.boostertheme.com/knowledge/more-support?hsLang=en#partners-app-ressource-center) - [Managing your subscription & theme](https://help.boostertheme.com/knowledge/more-support?hsLang=en#managing-your-subscription-theme) - [Change logs & Policies](https://help.boostertheme.com/knowledge/more-support?hsLang=en#change-logs-policies) - [Announcements and others](https://help.boostertheme.com/knowledge/more-support?hsLang=en#announcements-and-others) [![Chill listening crop-3](https://help.boostertheme.com/hs-fs/hubfs/Booster-black-logo.png?width=178&height=51&name=Booster-black-logo.png "Chill listening crop-3")](https://boostertheme.com/?hsLang=en) Copyright © 2026, Booster Theme - PreviewX Inc. ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "caption" : { "@type" : "MediaObject", "contentUrl" : "https://help.boostertheme.com/media-transcripts/185319276723/en.vtt", "inLanguage" : "en", "name" : "en Captions" }, "contentUrl" : "https://stream.mux.com/5LbG3V42qCKtTZXMlgpW2ud3PFwkoC7Sl5hVCggIDLo/capped-1080p.mp4", "dateModified" : "2026-08-14T04:25:23.990Z", "duration" : "PT1M45.267S", "height" : 1440, "name" : "Slideshows", "thumbnailUrl" : "https://api-na1.hubspot.com/filemanager/api/v3/files/thumbnail-redirect/185319276723?portalId=22632616&size=medium", "uploadDate" : "2025-01-24T10:45:40.695Z", "width" : 2560 } ``` ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Adding%20a%20slideshow%20to%20your%20homepage.mp4", "dateModified" : "2023-06-05T14:53:44.988Z", "duration" : "PT14S", "height" : 1080, "name" : "Adding a slideshow to your homepage", "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/118880951561?portalId=22632616&size=medium", "uploadDate" : "2023-06-05T14:53:35.951Z", "width" : 2016 } ``` ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Slideshow%20autoplay.mp4", "dateModified" : "2023-06-05T17:02:58.961Z", "duration" : "PT16S", "height" : 1080, "name" : "Slideshow autoplay", "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/118901049406?portalId=22632616&size=medium", "uploadDate" : "2023-06-05T17:02:50.815Z", "width" : 2190 } ``` ```json { "@context" : "https://schema.org", "@type" : "VideoObject", "contentUrl" : "https://22632616.fs1.hubspotusercontent-na1.net/hubfs/22632616/Slideshow%20content%20animation.mp4", "dateModified" : "2023-06-05T15:01:54.998Z", "duration" : "PT36S", "height" : 1080, "name" : "Slideshow content animation", "thumbnailUrl" : "https://api-na1.hubapi.com/filemanager/api/v3/files/thumbnail-redirect/118879091574?portalId=22632616&size=medium", "uploadDate" : "2023-06-05T15:01:47.040Z", "width" : 1594 } ```