Shopify（ショッピファイ）でよく使う Liquid のテンプレートタグまとめ

Shopify（ショッピファイ）のテンプレート言語『Liquid』で、よく使うけど忘れてしまいがちな構文タグをまとめています。

公式リファレンスおよび各チートシートはブックマーク必須です。

公式リファレンス Liquid template language reference
チートシート Shopify Cheat Sheet

基本の Liquid 構文タグ

コメントを記述する

Shopify テーマのカスタマイズは、後からでも作業過程がわかるようにコメントを残しておく is 大事。

{% comment %}
コメント内容
{% endcomment %}

独自に作成したテンプレートファイルを読み込む

ヘッダーやフッター、商品ページ等にソースコードなどを追記したい場合は、元のテンプレートファイルに直接記述するよりも独自のファイル（snippet ファイル）を作成し、そちらでパーツごとに管理した方が扱いやすくなります。

オリジナルのテンプレートファイルの作成は、テーマ > コードの編集 から Snippets フォルダ内の 新しいsnippetを追加する から行います。

なお、ファイル名を myTemp-header.liquid や myTemp-footer.liquid といった形でファイル名前半部分を統一しておくと、後から探しやすくなります。

作成したテンプレートファイルを任意の場所で呼び出すには、以下のように記述します。

{% include 'myTemp-header' %}

サイト URL を表示する

https://sample.com といった具合に、サイトのルートページの URL が出力されます。

{{ shop.url }}

タグ一覧を表示する

たとえば、すべてのコレクションページにタグ一覧を表示させたい場合は、以下のようにリンク付きのリスト形式で出力すると良いですね。

商品個別ページで、その商品が属するタグを表示させたい場合のソースコードは後述しています。

<ul>
  {% for tag in collection.all_tags %}
  <li><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
  {% endfor %}
</ul>

ページ関連の Liquid 構文タグ

ページの handle を出力

ページの handle とは、 sample.com/pages/hoge の hoge が該当します。
ワードプレスのパーマリンクに相当する部分です。

{{ page.handle }}

この Liquid タグは、ページによって表示を切り分けたい時に条件分岐させると大いに活用できます。
詳細は下記のトピックにまとめています。

Shopify（ショッピファイ）で使える Liquid の便利な条件分岐

Shopify（ショッピファイ）でサイトを運営していて、特定のページだけ表示を切り替えたい時は Liquid の条件分岐を利用すれば便利です。たとえば、特定の商品ページだけに追加情報を記述したり、特定のページだけ head 内に ...

商品ページ関連の Liquid 構文タグ

Shopify の商品ページに関するリファレンスは下記を参照。

参照 The product object

商品が属するタグを表示

商品個別ページで、その商品が属するタグを表示させたい場合は、以下のようにリンク付きのリスト形式で出力すると良いですね。

<ul>
  {% for tag in product.tags %}
  <li><a href="/collections/all/{{ tag }}">#{{ tag }}</a></li>
  {% endfor %}
</ul>

品番を表示する

SKU に登録した商品品番を表示させたい場合は以下のように記述します。

{{ variant.sku }}

バリエーションのある商品の場合は、以下のようにバリエーション名を品番を定義リストで表示してあげるとスマートです。

<dl>
  {% for variant in product.variants %}
  <dt>{{ variant.title }}</dt>
  <dd>{{ variant.sku }}</dd>
  {% endfor %}
</dl>

バリエーションの有無が混在している場合は以下のように条件分岐してあげます。

<table>
{% if product.has_only_default_variant == true %}
  <tr>
    <th>品番</th>
    <td>{{ variant.sku }}</td>
  </tr>
{% else %}
  <tr>
    <th>品番</th>
    <td>
      <dl>
        {% for variant in product.variants %}
        <dt>{{ variant.title }}</dt>
        <dd>{{ variant.sku }}</dd>
        {% endfor %}
      </dl>
    </td>
  </tr>
{% endif %}
</table>

product.has_only_default_variant は、商品バリエーションが無ければ true を返します。

カスタムフィールドで登録した複数の画像ファイルを配列で取り出して表示する

<ul>
  {% for img in product.metafields.pdctImage.pdctImage-key %}
  <li><img src="/img/{{product.handle}}-{{img}}.jpg" alt="{{product.title}}"></li>
  {% endfor %}
</ul>

たとえば、商品によって掲載画像点数が異なる場合は、用意するフィールドの数を定めることができません。
そういった場合は、Repeatable フィールドを使えば任意でファイル数の可変ができるので扱いやすいです。

Repeatable フィールドを使う際の注意点は、メタフィールドの Value Type を JSON string 形式にしておくことです。

配列型にしておき、 for ループで１つずつ取り出すといった形です。

参照 ACF – Unrepeatable vs Repeatable

なお、フィールドは１つだけど、フィールドが空欄でない場合だけ表示したい時は、下記のような記述をすればいいですね。

{% unless product.metafields.Acme134-instructions.Wash == blank %}
  Wash: {{ product.metafields.Acme134-instructions.Wash }}
{% endunless %}

参照 Overview Advanced Custom Field- ArenaCommerce,

余談ですが、 unless は if の否定形で使うようですが、ワードプレス出身の筆者はあまり馴染みがないため下記のような書き方がしっくりきます。

{% if product.metafields.Acme134-instructions.Wash != blank %}
  Wash: {{ product.metafields.Acme134-instructions.Wash }}
{% endif %}

参照 Control flow tags

ブログ関連の Liquid 構文タグ

ブログの公開日時を表示

{{ article.published_at | date: "%Y.%-m.%e" }}

日時のフォーマットをカスタマイズしたい場合は、下記を参照。

参考 Class： Time (Ruby 2.7.1)

Shopify Liquid で使える便利な条件分岐については下記のトピックにまとめていますので、あわせてどうぞ！