saurabhbakolia / SCROLLME--ECOMMERCE-WEBSITE

ScrollMe is an open-source eCommerce platform built with JavaScript, React, Styled Components, Node.js (Express), and MongoDB. It offers a modern shopping experience with a scalable backend, perfect for contributors or those learning modern web development.
https://www.scrollme.online/
MIT License
17 stars 56 forks source link

Enhancing the user experience by adding a feature that zooms into the product image when hovered over with the mouse. #198

Open Paniv45 opened 6 days ago

Paniv45 commented 6 days ago

🚀 Feature Request

Description When the user visits the site and opens a specific product, such as a piece of clothing, the product image should zoom in or enlarge as the user hovers the cursor over it. This feature will enhance the user experience by providing a closer and clearer view of the product details, such as fabric texture and design patterns.

Problem Statement Users may struggle to see intricate details of the listed products, especially for items like clothing where the fabric quality, stitching, and patterns matter. Without a zoom feature, users might not feel confident enough to make a purchase, leading to potential loss of sales.

Proposed Solution

On hovering over the product image, it should dynamically zoom in smoothly to reveal finer details. The zoom effect can either enlarge the section of the image under the cursor or open a larger version of the image to the side. This could be implemented using CSS :hover selectors for basic zoom or libraries like React Image Zoom for more complex functionality. Optional: Allow zooming in on mobile devices via pinch gestures. Example

Sites like Zara, H&M, or Amazon use similar zoom-in-on-hover functionalities to improve product visualization.

Alternatives Considered

Providing a magnifier glass effect instead of a simple zoom-in. Adding a separate "View Larger" button below the image to open the image in full screen. Using a carousel with detailed close-up images instead of zoom functionality.

Additional Context

For better accessibility, the zoom feature should be responsive, functioning across desktops and mobile devices. A fallback image (lower resolution) can be used for performance on slower networks, with the zoom image loaded asynchronously.

Checklist I have checked the existing issues and this feature request is not a duplicate. I have starred this repository. I am willing to help implement this feature

Additional context This feature will add to the website’s professionalism and trustworthiness, improving conversion rates. Screenshot 2024-10-14 161805

Paniv45 commented 6 days ago

I can add this feature . kindly assign it to me

thakuratul2 commented 4 days ago

@Paniv45 assigned