What is the slideshow section?
This section displays up to eight images in a slideshow format. It can be useful in advertising key products or services by combining images, text and buttons. It can be set to either auto-rotate or to display a static image until the customer manually advances the slideshow.
How to set up the slideshow section
- Open the Theme Editor and add the Slideshow section to the page.
- Click Add Slide and enter your content, or use one of the two Slideshow blocks present upon installation.
- In the main Slideshow settings, there are three Slide height settings available.
Adapt to first image: All images will be the same height as the first image.
Full screen: The image will take up the full height of the screen, excluding the space occupied by the header.
Fixed height: The slider can be used to select a specific px height.
- Also in the main Slideshow settings the Show text below image on mobile can be selected to differentiate the viewing experience for mobile users.
- Choose between five Overlay styles – No background, Tint, Box, Text shadow, Text shadow and tint. These styles will help your Overlay content stand out from the background image.
- Choose your slideshow navigation Transition from a series of effects. Pick your desired Slide navigation style (arrows or dots).
- Finally, choose the time period you'd like the slides to change. Change slides from 1-20 seconds.
Why is my image being cropped?
By it's nature, a slideshow contains several different images, all of which are shown in the same sized space. You may find that you can set up your slideshow such that the first image displays perfectly, but if subsequent images have different dimensions - parts of the images will be cropped.
This is best illustrated below:
The best way to avoid this is to set the Slide height to Adapt to first image, and then make all images within the slideshow the same dimension. This will ensure that the entire image is shown for all slides.
To read more about aspect ratios, refer to the Shopify Understanding image aspect ratio guide.
Focal points may also affect image cropping. Focal points allow you to choose the part of the image which should remain in view, no matter what the screen size. This means that parts of the image may be cropped to ensure that the focal point remains visible. Read Shopify's Focal points guide for more on this.