How to Install Product Image Sliders for Category Pages in Magento 2

Hello Everyone,

In this blog, you will learn how to install a Product Image Slider for Category Page extension in Magento 2. 

This extension allows merchants to showcase product images in a specific order, enhancing the category page’s visual appeal and user experience. With this feature, merchants can organise and present their products more effectively, ultimately leading to increased engagement and sales.

Don’t waste your time, let us guide you straight away. Follow the easy steps below to install and configure a Product Image Slider for the Category Page extension. 

 Why Magecurious Product Image Slider For Category Page?

  • Enable or disable it from Magento admin.
  • Working on desktop & mobile responsive view. 
  • Automatically slide the image when a product is hovering over a desktop view.
  • When you touch an image in mobile view, an image slides automatically.
  • Clicking the previous and next buttons causes the slider to display the images in desktop view.
  • Once the image is touched, the previous and next views are displayed. The image is shown in the desktop view by the slider when the previous and next buttons are clicked.
  • These photos will automatically change in the mainframe as you hover over them.
  • Compatible With 2.0.x, 2.1.x, 2.2.x, 2.3.x, 2.4.x

Steps to Install Product Image Slider for Category Page in Magento 2. 

STEP 1: Extract the downloaded extension package from your Magento root folder using FTP (File Transfer Protocol) Tools. For verification of the root folder, you can see some folders inside the Magento root folder like app, bin, lib, PHP server vendors, etc.

STEP 2: Next Need to run some Magento commands to install the extension in your system, so connect with your server via SSH, go to the Magento root folder (e.g: cd /var/www/html/magentp243), and run the below commands one by one.

  • php bin/magento setup: upgrade 
  • php bin/magento setup:static-content:deploy-f  
  • php bin/magento indexer: reindex  
  • php bin/magento cache: clean  
  • php bin/magento cache: flush  
  • chmod-R 777 var/ pub/ generated/

STEP 3: If all your commands run successfully, then log in to your system Admin Panel and go to Store > Configuration, if you see a new Tab on the left sidebar with the MageCurious Logo it means the extension was installed successfully.

Steps to connect Product Image Slider For Category Page with Magento 2. 

STEP 1:- To Configure Extensions, go to Stores > Settings > Configuration > MageCurious Tab > Product View Images Tab > Configuration. 

STEP 2:- In Product View Images Configuration: 

  • Product View Images Enable: Enable or disable the Productviewimages extension.
  • Category list page on roll: Select which slide you want to use on the category page. 
  • There are 2 options: image slider on hover or image slider on arrow click. 
  • Product details page roll pictures slider enable: You have to keep the image slider on yes or no under product details. 

Show demo of Productviewimages in the video:- https://magecurious.com/media/imageslider/product_image_slider_ module.mp4

STEP 3:- Category list page on image slider on hover. 

Desktop view

  • When you hover over other products on the category footer, the image slider will automatically turn on.

STEP 4:- Category list page on image slider on hover. 

Mobile view

  • When you touch over products on the category page, the image slider will automatically turn on. 

STEP 5:- Category list page on image slider on arrow click. 

Desktop view

  • When you hover over the product you will be shown an arrow button. 
  • Preview button: When you click on the preview button, you will be shown a preview image.  
  • Next button: When you click on the Next button, you will be shown the Next Image

STEP 6:- Category list page on image slider on arrow click :

Mobile view

  • When you touch the product you will be shown an arrow button.
  • Preview button: When you click on the preview button, you will be shown a preview image. 
  • Next button: When you click on the Next button, you will be shown the Next Image.

STEP 7:- Product details page image slider. 

  • When you hover over these images, the images will change in the main frame automatically.

Final Thought 

This is the easiest way we can tell you in this blog. Here’s how you can install a Product Image Slider for the Category Page in Magento 2. Hope you liked the blog.

So quickly go to the comment box and tell me how you like this blog.

Stay tuned to our site to get new updates on Magento.

Thanks for reading and visiting our site.

How useful was this post?

Click on a star to rate it!

Average rating 5 / 5. Vote count: 2

No votes so far! Be the first to rate this post.

Leave a Reply

Your email address will not be published. Required fields are marked *