What are the slideshow and hero slideshow sections?
These sections both display up to ten images in a slideshow format which can be used to advertise key products or services using a combination of images, text and buttons. The slideshows can auto rotate or be set to display a static image until the customer manually advances the slideshow.
The Slideshow section can be added as a section in any position on any page while the Hero slideshow is a single edge to edge section that can only be shown at the top of the homepage under the navigation.
Both slideshow types can include up to two product labels on each slide which link the customer directly to products that are featured in the slideshow. For more information about adding product labels, refer to the product label links article.
The slideshows also include styling and color options for overlays and settings to highlight or stencil heading text.
How to set up the slideshow section
Steps
- Open the Theme Editor and add the Slideshow section to the page.
- There are two Image 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 pixel height on desktop and mobile.
- The Show overlay below image on mobile can be selected to differentiate the viewing experience for mobile users.
- Set the slideshow Transition and whether it should auto rotate.
- Click Add Slide or use one of the two Slideshow blocks that are present upon install. Configure each individual slide, add the image, overlay text and product label links if required. There are numerous settings to style the overlay.
Tip
How to style the slideshow overlay text
The slideshow overlay includes additional settings to customize the heading text and make it more playful and engaging. Use a moving highlight or stencil some text to draw attention to key words and phrases.
Steps
- Click on a Slide in a slideshow section to customize the overlay text.
- Choose the colors, Text alignment, Vertical position and Horizontal position for the overlay.
- Enter the Heading text and Heading width, then set the Word style to be Stencil or Highlight.
- Enter some or all of the words used in the Heading in the Words to style field taking care to match the case and spacing.
For the Highlight option additional settings control the Highlight vertical position and colors. The highlight will appear from the left when animations are enabled.
For the Stencil option the stencilled word will appear from below. - Add additional Text and buttons as required.
Tip
How to set up the hero slideshow section
The hero slideshow section is an edge to edge section that is shown under the header on the homepage. If it is not required then it can be switched off with a simple setting - Show hero slideshow.
Steps
- Open the Theme Editor and navigate to the homepage.
- Click on Hero slideshow and select Show hero slideshow.
- Setup the Hero slideshow following the how to set up the slideshow section steps.
FAQs
Why is my image being cropped?
By its 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:
The best chance to avoid this is to set the Image height to the Adapt to first image, and then make all images within the slideshow the same dimensions.
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'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