A product slider is the best tool at your disposal to encourage visitors to buy from your store. Most product sliders display many products next to each other. While that approach saves space, it makes one specific product harder to focus on for the visitor. The Full-width Product Slider took a different approach than most product sliders. It shows a large product image as background. This raises attention and makes the visitor focus on the product more easily. This slider won’t leave the customer wondering what they should do to shop. There’s a clear, minimal CTA on the slider delivering the clear message: buy now!
Once the visitor got interested in your product, they can learn more about it. There’s a white description box about the item at the right side of the slider. This info box was created using Content mode, which guarantees that the description looks perfect on every device. See, lots of people use their phone for browsing. They expect almost the same user experience as desktop users do. This includes being able to read all content without having to zoom in. Content mode helps with this, as it keeps the text sizes the same on every device, so they’ll be large enough on mobile.
The background images have the popular Ken Burns effect on them. This gives a slight movement to the slider. After the slides switch, the layers (on the right side) appear with a flipping layer animation. The slider switches automatically after spending 8 seconds on each slide. However, when the mouse enters the slider area, the slider autoplay gets paused. This allows the visitor to read the text and enjoy the slide without interruption. The navigation is also an interesting part of the Full-width Product Slider. At the bottom, there are thumbnails with the product images. This is a simple but effective way to encourage visitors to check all slides.
Core Web Vitals
PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!
Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro
Related Post: 12 Beautiful Full Width Slider Examples