最近話題になることが多い海外製ECカートASPの「Shopify」ですが、先日カスタマイズの案件があり、そこで使えそうなものがあったのでメモとして残しておきたいと思います。Shopifyでは商品を登録する際にいろんな関連情報も入力できるのですが、中でも、コレクションと呼ばれる商品のカテゴライズグループ機能と、販売元の設定はうまく使うことでデザインにも活用できます。   Shopifyはカスタマイズも容易で、洗練されたモダンな管理画面が用意されており、これまでのECカートASPにはない、快適なコーディング環境が整っている印象です。ページ自体は「Liquid」と呼ばれるRuby製のテンプレートエンジンを採用しており、独自のテンプレートタグが使えます。 【Liquid template language】 https://shopify.github.io/liquid/   また、商品などの情報はオブジェクトとしてデータを取得でき、それらをページ上に展開することも可能です。Shopifyの開発者向けドキュメントに詳しく載っていますので、こちらをご参考ください。 【Liquid template language reference】 https://shopify.dev/docs/themes/liquid/reference   今回は、コレクションと販売元の情報を使ったカスタマイズのTipを見ていきたいと思います。  

1. 販売元（Vendor name）の出力

商品情報の販売元の値には、productオブジェクトのhandleを使ってアクセスすることができます。変数化しておくことで、ページ上のいろんな箇所に表示させることができます。 【Liquid】

{% assign vendor_handle = product.vendor | handle %}
{{ vendor_handle }}

   

2. 販売元別にコレクションを登録して、そのアーカイブページへのリンク出力

先ほどの販売元を出力する変数を使った応用です。販売元でコレクションを登録しておき、販売元別のアーカイブページURLを出力する方法です。collectionsオブジェクトで販売元の値から配列のインデックスで情報を取得しています。 【Liquid】

{% assign vendor_handle = product.vendor | handle %}
{% assign collection_for_vendor = collections[vendor_handle] %}
<a href="{{ collection_for_vendor.url }}">

  collectionsオブジェクトが取得できないような場面では、コレクションのアーカイブページのルーティングに沿って直接指定する方法が使えます。 【Liquid】

{%- assign vendor_handle = product.vendor | handle -%}
<a href="/collections/{{ vendor_handle }}">

   

3. 販売元別のコレクションに登録されたアイコン画像を出力する

同じく、販売元を出力する変数を使った応用で、コレクションに登録できるアイコン画像を出力します。ここではコレクションのアイコン画像に販売元に関するイメージを登録しておくことで、販売元のアイコン画像として表示させることができます。collectionsのオブジェクトに含まれているimageのキーから画像のURLパスを取得できます。またここでは合わせてサイズ指定もできます。 【Liquid】

{%- assign vendor_handle = product.vendor | handle -%}
{%- assign collection_for_vendor = collections[vendor_handle] -%}
<img src="{{ collection_for_vendor.image | img_url: 'small' }}" alt="Icon">

  今回まとめている方法で、販売元別の商品一覧と、その一覧ページ内で各商品の販売元アイコン画像を表示させることができます。販売元別で商品をカテゴライズする場合には使えるテクニックかと思いますので、ご参考にどうぞ！