Skip to main content
Participant
May 28, 2023
Question

Creating a customizable product variant image with checkboxes for attributes

  • May 28, 2023
  • 0 replies
  • 163 views

I'd like to create an image of a product that changes based on different attributes that are selected beside it, like how you'd see on an ecommerce product page. It's just a prototype, so I don't need it to have any functionality beyond just allowing someone to customize the image.

 

For my 2 attribute selections, I have checkboxes with toggle states:

  • "Cabinet Colour" selection of White or Black
  • "Handle Colour" selection of Silver and Gold

 

I also have the 4 different images for each unique combination of atributes, which will appear beside the checkboxes.

 

How do I make the visibility of an image triggered by specific combinations of attributes? The logic would be:

  • If the White and Silver boxes are in toggle states, then show visibility of Image 1 White and Silver
  • If the White and Gold boxes are in toggle states, then show visibility of Image 2 White and Gold
  • If the Black and Silver boxes are in toggle states, then show visibility of Image 3 Black and Silver
  • If the Black and Gold boxes are in toggle states, then show visibility of Image 4 Black and Gold

 

Thanks in advance!

    This topic has been closed for replies.