Skip to product information
1 of 1
 

[Horizon] Block to Display Variant Options as Pills on Collection Page Product Cards

[Horizon] Block to Display Variant Options as Pills on Collection Page Product Cards

Applications

  • コレクション編集
View full details

A private block implementation for Horizon theme that displays text-based variant options (size, material, etc.) as pills on collection page product cards — the standard Swatches block only handles color swatches. Add the block to product cards and all variant options appear as tags at a glance.

Variant options displayed as pills on collection page product cards

Variant options block settings in theme editor

Features

  • Add as a "Variant Options" block anywhere in the product card
  • Specify option names to exclude (comma-separated) to avoid duplicating what Swatches already shows
  • Products with a single "Default Title" variant are automatically hidden
  • Customize pill background color, text color, border color, font size, and padding from the theme editor

Files to Add / Edit

blocks/_variant-options.liquid (new file)

blocks/_variant-options.liquid code

blocks/_product-card.liquid (add 1 line near L44)

Add {"type": "_variant-options"} to the blocks array in blocks/_product-card.liquid schema to make the block appear in the theme editor's "Add block" menu.

blocks/_product-card.liquid change

Related: [Dawn] Display Variant Options as Buttons on Collection Page Product Cards

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 3.5.1

blocks/_variant-options.liquid(新規作成)