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 using a combination of 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
Steps
- Open the Theme Editor and add the Slideshow section to the page.
- Click Add Slide or use one of the three Slideshow blocks that are present upon install.
- In the main Layout settings, there are three Image height settings available
Height of 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.
Full screen height: The image will take up the full height of the screen, excluding the space occupied by the header.
- Also in the Layout settings the Show text below image on mobile can be selected to differentiate the viewing experience for mobile users.
- Configure the Slideshow appearance settings to manage the pagination style and slide transitions.
- Set the Style for the image overlay.
Tip
Accessibility
In the Accessibility / SEO settings, there are several options available.
The Show pause button will show a button which allows users to stop the slideshow from auto-rotating.
The Slideshow description can also be added, which is hidden text that will be read out by screen readers and will describe the content of the slides.
How to improve speed scores
In order to maximize the speed scores in Canopy, the section can be loaded without animations. To do this, in the Accessibility/SEO settings, tick the Load the section without animation setting.
In addition, having a separate Mobile image as each slide image could also improve the page loading speed. Refer to our Performance guide for more.
FAQs
Why is my image being cropped?
The best way to avoid this is to set the Image height to the Height of first image, and then make all images within the slideshow the same dimensions. Select Show text below image on mobile or choose a different mobile image.
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.
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 illustrated below:
I'm using a version of Canopy before 6.0.0. How can I set up image tints on the Slideshow section?
Adding a tint to your images can improve the legibility of any text that is displayed on top of the image, especially when the image has colors that are similar to the text. Image tints are available in most sections that contain images.
For example, in the Slideshow section, you can select from six options:
-
None – no image tint.
-
Standard – covers the entire image.
-
Vignette – A darker blur at the periphery of your image. It can be an intentional effect to highlight the center of the image.
-
Text Shadow — includes the tint only behind the text. Useful to enhance your text if your background is light in color.
-
Bottom — covers only the bottom part of the image.
-
Top — covers only the top part of the image.
Tip
How to set up image tints
Steps
- From the Admin, go to Online store > Themes > Customize and select Theme settings > Colors > Image tints, and set the value for your Text and Background color.
- Choose your Opacity. This determines the strength of the image tint.
- Press save.
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