“How do I configure a slideshow?”

You can add a slideshow section to your homepage. Each slide has its own text layout and call to action button.

We recommend checking out the slideshow on our Chic theme demo, interacting with it, and clicking on its call to action buttons.

This section looks especially great as the top-most section on your home page with the transparent header enabled.

Slideshow on mobile device

Slideshow on mobile device

While customizing your home page, this feature is available by using the Add section button.

Note that the Aspect ratio affects the entire slideshow. We recommend that you make sure that all of your slideshow images are the same dimensions.

Aspect ratio
Choose the aspect ratio for the full width image: Full height, 3:2 or Unconstrained.

The Full-height setting forces the slideshow to take up the entire height of the customer’s screen.

Using 3:2 may crop your image, while Unconstrained displays the full image, no matter what shape it is. See an example

Once you have created the slideshow section, use the Add slide button to add new slides. The following settings affect the content of the current slide:

Image
Add an image.

Landscape orientation (3:2 aspect ratio) is recommended.

We also recommend images 1440 pixels by 960 pixels at a minimum.

Heading
Add heading text. We recommend keeping this to a few words.
Subheading text
Add a subheading or description. We recommend keeping this to a line or two.
Link
Paste a URL or add a link to a page in your store.
Link text
Add text that should be used for your link.
Link style
You can change the link style to Button or Link with arrow.

Style

Each slide can have its own overlay color, text, text style, and call to action link style. For example, notice how different the following slide looks compared to the images at the top of this article:

Slideshow on mobile device

This slide uses top-right text alignment and the link arrow link style.

Overlay opacity
You can add a colored overlay to your full width image. And, you can set how visible the overlay is. 0% is completely transparent, and 100% is completely visible.
Overlay color
You can change the color of the overlay.

We recommend using black or white, as these colors will look great with a wide variety of images.

Text color
You can change the text color for text overlaying the full width image.
Max width of heading
You can adjust the with available to the heading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Max width of text
You can adjust the width available to the subheading text.

We recommend adjusting this and checking the live preview to get it just right for your image.

Horizontal text position
You can change the horizontal text position to Left, Center or Right.

We recommend adjusting this and checking the live preview to get it just right for your image.

Vertical text position
You can change the vertical text position to Top, Middle or Bottom.

We recommend adjusting this and checking the live preview to get it just right for your image.

Aspect ratio

The Aspect ratio setting allows you to change the potential shape of the slideshow section.

Full-height

The Full-height setting forces the slideshow to take up the entire height of the customer’s screen. This is great if you’re using the slideshow as your first home page section.

We recommend that you test your slideshow on desktop and mobile devices – and that you ensure all of your slideshow images are the same size or aspect ratio.

3:2

Use 3:2 if your images are a 3:2, landscape-oriented images – or close to it. You can also use 3:2 if you don’t mind your images being cropped (from the center) to be 3:2 images.

Unconstrained

Use Unconstrained to display the full images, no matter what shape they are They will still be displayed at full width, so be careful with very tall images.

Here’s an example of what an Unconstrained slideshow image looks like, with lines representing the 3:2 crop within:

Aspect ratio comparison