Homepage Slideshow and Main Image

The Homepage Slideshow feature lets you add a slideshow to your homepage to promote fresh content at any time. You can upload slide images from your own computer, then select the transition style and speed to your liking. Best of all, the slider exists separately from your template code, so it will always stay in the same spot, even if you switch to a new template.

 

Where Will My Slideshow Appear?

The slideshow displays above all other content on your store's homepage. You can use a single slide as a static hero image, if you choose not to display a slideshow. Any content you add to Article 2 will display below the slideshow or main image.

Slideshows are available for all hosting plans and work with all templates, including free, premium, responsive, and non-responsive. You can use the slideshow to promote seasonal or temporary sales, contests, new product offerings, and much more.

Getting Started

To enable the slideshow, go to Design > Homepage Slideshow in your Admin Area and set the switch to On. The slideshow is enabled for all new stores by default.

Your template may come with one or more demo slides. Since these are meant as examples and aren't specific to your store's offerings, you'll want to click Clear sample slides before adding your own images. You can restore these examples at any time by deleting your existing images and then clicking Restore sample slides.

Slide Images

To upload a new slide:

  1. Drag an image file from your computer into the slide drop zone, or click Upload within the drop zone and browse for the image on your computer. Image files must be .PNG, .GIF, or .JPG format, and should be no more than 2mb in file size. For dimensions, we recommend 960 pixels wide by 540 pixels high.
  2. Once you see your slide image on the page, hover over it to click the Settings (gear) icon.
  3. Add a few descriptive words to the Alt text field for SEO purposes. If your slide promotes a holiday sale for 50% off, for example, you might use the words "holiday sale 50."
  4. In the Link to field, you have the option to add a URL from your store that you'd like the slide to link to. A slide promoting a specific product or promotion, for example, can be linked to the corresponding product or category page.
  5. Repeat the process for each new slide you want to add to your slideshow, then click Save.

If you need to change the order in which your slides appear, you can click on a slide and hold down to drag it to a new position, then release it once it's in your preferred location.

To delete a slide completely, hover over the slide image and click the Delete slide (trash can) icon.

Note that your slide images will be scaled when they load on the storefront. Uploading images that are too small may cause pixelation and make text harder to read.

Slide Display

There are a number of default settings you can adjust to customize how shoppers view your slideshow.

Layout

The Layout determines the location of navigational buttons on your slideshow. These clickable buttons allow your shoppers to navigate to the next or previous slide as they choose.

The default layout is Bullets, which displays circles at the bottom of the slideshow to indicate progression through the slides. Shoppers can tell which slide they're viewing by noting the circle that's currently highlighted, and can manually choose the slide they want to view by clicking on one of the bullets.

You can choose from the following layouts:

Bullets

Clickable circles at the bottom of the slideshow indicate progression through the slides.

Numbered Bullets

Clickable numbered circles at the bottom of the slideshow indicate progression through the slides.

Arrows

Clickable arrows on the left and right sides of the slides allow for forward and backward navigation.

Images Only

No navigation displays, disabling the ability for shoppers to control the order in which they view slides. Note that Autoplay is always enabled when using this layout.

 

Speed and Autoplay

By default, the slides are set to Autoplay and will transition every three seconds. You can change the time each slide displays by using the up and down arrows or typing a number of seconds into the field.

We highly recommend a value of less than 10 seconds, as most shoppers won't stay on your storefront longer than that unless they see movement. A good rule of thumb is to adjust the time based on the amount of content your slides contain. View the slideshow on your storefront as a shopper would, and make sure you're able to read the important details before each slide transitions.

You can turn off Autoplay by clearing the check box. When Autoplay is disabled, shoppers will need to click or tap the slides manually to see the next one.

Note that Autoplay cannot be disabled when you use Images Only for your layout, as shoppers won't have any indication that the first image is part of a slideshow.

Transitions

By default, your slideshow uses the Fade & Slide transition style. The current slide will fade and slide to the left to reveal the next slide in the sequence. You can choose from the following transition styles:

Fade & Slide

The default transition style. The current image fades and slides to the left to reveal the next image in the sequence.

Slide

The current image slides to the left to reveal the next image in the sequence.

Fade

The current image fades away to reveal the next image in the sequence.

Slide Up

The current image slides upward to reveal the next image in the sequence.

Zoom In

The current image zooms out (becomes smaller) as the next image in the sequence zooms in (becomes larger).

You can see a preview of how your slides will transition directly below the Transitions dropdown. 

Single Main Image

If you don’t want to create a slideshow at all, but you still want to have a static (non-moving) main homepage image in the slideshow area, you can do so by uploading a single slide.

Note that the Display settings for slideshows are disabled when using a single image.

Additional Homepage Content

If you need to add additional text, links, or smaller images below your slideshow or main image, there is a dedicated article in the software for such content (Article 2).

To access this article in your Admin Area, go to Design > Homepage Slideshow and click Add/edit content below Homepage Slideshow at the bottom. You can also access Article 2 from Design > Site Content by clicking View List and performing a search with "2" in the ID field.

You can edit the Body of Article 2 to add extra content, or use it as a divider between your slideshow and Featured Products. To learn more about editing images and text within articles, see How to Use the Easy Editor.

Creating Slides

Whether you need a showstopping main image or several slides for promotions, our expert Design team can create custom designed slides that look professional and give your shoppers a great first impression.

Other Resources

Many designers use professional programs such as PhotoShop to create high quality slide images. If you don't have PhotoShop, websites like Pixlr offer photo editing tools to add text and effects. When creating an image, be sure to modify the 1024 x 768 default dimensions to 960 (width) by 540 (height).

You can also view a slide template with the recommended dimensions here and save it to your computer to modify.

If you're unsure of what to feature on your slides, be sure to read our Ecommerce Authority blog post for tips on optimizing your homepage slideshow.

Watch the Design video series