What is the slideshow section?
This section displays up to twelve images in a slideshow format. It is ideal for promoting key products or services, by using a combination of images text and buttons. It can either be set to automatically rotate or have a static image displayed until the customer manually advances the slideshow.
How to set up the slideshow section
Steps
- Open the Theme Editor and add the Slideshow section to the page.
- Click Add Slide or use one of the Slideshow blocks that are present upon install.
- In the main settings, there are two slide height settings available.
Adapt to first image: All images will be the same height as the first image.
Fixed height: The slider can be used to select a specific px height for both desktop and mobile.
- The Show text below image on mobile can be selected to differentiate the viewing experience for mobile users.
- There are three Overlay style options to choose from. Once this is selected for the section, additional settings can be customised in each slide block.
- Adjust the Transition and decide whether to Auto-rotate slides.
- If Full image or Text box Overlay style is selected in the section settings, the Overlay color can be chosen, and the Overlay opacity adjusted using the slider in each slide block. These settings are not applicable if No background is selected.
- A Text color can be selected in each block. This will change the color of the Subheading, Heading and Text fields.
- To change the button colors, go to Theme settings > Buttons > Over image button text and Over image button background. Note that any changes made to these settings will apply throughout the store.
- There are nine different Text alignment options available to adjust the text position.
Tip
FAQs
How does the Slideshow section differ from the Banner section?
The Slideshow section can be positioned in any location on any page. The Banner section is a fixed section that can only be positioned at the top of the homepage. The banner section contains a slideshow but also includes the additional option of Companion content. This companion content can be an image and text shown to the right of the slideshow on desktop and beneath the slideshow on mobile.
My slideshow image contains text, how do I ensure it is not cropped?
We recommend using the text overlay settings for slideshow text to ensure it is always easy to read on different screen sizes, but we recognise on some occasions text may be part of the image. To ensure the full image is shown, set the Slide height to be Adapt to first image and ensure all the images are the same size. Slide headings, subheadings, buttons and text can be removed for each slide in the slideshow block settings. Do not select Show text below image on mobile as space will be reserved for text.
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 chance to avoid this is to set the Slide height to the Adapt to first image, and then make all images within the slideshow the same dimension.
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.
Can I use this section with a sidebar?
Yes, if a sidebar is used then the section is reduced in width on larger screens. The sidebar is available on the homepage, blog page and blog post page.
Can't find what you're looking for?
Our support staff are here to answer your queries, so don't hesitate to write to us!
Contact us