What is the slideshow section?
This section displays up to five 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.
The Alchemy theme offers a variety of text overlay designs, the option of a top boundary effect to liven up your store and even a split screen slideshow with two slides on desktop.
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 two Slideshow blocks that are present upon install.
- In the main Layout settings, there are three 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 px height.
Full screen height: The image will take up the full height of the screen, excluding the space occupied by the header.
- Choose whether to Make section full width. A slideshow that is not full width will fit the Maximum page width set in Theme settings > Design.
- The Show text below image on mobile can be selected to differentiate the viewing experience for mobile users.
- Also in the Layout settings, the Enable split screen setting can be selected. This will show two slides next to each other on desktop.
- In the Slideshow Navigation settings, set the Pagination style, Position, Slide transition and speed. When set to Auto-rotate a pause button will be shown. The pagination dot style can be either a line or a circle and is set in Theme Settings > Carousels and slideshows.
- Adjust the Text overlay and Style settings to suit the content and images.
Tip
How to use the Text overlay
When Text is added to a slide block, it will appear as a Text overlay. The Alchemy theme includes settings to allow this overlay to appear on a coloured background, no background and with or without a border. The overlay can also be slightly transparent and with or without an image blur under the text. Use the settings to find the perfect solution for your store.
Steps
- In the main Slideshow settings, navigate to the Text overlays setting.
- Use the settings to adjust the Border width, Border color and Corner radius.
- Use the Color scheme settings in Slideshow > Style to set a color scheme for the text overlay. Set the Color scheme to None to have no background on the text overlay.
- Set the Text background opacity. If the opacity is less than 100% then the image or video will be partially visible and blurred. To remove or adjust the strength of the blur, go to Theme Settings > Design > Text overlay background blur.
Tip
Accessibility
In the Accessibility settings, a Slideshow description can also be added. This is hidden text that will be read out by screen readers and will describe the content of the slides.
FAQs
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 Image height to be Adapt to first image and ensure all the images are the same size. Note - slideshow pagination will be displayed on top of the images.
Slide headings, subheadings, buttons and text can be removed for each slide in the slideshow block settings. Set the Slideshow > Style > Color scheme for text overlays to be None. Do not select Show text below image on mobile.
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 Image 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'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