Slide 1
Travel Magazine

For the serious traveller, Traveller Magazine is a mine of information, keeping you up-to-date with the latest trends in travel and tourism.

For the serious traveller, Traveller Magazine is a mine of information, keeping you up-to-date with the latest trends in travel and tourism. For those who prefer to travel in their armchairs, it lays out a sensual feast. Pretty visuals, practical advice and travel experiences.

$9.95
Slide 2
Daily Moisturizer

This nourishing lotion is clinically proven to improve the health of dry skin in 1 day with significant improvement in 2 weeks.

This nourishing lotion is clinically proven to improve the health of dry skin in 1 day with significant improvement in 2 weeks. It helps prevent and protect dry skin for a full 24 hours. This lotion leaves your skin feeling soft, smooth and naturally healthy looking and is gentle enough for everyday use.

$29.95
Slide 3
Liquid Beard Soap

Formulated with all natural ingredients, this mild liquid soap contains pro-vitamin B4, B5 and glycerine.

Formulated with all natural ingredients, this mild liquid soap contains pro-vitamin B4, B5 and glycerine for a luxurious, healthy beard with a natural shine.

$16.25
Slide 4
BBQ Grill Spice

This BBQ & Grill Spices gift set is perfect for every barbecue and grill lover! It's ideal to keep close at hand in your spice rack.

This BBQ & Grill Spices gift set is perfect for every barbecue and grill lover! It's ideal to keep close at hand in your spice rack. This spice set comes from South Africa and the 6 different spices are packed in small tubes with a screw cap.

$4.95
previous arrow
next arrow

Boxed Product Slider

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: The Boxed Product Slider is a great way to display your products when you don’t need a full width slider, each product has its own slide.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Settings

Today’s web designers enjoy creating full width layouts. These layouts are eye-catching, and loved by clients and visitors alike. Boxed layouts, where the content is not full width, but usually 1200px wide, are still quite popular. For these kinds of websites, it’s better to avoid using full width sliders, as they don’t fit the layout. However, boxed sliders are perfect for sites which use boxed layout. They fit the template and don’t mess up the design flow. The Boxed Product Slider is a great way to display your products when you don’t need a full width slider.

Boxed layout

The slider autoplay feature is turned on the slider, which means the slides switch automatically. This helps the users see more slides without having to take action. The remaining time on the slide is displayed by the autoplay indicator shown at the top right corner. At the bottom of the slider there are bullets, which visitors can use for navigation. The bullets are usually dot shaped, but on this Boxed Product Slider, they’re small lines.

Layers

Each slide contains an image on the left side, a heading which displays the product title, a text layer with a small description of the product, the price and a “Buy now” CTA button next to the price. The button has a vivid purple color, and it’s hard to miss on the white background. Thanks to this, visitors won’t have to wonder what they need to do to put the product in their cart. Some slides also have a “New arrival” badge. This is a psychological tactic to encourage people to be the first to get the product.

Style settings of the button

Animations

When you switch a slide with the arrows or with a mouse drag, you can notice a horizontal animation. This is the main animation of the slider which you can set to vertical or fade at the settings of the slider.

Layout

Each product has its own slide which means there’s enough space to introduce them. On the left side, you can find the product image. This helps the visitor picture the product they’re going to learn about later. On the right side, they can find the most important details of the product. This information includes the name, description, price and a “Buy now” button.

Responsive

The boxed product slider is fully responsive. The slider looks different on desktop and mobile, but has the same content on it. The mobile view wraps the content below the image, so the content has enough space, and the textual content is clearly visible. This is because of the wrap after setting on the main row, which wraps the row after 1 column.
Wrap after setting at the row

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 12, 2021. For the latest result analyze now!

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.5 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0
99

Mobile

First Contentful Paint
1.1 s
Speed Index
1.6 s
Largest Contentful Paint
2.1 s
Time to Interactive
2 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider


Similar Sliders -

CosmeticsProduct SliderTop 5 ProductsFull-width Product Slider