There are various ways to announce a big sale on an ecommerce site.
You could interrupt the visitors’ experience with a pop-up announcement. But once it’s dismissed, then it’s gone until their next visit.
You could place a notice in a small notification banner at the top of the page that might get missed by some shoppers. It’ll also limit how much detail you can provide with regards to the sale.
Another option is to promote the sale in your hero image. This would solve the temporary issue related to pop-up promotional messaging as well as the space limitations in the notification banner.
In this tutorial, we’re going to go with the hero image option and use the eCommerce Sale Slider template to build it out. However, we’re going to put a spin on it and add a scrolling banner and some other motion to ensure you grab every shopper’s attention with your ecommerce sales promotion.
Table of Contents:
- Step 1: Replace the object layers in each slide
- Step 2: Edit the slide and module background colors
- Step 3: Edit the border box colors
- Step 4: Update the object shadow layers
- Step 5: Edit the discount badge on each slide
- Step 6: Update the scrolling sales promotion text
- Step 7: Update the slide description
- Step 8: Update the button
- Step 9: Update the navigation arrow colors
Shoppers are accustomed to finding a store’s latest offers in the hero image. However, if you want the hero image to be more than just something that discount-hunters reference, you need to get everyone to stop and pay attention to the ecommerce sales promotion.
With a potent combination of scrolling messages, a slowly shrinking box, and 3D product images, the eCommerce Sales Slider template was designed exactly for that purpose:
To create this effect on your own, you’ll need your own product imagery, color palette, and custom messaging. The template will take care of the layout and eye-catching animations so you can focus on repurposing the hero slider for your own store. Like the one we’ll be creating for our pet retailer:
Before you start, make sure you have the Slider Revolution basics down:
The first layer we’re going to edit is the Object layer — the one that depicts the model or product in each slide.
When choosing product imagery of your own, aim for ones that are taller than they are wide so they fit better within the existing Object space. Also, when exporting your image, make sure it has a transparent background so your new colorful background will show up around the product image.
Note: Don’t worry about using images with shadows right now. This is something we’re going to artificially insert in Step 4.
To edit the existing Object in each slide, select it from the timeline or canvas. Then, go to “Layer Options” and “Content” to upload your new one to the Media Library:
If your new image is too small or large for the given space, go to “Size & Pos” settings where you can adjust how wide it is:
Make a note of what the new size of the image is as you’ll want to make the images on all the other slides the same for a consistent effect.
Note: You can also use the X and Y values to move your Object image up or down if it sits too high or low on the slide. This is something we had to do for our dog imagery that was wider than it was taller, like this one:
We resized the image to 600px just as we did the first one. We then updated the Y value to -150px.
If you make any changes to the size or position, do a responsive check before you move onto the next step. The first thing to do is open the Preview and then switch between the responsive views to ensure that your replacement image looks fine and without distortion.
If there are any issues, return to the editor, open the responsive variant view you need to edit:
Then, make customizations to the dimensions and positioning of the image as needed.
- Editing Images in Template Modules
- Checking to Ensure Modified Content Is Still Responsive
- Desktop, Laptop, Tablet and Phone Size Variants
- Adjusting for Responsiveness
Since you’re creating this hero slider to promote a sale, you’ll want to find colors that align with the type of sale it is.
For instance, if it’s a holiday sale, you can holiday-inspired colors like red and green or blue and white. If it’s a seasonal sale, you could choose colors reminiscent of that time of year — pastels for spring, bright neons for summer, earth tones for fall, and muted tones for winter.
Our ecommerce sales promotion is running through the month of August to commemorate National Dog Month. As such, we’re going to use a brighter color palette.
Pro tip: If you need help finding seasonal or holiday colors that are harmonious, use Canva’s color palette generator to search for premade palettes:
To edit each slide’s background color, go to “Slide Options” and “Background”. Click on the BG Color swatch and then select your color from one of the presets or enter your own HEX code:
Keep track of which colors you apply to each background. If you found them using Canva’s color palette generator, keep the source link open as it’ll help you select colors in the remaining steps for the border, shadow, and text colors.
When you’re done, go to “Module Options” and “Layout”. Scroll down until you find the “Module Background” section:
This color should be the same background color you used in Slide 1. While you won’t see this change reflected anywhere in the ecommerce slider right now, you’ll see it when the slider opens on the frontend of your site. If the color doesn’t match the first slide, it could add slight friction to the experience. So, make sure they match.
There is an animated border around the main area of each slide. In the template, the border color is handled differently from slide to slide. Sometimes it’s complementary to the main slide background and other times it’s a few shades darker or lighter than it is.
How you handle the contrasting colors is up to you. For our promotional slider, we’re going to use a monochromatic colors.
If you still have your Canva color palette open, select the colors one-by-one to open their color pages. Here you’ll find color ranges and pairings you can use to create not only this border but your object shadow and text.
Let’s start with the borders.
There are two layers to edit. Border-Box-Desktop is the animated border design around the desktop, laptop, and tablet designs. Border-Box-Mobile is the border around the mobile UI.
To edit the colors of each, locate them in the timeline editor. When you hover over them, you’ll see that there is a lock preventing you from selecting or customizing them. Click the lock symbol to remove the lock.
Then, go to “Layer Options” and “Style”. Scroll down to the “Border” settings and update the color of each:
When you’re done, you can lock those layers again if you’d like or leave them in view.
With our background colors in place, we can now create a shadow for our objects.
What you’re going to want to do is pick a color that’s a couple shades darker than darker of the two colors currently in the slide. This way, the shadow will stand out against both.
To edit this layer, first create the shadow image. You can do this in Canva’s editor:
- Upload your transparent-background product image.
- Click “Edit Image”.
- Go to the Duotone effects.
- Select any of the duotones. Click it again to open the color settings.
- Set both the Highlight and Shadow as the color you want your shadow to be.
- Download the file with a transparent background.
Next, locate the Object-Shadow in the timeline editor. Go to “Layer Options” and “Content” to upload the newly created graphic.
If you made size or positioning adjustments to the original image, do the same to this one. Just make sure not to match the positioning exactly since you want the shadow skewed down and to the right of the main Object layer:
For reference, we’ve kept a 50px difference between the X and Y placement of our Object and Object-Shadow layers.
Note: Under “Animation Settings”, a layer filter is configured. This is what gives the shadow its subtle, grainy look so that it looks more like a shadow than a silhouette. Leave it be.
Look for the Discount group in the timeline editor. These four layers make up the circular badges to the right of our product images.
There are a few things to do in this step:
The first is to update the color of Shape-8. This is the circular shape behind the sales promotion.
You can use the color from your slide’s border. Another option is to choose a color that’s complementary to the main background color of the slide. Or you could use the same badge color from slide to slide — just make sure it contrasts well with each.
We’re going to set all of ours to white.
When you’ve settled on your badge colors, update them by going to “Layer Options” and “Style”. You’ll find the color selection dialogue swatch under “Background”:
The next thing to do is update what the text says in the badge. While the template displays the ecommerce sales promotion, we’re going to display a fun message instead.
There are three layers that make up this single message: Line-1, Line-2, and Line-3. Delete any that you don’t need by selecting them in the timeline editor and then hitting your Backspace or Delete key.
To edit what they say, go to “Layer Options” and “Content”. You can replace the text in the text box:
The last thing to do is to edit the style of the text. This includes:
- Font — Pick something that matches the style and personality of the store and products.
- Height — Adjust so that each line of text fits properly within the circle.
- Weight — Play around with the weight to emphasize the different words in the message.
- Color — Add a fun, eye-catching, and readable pop of color to your message.
Note: The color you use in the badge can be the same accent color you use for the other text in the slide. Regardless, make sure it’s easy to read at any size.
You can edit the text layer styling under “Layer Options” and “Style”:
When you finish each slide, save your changes before moving onto the next.
In the template, there are three scrolling text layers that move across the top-left part of each slide. You’ll find them in the timeline editor as:
- Large-Text — The solid text in the middle.
- Large-Text-Outline-1 — The outline text at the bottom of the stack.
- Large-Text-Outline-2 — The outline text at the top of the stack.
You’re going to edit these layers similarly to how you edited the badge text.
Use “Content” to edit what the text says. Use “Style” to update the font, color, size, and other styling. You’ll also need to use “Adv Style” to edit the color of the text stroke since that’s how we create the outlined font effect.
Pro tip: If you want to add an icon to any of these layers, use the “Icon” button above the text field. Search for the one you want and the code will be entered into your text layer.
Here are a few things to note if you’re having trouble figuring out what to put here or how to edit it:
In order to keep proper spacing between the layers, go to “Size & Pos” to adjust the Y placement of each of the scrolling layers.
Depending on the length of the text you include in each layer, you may need to adjust the distance of the animation. For instance, we made each text string extra long so we could advertise multiple offers on a single line.
In order to adjust the animation distance, go to “Animation”, click on “Keyframe #”, and adjust the Duration setting below:
Adjust this as needed so that the scrolling animation aligns well with the length of the text you’ve written.
Lastly, to update the rotation of the layers, go to “Adv Style” and “Basic Transform”:
The rotation setting is on a higher level than any rotation that would happen within the layer’s keyframe animation. The less you do to edit these settings the better as these layers are already configured so that the x-axis distance traveled in the animation happens with the whole x-axis being rotated.
The description that appears beneath the scrolling layers can be anything you want. It can be a message that stays the same from slide to slide or one that changes based on the slide’s product image.
We’re going to create a custom description for each slide.
To edit the description, locate the Description layer in each slide. Then update it as you did the other text layers:
Since we’ve used the slide accent color for the scrolling promotional offer and badge text, we’re going to switch it up and use a tamer color for the description. This will make the longer string of text easier to read while also preventing it from stealing any of the limelight from the offer.
It’s also worth noting that the Description field isn’t sized in a way that your text will automatically break when it gets too long. You’ll have to manually add those breaks by inserting <br /> where you want your text to break to the next line or use the return arrow icon above the text field.
Editing Slider Revolution buttons is similar to editing text layers. You’ll control what the button says under “Content” and how the text looks under “Style”.
In addition, you’ll use “Background” settings under “Style” to edit the background color of the button. To edit what it looks like in its hover state, use “Hover” settings:
You can use the same button background color from slide to slide so long as it works with the surrounding color palette. Or you can choose a color that complements the other colors in your slide.
To finalize your ecommerce sales promotion slider, edit the arrow navigation in the bottom-right corner of each slide. You won’t find these under Slider Revolution Navigation Options though. They’ve been custom-created as two layers: Arrow-Right and Arrow-Left.
If you want to change the style of the arrowheads, do so under “Layer Options” and “Content”. Do a search through the icons and see if there’s a style you like better.
Other than that, there are three things you need to do for each arrow layer:
- Choose an arrowhead color.
- Choose a background color.
- Configure the hover settings.
Since these arrows are the only control that shoppers have over the slider’s pace, we’re going to design them so they look like the other clickable element in the slides (i.e. the Button layer).
The main difference in what we’ve done is that we’ve made them semi-transparent to signal that they’re secondary to the main button. We also inverted the hover colors.
Let’s be honest, banner blindness is a real thing on the web. Shoppers are so used to seeing the same things over and over again, like pop-ups, notification bars, and static hero images. If you want to capture their attention with your ecommerce sales promotion, then you need to shake things up.
With the eCommerce Sale Slider template, you’ll have everything you need to do this. All you need to do is customize it with your own content, products, and offer.