Slideshow

The Slideshow is one of the first things customers see when landing on your website and offers a dynamic and attention-holding display - used correctly to display standout products and deals, your customers may be enticed into immediate conversions.

Adding a Slideshow Section

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

  1. Admin

  2. Online Store → Themes → Customise

  3. Sections

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

  5. Under “Image”, select “Slideshow”

Settings

The Slideshow offers a wide range of options to create a visually eye catching display of your brands products or message.

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.

Set width Size

“Fixed” sets the image to be certain width in pixels.

“Full width”, the image will always try to take up the entire width of the screen.

Set full-screen Slider images

Sets the images to be full-screen, and resized to fit the screen.

Rotation interval

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

Heading size

The 16-60 pixel adjustment bar selects the size of the Heading text shown over the Slideshow images.

Subheading size

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

Slideshow 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.

Slider navigation color

You can change the color of your slider arrows/dots using the below Color editor.

Click to open the color editor.

Enable Overlay

This option adds a colour overlay to your Slideshow, specifically to make the present text easier to read:

Adding Content to the Slideshow

Using content blocks, you can control what is contained on each slider. Content is separated into blocks so they can be easily re-ordered by clicking and dragging into place.

You can change, edit and remove images for mobile and desktop independently.

Tip

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.

Image

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 into 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:

Tip

It is also possible to have any of these areas show as transparent as opposed to a 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:

Tip

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.