While you might think that the slideshow Shopify theme section is limited to, well, slideshows, it’s a versatile section used for a variety of purposes in your store. 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.
What are slideshow sections?
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 is 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.
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 vary:
- 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 Parallax, full-width slideshows feature the parallax scrolling effect, 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. 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.
- In Flex, there are two forms of slideshows: Slideshow classic and slideshow with text. These provide options for how messaging and media are showcased together.
- In Superstore, full-width slideshows have controls for height, autoplay, and overlay color and opacity. Superstore also provides three options for button styles: Primary, Secondary, and Signpost.
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. Also, each of our themes is fully compatible with Shopify’s focal point control feature, so if cropping occurs, you can easily select a point in the image to prioritize so it is always visible.
Using the slideshow Shopify theme section
Here are some creative ways to use the slideshow Shopify theme section.
Hero images
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 close-ups 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 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. Slideshows can delay load times, especially when positioned above-the-fold on a page. This is especially notable when slideshows include several slides that each have to load individually. Consider using a slideshow lower on the page or limit slideshow to one or two slides each.
- 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 additional content is available to see.
- Generally, 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.
- Use other sections for videos and GIFS. Themes include dedicated video sections and these can replace slideshows above the fold. Videos and GIF images are not ideal for the slideshow since they require more load time and can negatively impact search engine ranking as a result.
