Shopifyのテーマ開発でよく使用する条件分岐を分類してまとめました。順次追記します。
※網羅したものではありませんので全てのタグは公式のリファレンスをご覧ください。

ページ判定系

トップページか?

(例) https://example.com

{% if template == 'index' %} 
  //トップページです
{% else %}
  //トップページではありません
{% endif %}

ページ(固定ページ)か?

(例) https://example.com/pages/xxx

{% if template == 'page' %} 
  //ページ(固定ページ)です
{% endif %}

コレクションリストページか?

(例) https://example.com/collections

{% if template == 'list-collections' %} 
  //コレクションリストページです
{% endif %}

商品一覧(コレクション)ページか?

(例) https://example.com/collections/xxx

{% if template == 'collection' %} 
  //商品一覧(コレクション)ページです
{% endif %}

商品詳細ページか?

(例) https://example.com/products/xxx

{% if template == 'product' %} 
  //商品詳細ページです
{% endif %}

ブログ記事 一覧ページか?

(例) https://example.com/blogs/news

{% if template == 'blog' %} 
  //ブログ記事 一覧ページです
{% endif %}

ブログ記事 個別ページか?

(例) https://example.com/blogs/news/xxx

{% if template == 'article' %} 
  //ブログ記事 個別ページです
{% endif %}

カートページか?

(例) https://example.com/cart

{% if template == 'cart' %} 
  //カートページです
{% endif %}

ページタイプが●●か?

テンプレート名ではなくページタイプを指定して、特定のページを返します。

【参考】利用できるページタイプ一覧
https://shopify.dev/docs/api/liquid/objects/request#request-page_type

{% if request.page_type == 'index' %}
 //ページタイプ「index」であるトップページです
{% endif %}

テンプレートファイル名に●●というワードを含んだページか?

(例) page というワードを含んだテンプレートを使用したページを判定する
template/page.json
template/page.contact.json
template/page.sample.json

{% if template contains 'page' %}
  //テンプレートファイル名に page というワードを含んだページです
{% endif %}

ページハンドル(パス・URL)が●●か?

ページハンドル(パス・URL)を指定します。

{% if request.path  == '/collections/bag' %}
  //コレクション「bag」のページです。
{% endif %}

{% if request.path  == '/pages/sample' %}
  //ページ(固定ページ)「sample」のページです。
{% endif %}

実例:ページを判定してbodyタグにIDを付ける

handle でページハンドルを取得し、bodyに固有のIDを付与する例です。

{% if handle %}
  // 基本的にはページハンドルをIDに付与します
  {% assign body_id = handle %}
{% elsif template == 'index' %}
  // トップページでは ID front-page とします
  {% assign body_id = 'front-page' %}
{% else %}
  // 例外が発生した場合は ID other とします
  {% assign body_id = 'other' %}
{% endif %}

<body id="{{ body_id | escape }}">

商品情報系

商品が登録されているか?

以下は、商品が登録されていなければ aリンクを無効化しています。

<a
{% if product == blank %}
  role="link" aria-disabled="true"
{% else %}
  href="{{ product.url }}"
{% endif %}
>

商品画像が複数あるか?

スライダー等の機能判定に使用することがあります。

{% if product.images.size > 1 %}
  // 商品画像が2枚以上ある場合
{% else %}
  // 商品画像が1枚の場合
{% endif %}

商品にバリエーションがあるか?

バリエーションの有無によって出しわけます。

{% if product.has_only_default_variant == true %}
  // バリエーションが無い場合
{% else %}
  // バリエーションがある場合
{% endif %}

コレクション情報系

特定のコレクションページか?

(例) コレクション名が bag の場合
https://example.com/collections/bag

{% if collection.handle == 'bag' %}
  //コレクション名が bag の場合
{% endif %}

ユーザー情報系

ログインユーザーか?

{% if customer %}
  // ログインユーザーの場合に表示
{% else %}
  // ログインしていない場合に表示
{% endif %}

以下はメニューバーなどで、リンクを出し分ける例です。

{% if shop.customer_accounts_enabled %}
  {% if customer %}
    <a href="{{ routes.account_url }}">マイページ</a>
  {% else %}
    <a href="{{ routes.account_login_url }}">ログイン</a>
  {% endif %}
{% endif %}

機能判定系

メタフィールドの値が空欄ではないか?

以下は、reviews.rating (ネームスペース.キー) に含まれる value (値) が空欄だった場合の条件分岐の例です。
個人的には、if文の方が感覚的に理解しやすいと感じます。

{% unless product.metafields.reviews.rating.value== blank %}
  {{ product.metafields.reviews.rating.value.rating }}
{% endunless %}

// if と != を使用した別解
{% if product.metafields.reviews.rating.value != blank %}
  {{ product.metafields.reviews.rating.value.rating }}
{% endif %}

補足:{% unless %} ●●ではない/等しくなければ

unless は != (●●ではない/等しくなければ) と同じ意味合いになります。

おまけ1:複数条件の記述例

orやandなどの論理演算子を使用して条件を追加した例です。

{% if template == 'index' or template == 'collection' %}
{% endif %}

{% if template == 'index' or 'collection' %}
{% endif %}

{% if template == 'index' or request.path  == '/collections/bag' %}
{% endif %}

Basics(Liquidの基礎知識)はこちらでも紹介しているので、合わせてご覧下さい。

おまけ2:ページ判定で デフォルトには無い値を条件分岐に使用する・独自の条件を設定する

例えばカスタマイズを多く行なっていて独自のファイルが増えていたり、より詳細な分岐を設定したい場合。{{ template }} で取得できる値を条件分岐に入れることができます。

例えば以下の場合は、{{ template }} で表示される 値が article.staff もしくは blog.staff のページであれば OK! と表示されます。

<script>console.log("{{ template }}");</script>

{% if template == 'article.staff' or 'blog.staff' %} 
<p>OK!</p>  
{% endif %}

【参考】
Liquid reference
https://shopify.dev/api/liquid
Shopify Liquid Cheat Sheet
https://www.shopify.com/partners/shopify-cheat-sheet
Github Shopify/liquid
https://github.com/Shopify/liquid

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Web制作

次の記事

【Shopify】よく使うLiquid テンプレートタグ