自作商品一覧に商品のオプション画像させる、最もシンプルなLiquidコードを紹介いたします。ただし、１つのオプションしか持たない商品に使用を推奨します。
本サイトでは以前、自作で「特定コレクションの商品一覧」を作成する手順を、2回に分けて紹介しました。
Shopify 自作で「商品一覧」を作る！カスタマイズ画面で簡単に指定できるスキーマ設定
Shopify 自作で「商品一覧」を作る！HTMLとLiquidの書き方を解説
また商品一覧に「ディスカウント前後の金額」「割引率」を表示させる手法について解説した記事も先日公開しております。
商品一覧に「ディスカウント前後の金額」「割引率」を表示させたい
今回はこれらに加え、商品のオプション画像させる、最もシンプルなLiquidコードを紹介いたします。
メリット
商品一覧に各商品のバリエーション画像を設置する事で、最も期待されるメリットは、ユーザー体験を向上だと思います。
顧客が購入前に異なるオプション(色やデザイン)を視覚的に把握しやすくなるので、提供されている選択肢が一目で分かり、購入を促進します。
前提
オプションが2つ以上の場合、たとえば、
・色
・サイズ
だと、2つのオプションが組み合わせられた形で１つのバリエーションになります。
・赤/Mサイズ
・赤/Lサイズ
・青/Mサイズ
・青/Lサイズ
もちろん、バリエーションを成すオプションの数に制限はありません。
ここで紹介するサンプルコードは、バリエーションの情報を取得し、表示するためのLiquidコードです。
そのため、1つのオプションしか持たない商品に使用することを推奨します。（オプションが2つ以上の場合については、後述します。）
サンプルコード
まず、サンプルコードを見てみましょう。
{% for variant in product.variants %}
<img src="{{ variant.image.src | img_url: 'medium' }}" alt="{{ variant.title }}">
{% endfor %}※商品一覧の中に挿入するコードなので、コレクション指定と商品ループのliquidコードは省略しています。
①まずfor文を使い、商品のバリエーションを1個ずつ取り出し処理します。
②バリエーションの画像のURLを取得するLiquidオブジェクトを使用し、画像を表示させます。
③バリエーションのタイトルを取得するLiquidおぶじゃを使用し、画像のalt属性を作成します。
オプションが複数ある場合
では、「色」「サイズ」「男/女」など、オプションが複数ある場合、特定のオプションの画像を商品一覧に表示させる手法について考察したいと思います。
表示/非表示
もし、上記のようなシンプルなコードで実装したいけど、商品によってはオプションの数が１つのものもあれば、２つ以上のものもある‥という場合は、選択的に表示/非表示の仕組みを作るのもいいと思います。
表示/非表示を制御するのは、メタフィールドの真偽値 (boolean)で実装できるかと思います。
{% if product.metafields.custom.boolean_value == true %}
<!-- Trueの処理 -->
{% for variant in product.variants %}
<img src="{{ variant.image.src | img_url: 'medium' }}" alt="{{ variant.title }}" />
{% endfor %}
{% endif %}特定のオプションの画像を表示させる
どうしても全商品一律に「色」など、特定オプションを表示させたい！という場合は、少々複雑なコードになります。
{% assign color_variants = product.options_by_name["色"] %}
{% if color_variants %}
{% for color in color_variants.values %}
{% for variant in product.variants %}
{% if variant.option1 == color %}
<a href="{{ product.url }}?variant={{ variant.id }}">
<img src="{{ variant.image.src | img_url: 'medium' }}" alt="{{ variant.title }}">
{% break %}
{% endif %}
{% endfor %}
{% endfor %}
{% endif %}他の手法としては、商品が持つ1番目のオプション(option1)の画像情報を取得して表示させる方法もあります。
これらの解説は、また別の記事で紹介したいと思います。
