Show only the images that match the selected color.

Map product images to color variants directly inside the Shopify product editor. No JSON, no spreadsheets, no AI guessing.

What it does

When a customer selects a color on the product page, only the images mapped to that color are shown, plus any image that has not been tagged (color-agnostic detail shots, lookbook frames, etc.).

How to use it

  1. Open any product with color variants. In the product page sidebar you will find the Variant Images block: a quick dashboard with stats (colors mapped, images assigned, unassigned).
  2. Click Open editor in the block (or pick Map images to colors from the More actions menu at the top of the page) to launch the full-screen editor.
  3. The editor shows color tabs at the top and the image grid below. Pick a color, then click thumbnails to assign or unassign them to that color. Filter the grid with All / Assigned / Unassigned to focus on what matters.
  4. Click Save. The editor closes automatically and the storefront reflects the change immediately on the next page load.
Images that are already a native Shopify variant image for the active color are highlighted (💡 icon, info border) so you can recognise them at a glance. Images that are the native variant image for a different color show a quick ↗ ColorName button to jump to that tab. Nothing is auto-imported — the system suggests, you decide.

Images left unassigned to any color stay visible for every color (color-agnostic detail shots, lookbook, packshots).

Where the data lives

The mapping is stored on the product as a custom JSON metafield (custom.color_images). The storefront theme reads it directly. No external database, no app dependency on the frontend.

Mostra solo le immagini del colore selezionato.

Assegna le immagini del prodotto alle varianti colore direttamente dal product editor Shopify. Niente JSON, niente foglio Excel, niente AI che indovina.

Cosa fa

Quando il cliente seleziona un colore sulla scheda prodotto, vengono mostrate solo le immagini assegnate a quel colore, più quelle senza tag colore (foto di dettaglio, lookbook, ecc.).

Come si usa

  1. Apri un prodotto con varianti colore. Nella sidebar trovi il blocco Variant Images: una dashboard rapida con le statistiche (colori mappati, immagini assegnate, non assegnate).
  2. Clicca Apri editor nel blocco (oppure scegli Mappa immagini ai colori dal menu Altre azioni in cima alla pagina) per aprire l'editor a tutto schermo.
  3. L'editor mostra le tab colore in alto e la griglia immagini sotto. Scegli un colore, poi clicca le miniature per assegnarle o rimuoverle da quel colore. Filtra la griglia con Tutte / Assegnate / Non assegnate per concentrarti su ciò che conta.
  4. Clicca Salva. L'editor si chiude da solo e il sito riflette il cambio al prossimo refresh della scheda prodotto.
Le immagini che sono già variant image native Shopify per il colore attivo sono evidenziate (icona 💡, bordo info) per riconoscerle a colpo d'occhio. Le immagini che sono variant image native di un altro colore mostrano un bottoncino ↗ NomeColore per saltare a quella tab. Nessun import automatico: il sistema suggerisce, decidi tu.

Le immagini lasciate senza assegnazione restano visibili per tutti i colori (foto di dettaglio neutre, lookbook, packshot).

Dove vivono i dati

La mappatura è salvata sul prodotto come metafield JSON custom (custom.color_images). Il tema storefront lo legge direttamente. Nessun database esterno, nessuna dipendenza app sul frontend.