Subscription boxes have grown very popular these past few years. They make them for food lovers, dog owners, beach enthusiasts, wine drinkers, and more. A lot of it has to do with all of the value that gets packed into a single box — for one low, predictable price — every month.
Because of how many of these services there are now, how you market your subscription boxes matters a good deal.
In this tutorial, we’re going to show you how to customize the Kitchen Knives Product Slider template. This unique product slider design will help you promote the contents of your latest subscription boxes and show off all the built-in value within them.
Table of Contents:
- Step 1: Edit the global layers
- Step 2: Delete the extra slide
- Step 3: Customize the slide background
- Step 4: Add your own surface
- Step 5: Replace the big item
- Step 6: Replace the three smaller items
- Step 7: Update the slide text
What’s neat about this slider template is that it can be repurposed for different types of products. For instance, the template demonstrates how to use this product slider design to not only highlight different products, but to place them in relevant contexts:
We’re going to demonstrate another way to use this product slider. We’ll be unboxing our themed subscription boxes so people can see some of the stuff they’ll get in each and which local businesses they come from:
If you need a Slider Revolution refresher before beginning, check these out:
If you take a look at the product slider, you’ll notice that there are certain parts of it that never change. In this template, these global layers are the header row at the top of the slider and the navigation row at the bottom.
To edit the global layers, go to the “Slides” dropdown in the toolbar and select “Global Layers”:
We don’t need the header row for our product slider design, so we’re going to delete those components. To do the same, go to the timeline editor at the bottom. Hold down the Ctrl or command key and select the following:
Then hit the Backspace or delete key. This will remove not just the group, but all of the individual layers within it.
The Menu-Overlay layer also needs to be removed. However, it’s currently locked from view/editing. To unlock it, click the padlock symbol next to it:
You can now delete the layer.
The remaining Copy-Row-17 group contains three components — the slide counter on the left, the navigation buttons under the slide description, and the Instagram link. We’re going to keep the first two as they are.
We don’t want to encourage people to leave our product slider; we want them to stay where they are and buy one of the subscription boxes. So we’re going to edit the Instagram icon and strip out the link.
To do this, select the Insta layer and go to “Layer Options” and “Content”. The icon has been generated in the text editor. To replace it with another, first delete the icon text in the editor. Then click on the “Icon” tab above the editor, do a search for the icon you want to use, and add it:
To remove the link and make it a static icon, go to “Actions” and click the trash can icon next to Simple Link:
When you’re finished, save your changes.
There are four slides in this product slider. We only need three of them.
To delete extra slides, go to “Slides” at the top, hover over any of the slides, and click the trash can icon next to it:
Open Slide #1 to start customizing the design and content of the slider.
There are a lot of components that make this product slider work as it does. We’re going to leave the basic functionality as is along with the quantity of components. What we’re going to change is the content of each to make it our own.
The first piece to edit is the slide background.
Currently, there is a background image that makes it look as though we’re seeing shadows against a wall. You can either replace this natural textured background with another image or add a color background.
We’re going to upload a different image to the background. It’s similar in terms of creating texture with light and shadow. However, this will allow us to alter the color of our product slider and make it feel warmer and homier:
Pro tip: You can use the same background image (or color) for all of the slides or change it up. If you use different backgrounds, try to keep the visual styles similar. You want your products to be the main focus, not the background design.
Repeat this process for the remainder of the slides. Save your changes in between each.
The black marbled surface that resembles a counter top makes sense within the context of kitchen products. However, for our local subscription box service, we’re going to use something that looks a little more rustic.
Note: The shape/image layer’s current settings create the angled and rounded appearance. So make sure you replace the existing layer (instead of creating a new one) to preserve them.
Select the Board layer at the bottom of the timeline editor. Go to “Layer Options” and “Content”. Replace the BG Image with your own:
Again, you can use the same graphic in each of your slides or switch it up. Either way, go to your other slides, upload the new Board images, and save your changes.
The main item in the template slider is the knife on the cutting board. We’re going to simplify this by replacing it with a single item which will be the subscription box.
The first thing to do is delete the Knife and Wood-Shadow layers. Next, select Wood Board and replace the current image under “Layer Options” and “Content”:
Update the main image in all of your slides.
Note: You shouldn’t need to make any changes to the size or position of this image. However, if you do, you’ll find those settings under “Size & Pos”. That said, whenever making changes to the size or position (or if your image is shaped much differently than the original), make sure to do a responsive check using the variant switcher in the toolbar.
There are three ingredient layers that appear to the left of the main image. They’re named differently from slide to slide.
Take your time to select each one, upload a replacement image, and resize or reposition as needed.
Pro tip: In order to preserve the gliding surface effect in the slider, use images that look at your items from overhead. If they appear to be at an angle, it could throw off the look of the design.
Do this for all of your slides, saving your changes in between each. Remember to do a responsive check if you change the size or position of these layers:
If changes are needed, make them in the specific device’s view. Your work in the default Desktop view won’t be affected.
The last thing to do in this product slider design is edit the text. There are three text layers to update:
- Title is the headline.
- Description is the short paragraph beneath the title.
- Cta-Button is the button at the bottom.
To edit these layers, work your way through “Layer Options” one at a time:
Use “Content” to update what the text says.
Use “Style” to update the font, colors, weight and size of the text.
Use “Hover” to modify how the button looks when someone hovers over it.
Use “Actions” to add an active link to the button.
Any modifications you make to styles in the first slide should be applied consistently throughout the slider.
Pro tip: If you make changes to the fonts in the slide, go back to Global Layers before you wrap up and see if any updates are needed:
You’ll probably want the slide numbers or Prev/Next button fonts to match your new ones.
Unboxing videos are a fun and immersive way to promote subscription boxes and products. However, they require a lot of time (and money) to produce and quite a bit of time on the part of your customers to watch.
Your prospective customers don’t need to sit through a 10-minute unboxing video to get a sneak peek of what’s included in your subscription boxes. With the Kitchen Knives Product Slider template, you can quickly and easily create a product slider design that unboxes your products right before their very eyes.