0

Your Cart is Empty

by Michael P. Hill March 28, 2017

While you might think that the slideshow Shopify theme section is limited to, well, slideshows, it’s actually a versatile section that can be used for a variety of purposes on your store’s homepage.

New section: Slideshow section

At its core, the sideshow section lets you add two or more unique images that appear in sequence and these can each link to any Web address you’d like.

They are a great way to “tease” your shoppers with an intriguing image and bit of text and get them to engage more with your store and find out more information or explore your offerings.

  • The core of the slideshow section are large background images (usually horizontal) and each slide can have its own image.
  • You can optionally place text (heading and subheading) and buttons on each slide.
  • You can associate a link with the slide and users can click anywhere on the slide (as well as the button or text) to get to the linked page e.
  • You can also select how long each slide displays before it automatically advances to the next one.
  • Slideshows also have the option of using a fade animation effect or a more traditional side-to-side effect (though the slide effect is not available in Parallax).

Depending on which Out of the Sandbox Shopify theme you’re using, the exact look and options of the slideshow section varies:

(Will grab images from various demo stores)

  • In Retina, when a user hovers on a slide, left and right navigation arrows appear to allow users to navigate from slide to slide. To assist with navigating slides, there are also long, semitransparent wide rectangles at the bottom of the slide that indicate the number of slides in the section. Users can also click one of these rectangles to “jump” to that slide. Also note that the box becomes darker when its corresponding slide is active.

Retina Shopify theme slideshow

  • In Responsive, you can set a slideshow to either full width or standard width. Responsive features circular left and right arrow buttons with coordinating circular navigation icons in the bottom center of the slides, with the active one becoming solid, as opposed to the open, ring style of inactive ones.

Responsive Shopify theme slideshow

  • In Mobilia, slideshows can also be full width or standard width. The slideshow’s navigation in this theme features square arrow icons and circular slide indicator and navigation links in the lower right of the slides. You can also select from a variety of text animation styles.

Mobilia Shopify theme slideshow

  • In Parallax, full width slideshows take on the parallax scrolling effect along with circular arrow icons and slide navigation. Although you can’t select a slider effect (by default it is a cross-fade between slides), this theme does allow you to set the height of the slideshow, which applies to larger screen views.

Parallax Shopify theme slideshow

  • In Turbo, slideshows are full width and, when the user hovers on the slide, a narrow, semi-transparent bar appears on the left and right side of the slideshow that houses the arrow navigation. For simplicity, Turbo forgoes the use of slide navigation icons in the lower portion of the slides.

Turbo Shopify theme slideshow

When selecting images for your slideshows, keep in mind how the images will look on mobile devices. We have a great list of tips on selecting imagery for your slides.

Using the slideshow Shopify theme section

Here are some creative ways to use the slideshow Shopify theme section:

  • Heroes: In Web designer parlance, “hero” elements are the large focal points of your homepage. Slideshows make great hero images at the top of your homepage and, since no matter how many slides you have, the unit still occupies the same amount of space, it’s also an efficient use of page space.
  • Promotions: In addition to featured promotions, slideshows can also be used to promote specials, sales or discounts. To make the promotions stand out, consider using bold, bright colored backgrounds or patterns along with compelling text and a call to action button.
  • Galleries: The slideshow section is also a great way to create interactive galleries on your homepage. For best results, consider leaving the text fields blank so the image appears uncluttered. Keep in mind you can still use a link so users can click anywhere on the slide to view the linked page.
  • About Us Content: Use a slideshow to showcase more about your products and company. This is a great way to save some space on your homepage. You can also use the buttons to link to more detailed information related to each slide’s content.
  • Blog Post Showcase: Showcase different blogs or your top posts in a big way. Although you can’t automatically populate the blog posts, it’s still relatively easy to manually set up a slide for each blog or article you want to feature.
  • How It Works: For “how it works” or “step by step” type content, slideshows can be an especially effective way to include this information on your homepage. Its linear, side by side format is ideal for sequential content like this.
  • In the News: Showcase press mentions with a slide for each article and link users to the post on the publication’s site.
  • Dividers: If you’re looking for ways to break up homepage sections, especially text heavy areas, consider using a slideshow without text. This is a great opportunity to showcase product photography of eye-catching closeups or lifestyle shots to help your site’s look and feel match your brand.
  • Featured products: Although you can’t automatically “feed in” products from a collection, slideshows can be used to feature individual products (or collections). You’ll also need to link to product pages to allow users to add items to the cart, but slideshows can be a great way to engage users with eye-catching photography.
  • Seasonal: Slideshows are a great way to spotlight seasonal stock or custom photography. Combine this with holiday promotions, sales or featured collections and link your slides to them.
  • Tell a story: Use the sequential effect of the slides to create a mini story or 3-frame ‘film’, one that reinforces your brand image or shows your product in a use case scenario; use a bit of text on each slide to pique the shopper’s curiosity so they follow along
  • Display fun facts or inspirational quotes: Cite some stats related to your product/industry (“Did you know…?”) or use the text on the slides to display a famous or relevant quote; couple these with a dimmed-out or solid color image to help the text stand out

Avoiding overload

When using a slideshow section, there’s no limit to the number of slides you can have in each section, but it’s a good idea to show some restraint:

  • Since slideshows focus on large imagery, adding a large number of slides can significantly increase your page loading times.
  • Keep in mind that, especially on the homepage, visitors may only view your slideshow for a few seconds before moving on — so there’s no guarantee that subsequent slides will be seen.
  • The built in automatic animation feature of slideshows can help draw attention to the slideshow and the fact that there is additional content available to see.
  • As a general rule of thumb, two to three slides per section is a good guideline, with six to 10 in total on a single page. If you’re using Turbo, you’ll have more flexibility since the theme’s “lazy loading” feature will, in most cases, keep images from bogging down a user’s experience.
Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Support Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

A big change to the Shopify admin is coming — what it is and how it will benefit you
A big change to the Shopify admin is coming — what it is and how it will benefit you

by Michael P. Hill April 27, 2017 0 Comments

A whole new look is coming to the Shopify admin — and it’s all part of an effort by Shopify announced at Unite 2017 to provide a “guiding star” to make using the platform easier than ever for merchants. What is this new system and how will it make it easier to run your Shopify store?
Read More
Out of the Sandbox and into the Sun: Shopify Unite 2017
Out of the Sandbox and into the Sun: Shopify Unite 2017

by Sharon Austin April 25, 2017 0 Comments

This year, four members of the Out of the Sandbox Shopify theme team had the privilege of attending the Shopify Unite conference in San Francisco. We’ve since returned with new insights, ideas and lots of enthusiasm for the growth we see coming —both on the Shopify platform and for ecommerce in general.

Read More
This is big: Our Shopify theme updater app just got a must-have feature
This is big: Our Shopify theme updater app just got a must-have feature

by Michael P. Hill April 19, 2017 0 Comments

Updating Shopify themes has long been one of the most frustrating parts of running a Shopify store — and Out of the Sandbox took a giant step in making this easier with our free Shopify theme updater app. But guess what? We’ve taken this another step farther.
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …