How to Create an Awesome Product Slider with a Built-in Variant Switcher [Tutorial]

Want a fun, new way of sharing product variant photos with ecommerce shoppers? In this tutorial, we’ll show you how to create a product slider that does just that.

When you visit ecommerce websites, you expect to see products promoted a certain way. Take the product page, for instance. There will likely be a product image and gallery links in the top-left corner, product name and details on the right, and additional information below the fold. The layout is effective, but it’s not the most original or exciting.

What if you could design an ecommerce product page with an engaging product slider at the top? It wouldn’t be for the typical product gallery though. Instead, it would show off the product’s variants — like sizes, colors, models, etc. What’s more, you’d give shoppers the ability to switch between variants right within the slider.

In this tutorial, we’re going to show you how to create a product slider that does just that. There won’t be anything to build from scratch as you’ll start with the Optic Shop Showcase Slider template and then customize the design as needed.  

Table of Contents:

How to Create a Product Slider Your Shoppers Will Love

The Optic Shop Showcase Slider template demonstrates how you might use this product slider for a shop that sells eyewear:

It’s an interesting concept, but it’s not the only thing you can use this product slider template for. For instance, we’re going to show you how to repurpose the template for a furniture store:

If you’re new to Slider Revolution, familiarize yourself with the plugin before you get started:

Step 1: Delete all slides but the first

If you’re making drastic changes to the central components of the template (i.e. the glasses and blurred text), it’s best to focus on perfecting your new layout with one slide. That way, when you duplicate the slide later in this process, you’ll have less work to do on the other slides.

To delete all the slides in the product slider template but one, go to “Slides” in the toolbar. Hover over each of the slides and click the trash can icon to remove them:

You should be left with just one slide as well as the Global Layers when you’re finished.

Learn more:

Step 2: Delete the image and text layers you don’t need

Because we’re going to place this product slider at the top of the product page, we don’t need to include a lot of text within the images. Our product page will do most of the talking for us.

That said, if you decide to use this slider on your home page to show off your product variants, you may want to include some of the text layers we’re about to delete. So, keep that in mind before removing the layers completely from the slide.

As for what you’re going to delete if you’re following along with us, look down at the timeline editor. You’re going to remove the following:

  • Right Lens
  • Left Lens
  • Counter
  • Description

To delete the layers, hold down the “CTRL” or “command” button on your keyboard. Then, click on each of the layers and hit “delete” on your keyboard.

Note: When you remove a group layer (like Right Lens or Left Lens), it will remove all of the content connected to it. 

Learn more:

Step 3: Replace the glasses graphic with your product image

This template is going to be easiest to customize when you have a product image that is roughly the same dimensions as the glasses. If you don’t, you can still use this template, but you’ll have to spend a bit more time repositioning the text layers.

As for the replacement product photo, here are some tips on how to prepare the file before uploading it to WordPress:

  • Find or create a photo where the width is about two times the size of the height.
  • Use a cutout image — i.e. one with no background.
  • Export the file with a transparent background.

To preserve all the settings that have been built into the Glasses layer, we’re going to replace it with our product photo (instead of deleting and creating a new image layer).

The Glasses layer is currently locked from selection or editing. To unlock it, go to the timeline, hover over the layer, and click on the lock icon:

Now you can select the layer. Open up “Layer Options” and go to “Content” to upload your replacement image to the Media Library:

Pro tip: Update the name of the layer so it reflects your product. To do this, click on the layer in the timeline. Then, go to the toolbar at the top and type over the layer name to add your own:

You may need to move the product image up or down, but you won’t know exactly how far to move it until you finalize your text layers. So, let’s deal with those first.

Learn more:

Step 4: Edit the blurred text layer

In our version of this product slider, we don’t need the text to be blurred. So, the first thing we’re going to do is undo that setting.

Locate the Change Text layer under the Blurred Text group in the timeline (or you can select the text in the canvas). Go to “Layer Options” and “Animation”.

