Image variant as image bg on button

Design help Ecommerce
1

Hi all, I have this design for a product page. I need to put the image of each variant as a background in the option list (button style) as you see in the design. The problem is that when I put the image element inside the button variant, I can’t link the main image of each product variant.

Maybe I need some javascript?

edit: I’ve seen this thread that is related: Outputting Variant images

Thank you!

desktop-product-detail-2-colors
desktop-product-detail-2-colors1440×810 56.6 KB

Here is the page I am working on (Read-Only):

https://preview.webflow.com/preview/prisca-brown?utm_medium=preview_link&utm_source=designer&utm_content=prisca-brown&preview=9b78f9d37d0256b345054d2da0262efc&pageId=6228a02b09439574dc194ef7&itemId=6228a30e8544f318f6ffd963&workflow=preview

1 Like
2

Ok I found a workaround that maybe could be useful to anybody facing this kind of problem.

I placed on top the grid with the variant buttons totally transparent in any state. On the back I put a collection list linked to a multi-image field viewed as grid. So each variant button would be on top of the corresponding image.

3

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.