What is the slideshow section?
Advertise key products or services by using a slideshow. Set the slides to auto rotate or display a single image until the customer manually advances the slideshow. Add text, buttons or create urgency with a countdown timer. Use the style and layout settings to create visual continuity between sections.
How to set up the slideshow section
Steps
- Open the Theme Editor and add the Slideshow section to the page.
-
In the main Image 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.
The Show text below image on mobile can be selected where there isn't enough space to show the text over the image on a smaller screen.
- In the Animation settings, choose the preferred Slide transition method and choose whether to Show pause button.
- Select the Navigation design - pills, arrows, dots or lines.
- Use the Image Styles and Text Overlay settings to select a color scheme and ensure content is legible. There are slideshow Image tint color settings and slide specific overrides within the settings for each slide.
- Adjust the Style and Layout settings to control the section background and spacing.
- Click Add Slide or use one of the two Slideshow blocks that are present upon install.
- Within each Slide block, add an Image, Mobile image, Text overlay, or a Countdown timer. Use Buttons and links for navigation or add an optional Image link.
Tip
How to use a section background
The Style and Layout settings determine whether the slideshow spans the full width available or is presented on a Section background. A section background can be used to create a smooth flow from one section to the next using gradients or colors. If the Full width setting is enabled, the slideshow expands to cover the entire screen width and the section background is not visible. If the Full width setting is disabled, space appears around the image, revealing the section background.
Steps
- In the main Slideshow settings, navigate to the Style settings and turn the Full width setting off.
- Choose one of the five Section background options to show around the banner image:
Default: Uses Beautify's default color scheme selected in Theme settings > Colors > Schemes.
Color: Select a custom Background color
Image: Upload a Background image
Simple gradient: Set the gradient start and end colors, plus the gradient style
Advanced gradient: Customize the gradient further using the COLOR STOP settings - In the Layout settings, there are three Boundary above section options that control the spacing above the image banner. This can help to create smoother transitions between sections.
Default - Will leave the standard spacing at the top of the section
Tight - Will leave a smaller space between sections
Join - Adjacent sections will touch each other
Tip
Accessibility
The Show pause button in the main slideshow settings will show a button which allows users to stop the slideshow from auto-rotating.
Add an Alt text to images by clicking on the Edit image icon.
A Slideshow description can also be added in the Accessibility/SEO settings. This is hidden text that may be read out by screen readers to describe the content of the slideshow.
How to improve speed scores
In order to maximize the speed scores in Enterprise, 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.
FAQs
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 illustrated below:
Use the Image height settings to select the most appropriate option for your content. Using a layout with a section background will also crop the slideshow image.
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'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