Scroll down to locate the “Layer Filter” section. Click the Use Filter toggle to OFF and the blurred effect will go away:

To edit what this layer says, switch over to “Content” settings. Replace the existing text with your own.

To edit how the text looks, use “Style” settings to change the font, size, weight, and spacing. “Adv Style” offers additional settings for customizing the appearance of the text:

In a couple steps, we’ll tackle the repositioning of this text layer.

Learn more:

Step 5: Revise the slide title

The only other text we have in this slide is the title at the top of the slide. If you kept any of the other text layers in your slider — like the counter or description — edit them in this step.

You’ll edit the Title text the same way you edited the blurred text layer. The only difference is you won’t need to adjust any animation settings:

We’ll edit the position of the Title in the next step.

Step 6: Reposition your new layers

Before you start repositioning anything, preview your slider. There are global layers above and below what we’ve been working on and you don’t want to accidentally position your layers over them (if you plan on keeping them, that is).

Once you have an idea of how far you need to move everything, go back to the Slider Revolution editor.

Start with your product image. Select it from the timeline and go to “Size & Pos” to move it up or down using the Y setting:

Preview your changes to see how the layers line up now. Make adjustments as needed. You may need to reposition more than just your product photo.

For instance, the floating text in the center is going to appear behind your product photo, so you may want to make additional tweaks so that enough of the wording appears so that it’s readable.

Pro tip: If you make changes to any of the layers, preview the changes in responsive mode. If your edited layers don’t align properly on the smaller devices, use the responsive editor mode to customize their positioning per device:

Learn more:

Step 7: Change the background color

The slide’s background currently uses a radial gradient. While you can change the background to anything you want — images, videos, as well as solid colors — the gradient is the ideal choice. With a lighter center, it will naturally draw shoppers’ eyes to the center of the slider where the product photos are.

To edit the background, go to “Slide Options” and “Background”. Open the color selection dialogue and input your new color values, remembering to keep the lighter value in the center (i.e. the left side of the color slider):

If your product slider is showing off different color variants (as opposed to something like size or model), then pick a color gradient that matches the color of the product. Just make sure the colors aren’t too close to the exact color of the product. You want them to either be lighter or darker so that the product will stand out instead of blend in with the background.

If the variant is something else, you can do anything you want with the background. Make every slide’s background all one color, make them candy-colored, etc.

Learn more:

Step 8: Duplicate the completed slide and customize your new slides

Preview your slide one more time and make sure you’re 100% happy with how it looks. Don’t stress over the layers we haven’t touched yet; just focus on the product imagery, text, and background.

When everything is good, the first thing to do is update the name and thumbnail of your slide. Go to “Slide Options” and “Thumbnail”:

Since we’re not using thumbnails in the navigation, it doesn’t really matter what you change these to — the background color (which you can do by clicking “Reset” next to the thumbnail) or the product image (which you can access from the “Select” button). We’re doing this so we have an accurate representation of what each slide is when we manage the slides in the toolbar.

To change the slide name, locate the existing name in the toolbar and then type over it with your new one:

Now you’re ready to duplicate your slide. Go to “Slides” in the toolbar, hover over your slide, and then click the copy icon for as many slides as you need:

Go through each slide and do the following:

  • Upload your product variant photo.
  • Edit what the “blurred” text layer says.
  • Edit what the title says.
  • Change the slide thumbnail.
  • Edit the slide name.

Save your changes before moving onto each slide.

Step 9: Edit the variant selector

To edit the color options button that appears on the right side of the slider, go to “Slides” in the toolbar and select “Global Layers”.

We’re going to focus on the layers under the group called Color Options. Each component will need to be edited one at a time.

To edit the text layers with color names (the ones with the big “T” to the left of them), select them one at a time from the timeline.

You can customize them just as you did the text in the rest of the slider. Edit the color name under “Content” and change the font and styling under “Style”. There shouldn’t be anything else you need to do with these layers:

