Skip to product information
1 of 1
Published:2026.08.08

[Horizon] Replace the standard variant picker with a new image-enabled block

[Horizon] Replace the standard variant picker with a new image-enabled block

Applications

  • 商品情報管理・編集
View full details

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.

Result: a product photo shown on each option


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"

How to add it: remove the existing picker and add the new block in the same spot

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).

Settings: image and text layout

◆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.

Settings: choosing which option shows images


◆After purchase, you'll get the full code (the complete Liquid file) for this image variant picker.

After making a purchase (all items are ¥0), you will be able to view the sample code.

If you have already made a purchase, please login here.

Sample Codes

Test Theme :Horizon 4.1.1

blocks/variant-picker-images.liquid(新規作成)