Section by section: 12 ways to use the slideshow section in your Shopify theme

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.

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

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

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

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

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.