Select what variant image is showing for the product

To give you context. The products come in color variants (a product has a number of variants, where variant is a WIX concept) and the shop allows to filter per color via the use of collections. While the products are filtered by color, I want each product to show up with the image corresponding to the color variant, but instead it is showing up with some default image of the product.

I think there is no way to solve the problem without some custom code. I do have coding skills, however I don’t know where to start. I tried the following:

Product object/element: I tried getting at it by manipulating the objects corresponding to the displayed products. However, I don’t know how to find them. The api docs don’t have a Product element. So the search from the api docs died there.

Going at the problem from the Editor side, the products display in a widget named “Shop”, with id “#productGallery1”. I could not find “Shop” in the api docs. I could not find any docs for it. Presumably this is some widget component, but does it have any api?

Next idea was try to inspect the elements/objects and see what can be done with them. I tried using $w(“#productGallery1”) in the chrome developer console, but $w was not defined. Moreover, I found there is no element in the DOM with id “productsGallery1”, so no clue what that id corresponds to then.

I’m out of ideas, perhaps someone can help here.

Hello.

You can get a product’s available variants based on the specified option choices using getProductVariants( ). To learn more check out our API: https://www.wix.com/corvid/reference/wix-stores.html#getProductVariants

You can click here to learn more about the Stores/ Products collection.

Good luck!

I don’t see how that function helps me. I need to modify the images displayed in the product gallery.