Adding an Image Slider in BigCommerce using Shogun

Image sliders offer one of the most efficient ways to provide visual information to your customers, helping you build trust, reduce your bounce rate, and generate more sales.

Below, we’ll go over absolutely everything you need to know in order to add a BigCommerce image slider using Shogun.

The Benefits of Adding an Image Slider to Your BigCommerce Store

Before we get into how to add and customize image sliders on BigCommerce, let’s review why you should consider doing so in the first place.

Images are one of the most important elements of any ecommerce site. Without them, you may not be able to make any sales at all. 

According to a 2018 survey conducted by Salsify, only 2% of online shoppers are willing to buy a product without seeing any images of it first. Another 25% will make a purchase as long as they’re able to see one or two images. The vast majority of online shoppers — 73%, to be exact — need to see at least three product images before they feel comfortable clicking on the buy button. 

To explain this preference, we can look to the results of another survey — when asked what they dislike about online shopping, the most common response people gave was “I am not able to see products in-person”. 

When shopping in-person, customers can take as long and close a look as they want at a product before committing to making a purchase. That’s just not possible when shopping online. 

You can do the next best thing, though, by providing plenty of immersive product images. This will allow the customer to view your products from multiple angles, and you can show close-ups of the most important details as well (the fabric texture of a piece of furniture or item of clothing, the nutrition facts label on a food product, etc.).

With this visual information, customers will feel more confident that what they order on your store is actually what they want. 

But this presents a problem — adding all these images can take up quite a bit of space, and there’s only so much room on the visitor’s screen.

A 2018 eye-tracking study conducted by Nielsen Norman Group found that 57% of page-viewing time is spent within the first 1,080 vertical pixels (this amount of space is typically “above the fold”, meaning that the visitor doesn’t need to scroll down to see the content on their screen). 74% of page-viewing time is spent within the first 2,160 vertical pixels (two screenfuls). 

In other words, the further down a piece of content is on the page, the less likely it is that visitors will see it. 

But how are you going to include all the product images you need to keep your customers happy without forcing them to scroll down?

That’s why you need image sliders — this slideshow feature allows you to display multiple images horizontally rather than vertically, so you can add all your images without taking up too much room on the page. 

Adding an Image Slider Using Shogun

It’s easy to add an image slider any page created using Shogun. Here’s how to do it:

• After downloading and installing Shogun, log in to your BigCommerce account and select the “Apps” option in the left sidebar of the control panel.
• Open Shogun.
• Go to the “Pages” section of the Shogun app and select the page that you would like to add an image slider to.
• Click on the “Elements” icon (it’s the one that looks like a plus sign inside of a circle) to open the elements library. 
• In the elements library, you’ll find all kinds of features that you can add to your BigCommerce pages, including a “Slider” option. Click and hold on the “Slider” icon and place it wherever you want on the page.

There are many different settings you can adjust for the Slider element, including:

• Show arrows on the sides of the slider (if shown, you’ll be able to choose the color of the arrows)
• Show dots on the bottom of the slider that indicate which slide is being displayed (you’ll be able to choose the color of the dots as well)
• Determine whether the controls are displayed over or next to the content
• Determine whether the slides automatically transition on their own — if this option is enabled, you can set how long each slide is displayed as well as whether the slideshow is paused whenever the visitor hovers their cursor over it
• Choose an animation for your slide transitions (there are a variety of different fade, zoom, and sliding options)

You can turn any image slider that you make in Shogun into a reusable snippet. That means if you want to add the same slideshow to another one of your BigCommerce pages, you’ll be able to do so with just a single click.

You can even turn your slider into a Global Snippet — with this option enabled, any edit you make to the slider will automatically be reflected on every page where it is included, saving you even more time. 

It’s worth noting that, in addition to images, you can add the other types of content available in the elements library to your slides in Shogun. This will allow you to use slideshows for many different purposes, including:

• On your homepage, you can include a slider featuring logos of prominent organizations that have endorsed your product — such endorsements are highly valuable for establishing trust in your brand, and this method is more eye-catching than simply writing it out.
• Add an interactive series of testimonials to a landing page to help make your marketing campaign more persuasive.
• Build a custom recommended products section that allows visitors to scroll through a wide selection of options.
• Create a scrollable related posts section for your BigCommerce blog.
• Highlight a series of third-party resources that visitors can check out to learn more about a subject you’ve written about on your BigCommerce blog — adding external links like this is great for search engine optimization.