The Slideshow is one of the first things customers see when landing on your website. If this section is used correctly, your customers will be hungry to navigate to your product pages and make a purchase.
Show powerful imagery that connects with your brand. Visitors will absorb what your store represents in very short space of time via the images they are exposed to - far faster than if they had to read through a block of text describing the same thing.
As well as being a great place to highlight current collections, offers and news, the slideshow’s automatic image transition gives a sense of urgency and behind-the-scenes activity. Your buyers will be encouraged by your storefront’s energy and dynamism and will be more motivated to act on their buying decision.
How to get started
To add your ‘Slideshow’ section, follow these steps:
- Online Store > Themes > Customise
- Scroll to the bottom of the left-hand panel and select “Add Section”
- Under “Image”, select “Slideshow”
Choose between “Slide or Fade”.
With “Slide”, your images will physically move horizontally from right to left, across the screen. “Fade” will blend one image in to the next, while the positioning of the image remains stationary.
“Fixed” sets the image to be certain width in pixels, whereas with “Full width”, the image will always try to take up the entire width of the screen.
The 3-8 sec adjustment bar selects the duration between one picture showing and the next.
The 16-60 px adjustment bar selects the size of the Heading text shown over the Slideshow images.
The 12-30 px adjustment bar selects the size of the Subheading text shown over the Slideshow images and below the Heading text.
The 12-30 px adjustment bar selects the size of the Button, shown over the Slideshow images and below the Heading text.
The button will only appear after text has been added to the Button text field.
Tick this to show little roundels underneath the Slideshow representing each of the active images.
Show slide arrows
Tick this to overlay arrows on the left and right of the Slideshow images to allow for manual skipping of pictures.
Slider arrow color
Alter the color of your slideshow arrows. Here’s an example of how it could look in red:
How do I upload images to my Slideshow?
This is where you add your Slideshow images, using content blocks. These blocks can easily be re-ordered by clicking and dragging into place.
Up to 12 image content blocks can be used per Slideshow Section. To upload an image to the Slideshow, click on one of the image blocks and it will expand, revealing a few different options.
You can change, edit and remove images for mobile and desktop independently.
This is for desktop. We recommend the dimensions 2000 x 900px
Mobile Image (Optional):
We recommend the dimensions 1400 x 1400px
You can also add a Heading, Subheading (This is just plain text, so can't include any bold or italic text) and Button text:
Adding a link in this field turns the entire slide in to a clickable link, so if you have a great Product or Collection featured in a Slideshow image, you can take customers directly to it when they choose to interact with that particular slide.
Here’s a screenshot of the options available and the areas they affect:
It is also possible to have any of these areas show as transparent as opposed to solid color. Simply click on the area you wish to adjust and a colour palette will appear. Then select the transparent box at the bottom left:
Caption horizontal alignment
From the drop-down options list, you can position your caption text in the following positions, Left, Centre, Right.
Caption vertical alignment
From the drop-down options list, you can position your caption text in the following positions, Top, Middle, Bottom.
Here’s a video example of the different placements and how they look on the storefront:
While we recommend all of your individual slides are the same size, these sizes can vary in size based on your individual needs. For reference, most of the demo sites use slides that are 2600 x 1000px. As these are quite large, we recommend optimising all images in Photoshop (or similar) prior to upload.
We have a wonderful help document which talks more about image sizing and aspect ratio so you can set up your Slideshow and storefront imagery like a pro!