Note: The colors in the timeline are not in the same order as they appear in the Color Options widget. When you rename them, make sure the colors line up with the color order in your slider:

  • Black = Slide #1
  • Blue = Slide #2
  • Red = Slide #3
  • Green = Slide #4
  • Yellow = Slide #5

Use Preview mode to confirm that the colors were updated correctly.

Pro tip: Rename the color text layers to your new colors. This will make them easier to manage. You can also drag-and-drop them in the timeline editor so that they accurately reflect the order in which they appear in the variant switcher.

Next, you’ll need to edit the corresponding [Color]-Dot layer beside the text labels. All that needs to be edited here is the color, which you can take from the color gradient on each slide. The lightest color will probably work best here.

Click on each dot layer and update the BG-Color under “Style” settings:

If you changed the name and order of the text layers, do the same thing with the dot layers.

Note: If you change the color and dot layers, double-check that the “Actions” settings are still properly configured for each:

Pay close attention to the Jump to Slide setting. This setting may get disconnected if you rename the layers or slides.

There are three other layers beneath the Color Options group you may want to edit:

  • Arrow
  • Choose Color
  • Options-Button

To edit the look of the Arrow icon or the white Options-Button, select the layers in the timeline and make your changes under “Style” settings. For the Choose Color layer, all you need to edit is the wording as well as the font.

When you’re finished, preview your work and save your changes.

Learn more:

Step 10: Update the remaining Global Layers

First, let’s delete the groups/layers we’re not going to need:

  • Column-28
  • Column-30

This will get rid of the navigation and social media links at the top of the page while leaving the Logo where it is.

The Logo isn’t an image layer. It’s actually a text layer that contains an icon:

If you want to replace the icon with one that’s relevant to your ecommerce business, open the Icon search bar and do a search for relevant keywords.

If you’d prefer to upload your own logo or don’t want to include anything at all, delete the text layer. To add a logo file to the top of the page, follow these steps:

1. Go to “Add Layer” in the toolbar.

2. Select “Image”.

3. In the timeline, drag the Image-0 layer under Column-29. When you see the blue line beneath it, you’ll know it’s stuck in place.

4. Go to “Content” settings to upload your logo to the Media Library.

5. Go to “Size & Pos” settings to change the size of your logo so it doesn’t draw too much attention. We set ours to 75px x 75px.

6. To center it in the row, click on Column-29. Under “Content” settings, select the Row Settings that have just one column and no breaks.

7. Click on the Image-0 layer once more. Go to “Content” and scroll down to “Display Mode in Column”. Set Display to In-line Block to center the logo.

As for the remaining layers, you can leave the Arrows group as it is unless you want to change the color or style of the arrowheads. These are the arrows that sit above and below the Bullets navigation on the left side of the slider (which we’re going to leave alone, too).

The only other components to edit are under Column-20. You don’t need to bother with the mobile layers (Up-Arrow-Mobile and Down-Arrow-Mobile).

The only thing to change here would be what the Cta Button says and perhaps its design, too. All we’re doing is changing the text to read “BUY IT NOW”. The rest will stay as is.

By the way, if you change the color of any of the global layers, you should update the Line Left and Line Right layers to match.

Learn more:

Set a new trend in ecommerce product slider design

It’s easy to fall into a rut in web design, especially when you have tools like WooCommerce that decide on the layouts and configurations for you. That said, it doesn’t require a ton of effort or time to create a product slider that’s totally your own.

If you’re tired of being a trend follower and want to become a trendsetter in ecommerce, check out the Optic Shop Showcase Slider template.

How to Create an Awesome Product Slider with a Built-in Variant Switcher [Tutorial]

FREE: Your Go-To Guide For Creating
Awe-Inspiring Websites

Get a complete grip on all aspects of web designing to build high-converting and creativity-oozing websites. Access our list of high-quality articles and elevate your skills.

The Author

SR Staff

We're a passionate bunch of designers and developers writing about the ins and outs of web design.

Liked this Post?
Please Share it!

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.