Image Hover Zoom & Variant Color Swatch


I have some features in mind that I want to implement but am facing some difficulties such as product image hover zoom/magnifier and product variant color swatches on product page.

Regarding the image hover zoom, I’ve tried following the video guide provided by the webflow itself but wasn’t successful. The feature I want is for the product image to zoom when the mouse is hovered on it, AliExpress is a great example for this.

Moreover, regarding the product variant color swatches, I’ve tried to do so by turning the option field into a button, but unfortunately I have 2 other option fields other than the color, that we do not want to display them as a “button” but as a “select” form. So the feature we want is for the color option field to turn into a “button” form but the other option fields remain in “Select” form.

Another feature related to colors is for the product images displayed according to the variant color selected. For example, the color gold is selected, I want only the gold jewelry to be displayed in the product page section.

Would really appreciate your help on these features.

Tennis Jewelers Team

Here is my site Read-Only: [Webflow - Tennis Jewelers]

If you want to have a magnifier on your website, here is a good solution:

1 Like

Hello, @mkukulka thank you so much for your response!

I’ve successfully implemented the image hover zoom feature, which is fantastic! However, I’ve encountered a bit of a challenge with the product variant color swatches as mentioned above.

I attempted to address this by transforming the color option field into a button. However, I have two additional option fields, aside from color, that we prefer to showcase as a “select” form rather than a “button.” The desired functionality is for the color option field to adopt a “button” format, while the other option fields retain their “select” form.

Additionally, I’m aiming to have the product images dynamically update based on the selected variant color. For instance, if the color gold is chosen, only the gold jewelry should be showcased in the product page section.

I would greatly appreciate your guidance in achieving this as well. Thank you! :slight_smile:

Hi Tennis,

Maybe you could add new categories (colours) and divide products into these categories? Then you can match the specific colours of jewellery to the product page.

Maybe try to fill Options with size and material. Then you will be able to use these options on the website. Your goal is to achieve this :point_down:

Thank you for replying back @mkukulka !
what i meant was I have multiple variants which are: color, mounting size, bracelet size and metal type. I have displayed the color in button type and it adds the selected color to the cart information when added, but the problem is with the other variants , i want to display them in a dropdown form and when selecting their value it adds to the cart’s info as well.

Sorry I don’t understand the process. Could you please record this with Loom and paste here the link?