One of the frustrating things about selling physical products online is how flat and artificial they can end up looking in photographs.
Brands put a lot of time and effort into designing their physical products — just as you do when designing the digital products they use to sell them. So finding a way to make their physical products look as good as they do in person is paramount.
While AR and VR technologies are one way to make products look good enough to reach out and grab online, they can be expensive and difficult to implement. In this tutorial, we’re going to suggest an alternative solution: A 3D WooCommerce product slider.
We’ll be using the WooCommerce Slider Static template to demonstrate the following technique. This option won’t cost a ton of money and it’ll only take about an hour or two to implement.
Table of Contents:
- Step 1: Delete all of the slides but one
- Step 2: Update the product image and its shadow
- Step 3: Customize the headline
- Step 4: Add the product data and CTA
- Step 5: Edit the slide background color
- Step 6: Edit the slide transition effect
- Step 7: Duplicate the slide and customize the content
- Step 8: Update the global layers
How to design a 3D WooCommerce product slider that looks good enough to reach out and grab
You can place this slider either at the top of your product pages (for smaller shops) or you can use it as a way to showcase products at the top of the home or product search pages:
What’s nice about this slider is you can repurpose it for any type of product. Just some slight alterations to the design can give it an entirely different vibe, like what we’re about to do for our grow-your-own garden shop:
If you’re new to Slider Revolution, you can learn all about the basics of the editor here:
Step 1: Delete all of the slides but one
Compare the before-and-after GIFs above and you’ll see some big differences in how the headline was handled in each.
Because of this, we want to delete all of the slides but one. This will allow us to establish a custom style and layout for our slider. In the end, it’ll cut down on the amount of time we have to spend on customizing the slider as a whole.
Note: If you plan to follow our lead, then do this step as well as Step 7. If you want your slider to look like the template (with the peekaboo text layers), then skip these two steps.
To delete slides in Slider Revolution, locate the Slides menu in the toolbar. Hover over the slides you want to delete (it doesn’t matter which since they have identical layouts). Click the trash can icon to remove them:
You’ll have one slide remaining when you’re done.
Step 2: Update the product image and its shadow
There are two image files we’re going to edit in this step.
Product Image is the photo of the sneaker. It needs to be replaced.
Pro tip: In order to create the 3D product look, your product photo must have the background stripped out. You can use a tool like Canva to easily do this. First, use the Background Remover tool to remove any background elements, including shadows:
Then export the file with a Transparent Background.
When your photo is ready, select Product Image from the canvas or timeline editor. Then go to “Layer Options” and “Content” to upload your new product photo:
The photos used in the slider template are all sized similarly — roughly 620px by 550px. If you have an image that’s taller than it is wide, though, it’s better to save it with bigger dimensions. Ours, for instance, is 1000px by 887px.
We did this because it’s better to use the “Size & Pos” settings to size images down rather than to size them up. This will preserve our photos’ sharp resolution.
That said, if your photos are similar in terms of shape to the sneakers, then use similar dimensions to the original file. You won’t have to bother much with resizing the photo once it’s inside Slider Revolution.
Before you update the other photo layer, do a quick responsive check. This is especially important if you resized or repositioned the product photo layer:
Note: Any changes you make to your layers in responsive mode will only apply to the variant (i.e. Notebook, Tablet, or Mobile) you’re looking at.
One last thing to do in this step is to update the Shadow that appears beneath your product.
You shouldn’t need to create or upload your own. Just select it in the canvas or timeline and use “Size & Pos” to change how wide it is (the value next to “W”) so it better lines up with the size of the product above it:
When you’re done editing these two images, save your changes.
Step 3: Customize the headline
There are two layers that make up the big headline in this slide:
Stroke Headline Front is the outlined text that appears on top of the product image. Because of the stroke setting that is enabled as well as the transparent fill color, we can see the product behind it.
Filled Headline Back is the same text, but it uses a regular font with color and it sits behind the product.
This is a really cool effect to use when you have a slick or high-tech product to show off — like the sneakers in the template. However, we’re using this slider to help people start home gardens, so we need a more subtle effect.
Note: If you want to keep the template’s outline effect, don’t skip this step. You’ll use the same “Layer Options” settings we’re about to walk through. Your stylizations will just vary a bit from ours.
To modify these layers, select them from the canvas or timeline one at a time. Go to “Layer Options” to make your modifications:
- “Content” enables you to change what the text says.
- “Style” allows you to edit the font, color, transparency, size, weight, and more.
- “Size & Pos” allows you to move your text layer.
- “Adv Style” is where you’ll find the text stroke settings.
Let’s start with the Stroke Headline Front:
We’ve updated the text to read “Basil”, added a white fill color to the text, and disabled the stroke setting.
Now let’s do the Filled Headline Back:
What we’ve done here is turn it into a subheadline that partially sits behind the product. We updated the text to read “Grow Your Own”, resized it to 60px, set the text transparency to 75%, and moved it up by 300px on the page.
Just as we had to do after editing the size and position of the product photo, we’ll need to do a responsive check to ensure that our text looks good on smaller device screens. Even if you didn’t make any such modifications, it’s always a good idea to double-check before moving on.
Step 4: Add the product data and CTA
There are three product data fields at the bottom of this slide:
There’s also a Buy Now text layer that provides shoppers with a link to buy the product.
If you want to remove any of these fields, select them from the timeline editor and hit Backspace or delete. We’re going to do this with Rating since it’s not a relevant field for our DIY gardening shop.
You’ll edit the remaining text layers using the same settings as you did in Step 3. The one exception is Buy Now.
Because this is a call-to-action button, you need to configure an action for it in addition to customizing the text and font styling. You can do this under “Layer Options” and “Actions”:
The default setting is to scroll below the slider. If this 3D WooCommerce product slider appears at the top of your product page, then keep that setting as it is.
On the other hand, if this slider is promoting a variety of products from your home or search results page, then use the Simple Link setting to point each slide to the corresponding product page.
Step 5: Edit the slide background color
Go to “Slide Options” and “Background” to swap the existing background gradient for a new one. Click on BG Color to open the color selection dialogue.
There are two ways to create a gradient. You can use the controls up top to add custom colors, set the gradient direction and angle, and also edit color transparency:
The other option is to use a preset gradient from the bottom-right corner:
You can use the gradient as is or edit the settings above to tweak it.
Step 6: Edit the slide transition effect
There’s another background setting you may want to modify — the slide transition effect. Because we’re looking for a tamer design to align with what we’re selling, we’re going to make some adjustments.
Go to “Slide Options” and “Animation”. The current slide transition is called Water Surface Medium. We’re going to leave that setting in place. What we want to adjust is the advanced filter — which you’ll find below the transition presets:
The Glitch & Noise effect looks good if you’re selling high-tech or futuristic-looking products like the template’s sneakers. For something like plants, we don’t need the setting. To turn it off, switch the Post Process to None.
Step 7: Duplicate the slide and customize the content
Once you have finalized your slide’s design, go ahead and build out the rest of your slider. You can add as many slides as you like, within reason. Usually seven or eight slides is the maximum if you want to ensure the slider content loads quickly.
To duplicate the finalized slide, go to “Slides” in the toolbar and hover over your slide. Click the duplicate button to create a copy:
You won’t need to modify the styles of your fonts, positioning of layers, animations, or anything like that. At this stage, all that’s needed is for you to update the content (i.e. text, photos, and background colors).
You’ll also need to customize the links on each slide if they’re pointing to product pages.
Step 8: Update the global layers
The Global Layers are the last thing to take care of. Go to “Slide Options” and select them from the dropdown:
You’ll find the following layers here:
- Arrow Left and Arrow Right are the arrows that appear on the left and right side of the screen. This lets visitors know how to scroll.
- Circle Left and Circle Right are the circles that appear when visitors hover over the mouse trap. When they see the circles, they can click to scroll.
- Logo is the logo that appears in the top-left corner.
- Cart is the shopping cart counter in the top-right corner.
- Row-12 contains a tagline for the shop along with social media links.
We’re going to remove the layers along the top since our theme will take care of the header elements for us. Removing the global layers is done the same way as the others. Select them in the timeline editor or the canvas. Then hit Backspace or delete.
The arrows and circles will stay where they are as they allow for an engaged scrolling experience.
Elevate your WooCommerce shop with a 3D product slider
Your ecommerce product photos and galleries will always be useful for showing off different variations and angles of your products. However, a 3D WooCommerce product slider will give you a chance to bring your store and the products in it to life in a way that photos won’t be able to.
If you’re looking for a fast and easy alternative to flat photography or complicated AR and VR technology, the Slider Revolution’s WooCommerce Slider template is just what you need.
2 thoughts on “How to Create a Beautiful 3D WooCommerce Product Slider [Tutorial]”
The most complicated part is to dynamically load content from woocommerce. Is there any information on what’s possible? This tutorial doesn’t really help with that part…
can this article help you there?
Best regards, Dirk @ Slider Revolution