Desktop

1200

Breakpoint

June 23, 2026: Variant Images and Variant Selector

Go back

Your product photos now react to the variant.
Pick a product color and the main image switches to that products colored photos.
No reload, nothing to wire up per product.

Three pieces work together:

  • New component: Variant Image. A main product image that listens to the
    shopper's pick. Choose a color and it shows that color's photo
    automatically. Drop it from the Insert tab like any other component.

  • Thumbnail strips in the Variant Selector. The Variant Selector has a
    new Choice Display setting. Switch it to Images and that instance turns
    into a thumbnail strip. Place the selector twice: once as the picker
    (buttons or color swatches), once as the strip. Click a thumbnail and
    the main image swaps while the selected variant stays put.

  • Several images per color. A color can carry its whole set of photos
    now, not just one. The strip shows the selected color's images
    automatically, or the full product gallery when a color has none.

Also shipped:

  • Color swatches respect Choice Width. Size your swatches to match the
    rest of your options.

  • Components keep updating themselves. Reload the plugin and your
    inserted components pick these up automatically. No re-inserting.

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro

_____                                                                 _____
( ___ )---------------------------------------------------------------( ___ )
 |   |                                                                 |   |
 |   |    ________                                                     |   |
 |   |    `MMMMMMM                                   68b               |   |
 |   |     MM    \                                   Y89               |   |
 |   |     MM      ___  __    ___    ___  __    __   ___ ____   ___    |   |
 |   |     MM   ,  `MM 6MM  6MMMMb   `MM 6MMb  6MMb  `MM `MM(   )P'    |   |
 |   |     MMMMMM   MM69 " 8M'  `Mb   MM69 `MM69 `Mb  MM  `MM` ,P      |   |
 |   |     MM   `   MM'        ,oMM   MM'   MM'   MM  MM   `MM,P       |   |
 |   |     MM       MM     ,6MM9'MM   MM    MM    MM  MM    `MM.       |   |
 |   |     MM       MM     MM'   MM   MM    MM    MM  MM    d`MM.      |   |
 |   |     MM       MM     MM.  ,MM   MM    MM    MM  MM   d' `MM.     |   |
 |   |    _MM_     _MM_    `YMMM9'Yb._MM_  _MM_  _MM__MM__d_  _)MM_    |   |
 |___|                                                                 |___|
(_____)---------------------------------------------------------------(_____)

Made in Augsburg by Tim Akihiro