Introduction:

In the dynamic world of online shopping, user experience is paramount. Every little improvement that enhances the ease of browsing and understanding products goes a long way. One such feature that's gaining traction is the "Vertical Product Slider. When shopping online, the way product images are presented plays a crucial role in providing a satisfying browsing experience for customers. The "Vertical Product Slider" feature aims to optimize this experience by allowing users to effortlessly explore multiple images of a product without the need for excessive scrolling.

What exactly does the "Vertical Product Slider" feature mean?

Sometimes you may notice that the feature images of the product are large in size and you need to scroll down to check the thumbnail images. But when you have vertical slider then you can see images without scrolling the main image and you can easily check by changing images.

How Does It Work?

The Vertical Product Slider feature allows users to switch between different product images by using a slider. Instead of scrolling, you can simply slide the images vertically to view all available options. This functionality enhances user experience, making it more convenient and intuitive to explore product variations.

Implementing Vertical Product Slider: Methods

There are two primary methods to achieve the Vertical Product Slider functionality:

1.  App
2. Custom code

Firstly, All products that require reference to the Vertical Product Slider must have a Multiple images for that product.

1. Using an App

One straightforward approach is to use an app designed to provide the Vertical Product Slider feature. Apps like Product Gallery Slider can be integrated into your Shopify store. While some features might be available in a free plan, opting for a paid plan could unlock more advanced functionalities. However, this approach may entail recurring monthly costs and might require assistance from a Shopify developer to seamlessly integrate the app with your store's theme.

We can use app for this: GG Product Page Image Slider

2. Custom Code Implementation

An alternative method is to implement the Vertical Product Slider through custom code. This approach offers more control over the feature's integration and appearance. The steps to achieve this functionality are relatively straightforward:

The steps to achieve this functionality through custom code:

1. Basically we have to work only on the Two code files.

A) theme.liquid

B) product-media-gallery.liquid

A) In the theme.liquid
Here is the Code:

<script>
function onResizeReadMoreLayout(){
if ($(window).width() > 992) {
$('.slider-for').addClass('custom_desk_slider');
$('.slider-nav').addClass('custom_thumb_desk_slider');
}
else{
$('.slider-for').removeClass('custom_desk_slider');
$('.slider-nav').removeClass('custom_thumb_desk_slider');
}
if ($(window).width() < 991) {
$('.custom-thumbnails').addClass('thumbnail-slider');
}
else{
$('.custom-thumbnails').removeClass('thumbnail-slider');
}
}
onResizeReadMoreLayout();
// on resize
$(window).on('resize', onResizeReadMoreLayout);

$('.custom_desk_slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
infinite: true,
asNavFor: '.custom_thumb_desk_slider'
});
$('.custom_thumb_desk_slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
vertical:true,
asNavFor: '.custom_desk_slider',
centerMode: true,
infinite: true,
focusOnSelect: true,
verticalSwiping:true,
prevArrow:'<button class="facts-button_prev"><img src="https://cdn.shopify.com/s/files/1/2139/4595/files/left-arrow.png?v=1678157272"></button>',
nextArrow:'<button class="facts-button_next"><img src="https://cdn.shopify.com/s/files/1/2139/4595/files/right-arrow.png?v=1678157272"></button>'
});
</script>

B) In the product-media-gallery.liquid

Add class to product featured image div

 

Now add class to thumbnail's div

Now add Css:

<style>
@media screen and (min-width: 750px) {
 #MediaGallery-{{ section.id }}{{ id_append }}
 {
 display: flex;
 }
.slick-list.draggable
 {
 height: auto;
 }
 .facts-button_prev.slick-arrow
 {
 width: 25px;
 background: #fff;
 border: none;
 margin: 0 auto;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 top: 8px;
 z-index: 999;
 border-radius: 50%;
 height: 25px;
 }
.facts-button_next.slick-arrow
 {
 width: 25px;
 background: #fff;
 border: none;
 margin: 0 auto;
 position: absolute;
 left: 50%;
 transform: translateX(-50%);
 bottom: 8px;
 z-index: 999;
 border-radius: 50%;
 height: 25px;
 }
.facts-button_prev.slick-arrow img,
.facts-button_next.slick-arrow img
 {
 width: 12px;
 transform: rotate(90deg);
 }
 .thumbnail-list_item--variant:not(:first-child) {
 display: block;
 }
 }
</style>

Final Output:

 

Benefits of Custom Code Approach:

To hire a shopify expert is the best method to achieve this. This method will be a more economical, cost effective and efficient method. A shopify expert can easily help you to show a Vertical Slider on Product Page. We can use this method according to the themes as if any theme has any complexity we can easily modify our code according to the theme. We can use this method on the latest theme also for eg: Dawn theme, prestige theme, impulse theme etc. This will be the easiest method for those who want their sites to have more features. And nowadays, this is a very common feature.

To implement the Vertical Product Slider using custom code can offer several advantages:

1- Cost-Effectiveness: While some initial investment may be required, the long-term cost-effectiveness of a custom code solution can outweigh the recurring costs of using an app.

2- Tailored Solution: Custom code allows you to fine-tune the feature according to your store's specific needs and design aesthetics.

3- Easier Adaptation: A skilled developer can customize the code to match any theme, including the latest ones, ensuring a consistent and seamless user experience.

In Conclusion:

The Vertical Product Slider feature is an innovative solution to the common problem of having to scroll through large main product images to view thumbnails. Whether through specialized apps or custom code, integrating this feature can significantly enhance the user experience on your online store. By exploring the benefits of both methods, you can make an informed decision on how to implement this feature effectively and efficiently. So, the next time you're shopping online, keep an eye out for the Vertical Product Slider – it might just revolutionize the way you browse and shop!

---