A way to replace Horizon's standard variant picker with a block that shows a product photo on each option. Turns plain text choices into clear, photo-backed ones.
How to add it
◆Shopify admin → Online Store → Themes → "…" → Edit code
◆Create a new file variant-picker-images.liquid in the blocks folder and paste the code you get after purchase, then save
◆Theme editor → product page template → "Product information" → "Details": remove the existing "Variant picker" block and add "Image variant picker"
The image is simply that variant's own product photo — no extra image upload needed.
Settings
◆Image and text layout: switch between vertical (image on top, default) and horizontal (image on the left).
◆Which option shows images: for products with multiple options (color, size, etc.), pick only the option that actually has image variation (usually color). The other options render as plain buttons.
Fine-tuning the layout
When option names are long, each option ends up a different width. The "Option width" setting lets you even them out or control how many columns they wrap into. In every mode, text that doesn't fit wraps automatically.
◆Fit to content (default): each option is only as wide as its text. Use "Block alignment" to align them left, center, or right.
◆Stretch to full width: options stack one per row. Use "Alignment inside the option" to place the image and text left, center, or right.
◆Custom size: set the width anywhere from 20 to 80%. At 50%, for example, you get two columns. The gap between options is adjustable from 0 to 40px and is subtracted automatically, so you get exactly the column count you asked for.
◆After purchase, you'll get the full code (the complete Liquid file) for this image variant picker.
