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.

Adding a Slideshow section

To add your ‘Slideshow’ section, follow these steps:

  1. Admin

  2. Online Store → Themes → Customize

  3. Sections

  4. Scroll to the bottom of the left-hand panel and select “Add Section”

  5. Under “Image”, select “Slideshow”


Transition effect

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, with “Full width” the image will always try to take up the entire width of the screen and 'Full Screen' will make the images all full screen-covering, also making the slides (and images) will be the same size.

Rotation interval

The 3-8 sec adjustment bar selects the duration between one picture showing and the next.

Heading size

The 12-50 px adjustment bar selects the size of the Heading text shown over the Slideshow images:

Subheading size

The 12-50 px adjustment bar selects the size of the Subheading text shown over the Slideshow images and below the Heading text:

Button size

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 when adding an image.

Show slide dots

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.

Uploading images to the 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.


You can add both a main image for the Desktop View and a 'Mobile images' that will be substituted in place when the page is loaded in Mobile View, for every Slide within the Slideshow.


This allows you more control over how your chosen images appear - if you are using a Landscape image with content on the horizontal edges, this will be cropped off when the Portrait Mobile view is loaded instead, creating an awkward and less professional look.

Using a Square or Portrait Mobile Image allows you to keep your Landscape image looking perfect on the Desktop view, without compromising it for any Mobile customers!

For desktop, we recommend the Landscape dimensions of 2000 x 900px, while for Mobile we recommend images that are Squared at 1400 x 1400 px:

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:

Caption horizontal alignment

From the drop-down options list, you can position your caption text in the following positions, Left, Centre, Right:

Caption text alignment

From the drop-down options list, you can position your caption text in the following positions, Left, Centre, Right.


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.

Further reading

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!