Variant images & gallery
Show a main product image that swaps on color pick, plus a thumbnail strip shoppers can click.
Updated:
Framix has two components for product images: the Variant Image (the big main image) and the Variant Selector (for picking options). The Variant Selector can show pictures too, so you place it twice: once as the option picker, once set to image mode as a clickable thumbnail strip. Pick a color and the main image plus the strip show that color’s photos. Click a thumbnail and the main image swaps while the selected variant stays put.
The CMS fields it uses
Two fields sync from Wix automatically, so there is nothing to prepare per product. You only bind them:
Variant Image Map, the photos that belong to each color.
Gallery Data, the product’s full image gallery.
Step 1: Add the main image (Variant Image)
DO: From the Insert tab, drag Variant Image onto your product page.
DO: Bind Wix Product ID to the CMS, the same field the Variant Selector uses.
DO: Bind Variant Image Map to the Variant Image Map CMS field.
DO: Bind Fallback Image to the product’s main image field. It shows before a selection and for any choice without its own photo.
Set Fit to Cover, Contain or Fill to taste.
Step 2: Add the option picker (Variant Selector)
DO: Insert Variant Selector and bind its Wix Product ID to the same CMS field. This is the picker the shopper uses to choose a color or size. See the Buy Button and Variant Selector article for the full wiring.
Step 3: Add the thumbnail strip (Variant Selector in image mode)
DO: Insert Variant Selector a second time.
DO: Set Choice Display to Images. The instance turns into a thumbnail strip.
DO: Bind Variant Image Map and Gallery Data to their CMS fields.
Size the tiles with Tile Size and round them with Tile Radius.
How it behaves
Pick a color in the picker: the main image and the strip switch to that color’s photos.
Click a thumbnail: the main image swaps to it and the selected variant stays put, it does not deselect.
The strip fills itself: it shows the chosen color’s photos, or the full product gallery when a color has none or before anything is picked.
Style notes
Fit controls how the Variant Image fills its frame (Cover crops, Contain letterboxes, Fill stretches).
Tile Size and Tile Radius style the strip.
Choice Width now also sizes color swatches, so swatches and buttons can match.
When it goes wrong
The strip or main image is empty: check that Variant Image Map (and Gallery Data on the strip) are bound, and that Wix Product ID points at the same product on every piece.
The image does not swap on pick: the Variant Image and the Variant Selector must share the same Wix Product ID.
Nothing shows for a product: that product has no variant photos in Wix yet. The strip falls back to the full gallery and the Variant Image shows the fallback.