Advanced Shopify Liquid Techniques

Liquidの基本構文（オブジェクト・タグ・フィルター）がわかってくると、「もっとこういう表示制御がしたい」「コードをスッキリ書きたい」という欲が出てきます。

この記事では、条件分岐・ループ・フィルターの 応用的な使い方 にフォーカスして、実務で役立つテクニックをまとめました。Liquidの基礎がまだ不安な方は、先に Liquid入門ガイド を読んでおくと理解がスムーズです。

条件分岐の応用テクニック

if / else だけでも多くのことができますが、条件が複雑になると読みにくくなりがちです。ここでは実務で頻出するパターンを紹介します。

unless で否定条件をシンプルに

「〜でないとき」を if で書くと != が必要ですが、unless を使うと意図が明確になります。

{% unless product.available %}
  <span class="badge badge--soldout">売り切れ</span>
{% endunless %}

これは {% if product.available == false %} と同じ意味ですが、unless のほうが英語の語順に近く、コードの意図が伝わりやすいです。

case / when で多分岐をスッキリ書く

商品タイプや顧客タグなど、分岐先が3つ以上あるときは case / when が便利です。

{% case product.type %}
  {% when 'Tシャツ' %}
    <p>サイズガイドはこちら</p>
  {% when 'アクセサリー' %}
    <p>素材：ステンレススチール</p>
  {% when 'ギフトカード' %}
    <p>有効期限はありません</p>
  {% else %}
    <p>商品詳細をご確認ください</p>
{% endcase %}

出典：Shopify.dev - Liquid tags: case

複数条件の組み合わせ（and / or）

条件を組み合わせるには and（かつ）と or（または）を使います。

{% if product.available and product.price > 5000 %}
  <span class="badge badge--free-shipping">送料無料</span>
{% endif %}

{% if customer.tags contains 'VIP' or customer.tags contains 'wholesale' %}
  <p>会員限定価格が適用されています</p>
{% endif %}

出典：Shopify.dev - Liquid tags: if

for ループの応用テクニック

コレクションの商品一覧を表示する for ループ。基本的な使い方はシンプルですが、知っておくと便利なオプションがいくつかあります。

limit と offset で表示件数を制御する

{% for product in collection.products limit:4 %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
    <p>{{ product.price | money }}</p>
  </div>
{% endfor %}

limit:4 で最初の4件だけ表示されます。さらに offset:2 を加えると、3件目から4件を取得できます。「おすすめ商品」セクションなど、件数を絞りたい場面で重宝します。

forloop オブジェクトを活用する

ループの中では forloop という特別なオブジェクトが使えます。

{% for product in collection.products limit:6 %}
  <div class="product-card {% if forloop.first %}product-card--featured{% endif %}">
    <span class="product-number">{{ forloop.index }} / {{ forloop.length }}</span>
    <h3>{{ product.title }}</h3>
  </div>
{% endfor %}

1. 1

   forloop.index

   1から始まる連番。「No.1」「No.2」のような表示に使えます。
2. 2

   forloop.index0

   0から始まる連番。CSSのグリッド制御やJavaScript連携で便利です。
3. 3

   forloop.first / forloop.last

   最初・最後の要素かどうかを判定します。先頭だけ大きく表示するなどのデザインに。
4. 4

   forloop.length

   ループの総件数。「全6件中」のようなカウント表示に使えます。

出典：Shopify.dev - Liquid objects: forloop

else（空の場合）の処理

ループ対象が0件のとき、何も表示されないのは不親切です。else を使ってフォールバックを用意しましょう。

{% for product in collection.products %}
  <div class="product-card">
    <h3>{{ product.title }}</h3>
  </div>
{% else %}
  <p>このコレクションにはまだ商品がありません。</p>
{% endfor %}

フィルターの応用テクニック

フィルターはパイプ | で繋ぐだけなので手軽ですが、組み合わせ次第でかなり柔軟な表現ができます。

フィルターのチェーン（連結）

複数のフィルターを連結して、段階的にデータを加工できます。

{{ product.description | strip_html | truncatewords: 20 | append: '...' }}

この例では、商品説明から (1) HTMLタグを除去し、(2) 20語に切り詰め、(3) 末尾に「...」を追加しています。

where フィルターで配列を絞り込む

where は配列から条件に合う要素だけを取り出すフィルターです。ループと組み合わせると強力です。

{% assign sale_products = collection.products | where: 'compare_at_price_max', '' %}

{% for product in collection.products %}
  {% if product.compare_at_price > product.price %}
    <div class="sale-item">
      <h3>{{ product.title }}</h3>
      <span class="sale-price">{{ product.price | money }}</span>
    </div>
  {% endif %}
{% endfor %}

map フィルターでプロパティを抽出する

配列から特定のプロパティだけを取り出したいときに使います。

{% assign product_titles = collection.products | map: 'title' %}
{{ product_titles | join: ', ' }}

コレクション内の全商品名をカンマ区切りで出力できます。デバッグや一覧表示に便利です。

出典：Shopify.dev - Liquid filters

assign タグ

{% assign %} は変数を作成するタグです。フィルターの結果を一旦変数に入れておくことで、同じ処理を繰り返し書かずに済みます。可読性の向上にも効果的です。

実務で使える応用パターン

ここまでのテクニックを組み合わせた、実践的なコード例を紹介します。

{% for tag in product.tags %}
  {% case tag %}
    {% when '新着' %}
      <span class="badge badge--new">NEW</span>
    {% when '限定' %}
      <span class="badge badge--limited">限定品</span>
    {% when '人気' %}
      <span class="badge badge--popular">人気</span>
  {% endcase %}
{% endfor %}

{% if product.selected_or_first_available_variant.inventory_quantity <= 0 %}
  <p class="stock-alert stock-alert--out">在庫切れ</p>
{% elsif product.selected_or_first_available_variant.inventory_quantity <= 5 %}
  <p class="stock-alert stock-alert--low">残りわずか（あと{{ product.selected_or_first_available_variant.inventory_quantity }}点）</p>
{% else %}
  <p class="stock-alert stock-alert--ok">在庫あり</p>
{% endif %}

{% if product.metafields.custom.care_instructions != blank %}
  <div class="care-info">
    <h4>お手入れ方法</h4>
    <p>{{ product.metafields.custom.care_instructions }}</p>
  </div>
{% endif %}

応用テクニックを身につけるためのチェックリスト

• unless を使って否定条件をシンプルに書ける
• case / when で3つ以上の分岐を整理できる
• limit / offset でループの表示件数を制御できる
• forloop オブジェクトで要素の位置を判定できる
• フィルターを連結して段階的にデータを加工できる
• where / map で配列を絞り込み・変換できる

まとめ

Liquidの応用テクニックは、知っているだけで日々のテーマカスタマイズのスピードと品質が変わります。最初は「コードが長くて難しそう」と感じるかもしれませんが、パターンを覚えてしまえば組み合わせるだけです。

Shopifyのテーマ開発をもっと本格的に進めたい方は、まず Shopifyの無料体験 からストアを立ち上げて、実際のテーマで練習するのがおすすめです。

出典：Shopify.dev - Liquid reference