今回は、条件分岐をして特定のページだけにコンテンツを表示させたり、CSSなどのファイルを読み込む方法をご紹介します。

ページを指定する条件分岐の書き方

Shopifyの構築をしていると、「トップページだけに、このコンテンツを表示させたいな！」「このページでは、このコンテンツを非表示にしたいな！」とお客様からご依頼をいただくことが多々あります。
Liquidのif文を使用することで、様々な指定方法が可能です。

if文の基本的な使用方法については以下にまとめているので、併せてこちらもご覧ください。
【Shopify】Liquidを使用した条件分岐式の書き方

TOPページだけにコンテンツを表示させる

TOPページだけに表示させる場合は以下のようにコードを記述します。

{% if template == 'index' %} 
 <p>これはトップページです。</p>
{% endif %}

上記のように記述することで、TOPページだけに「これはトップページです」という文言が表示され、他のページには表示されません。

その他にも以下のような条件分岐が可能です。

トップページとそれ以外のページで文言を出し分ける

{% if template == 'index' %} //トップページなら以下の文言を表示
  <p>これはトップページです。</p>
{% else %} //トップページ以外のページには以下の文言を表示
  <p>これはトップページではありません。</p>
{% endif %}

トップページ以外のページに文言を表示させる

{% if template != 'index' %} 
  <p>これはトップページではありません。</p>
{% endif %}

読み込むファイルをページの条件分岐で指定する

コンテンツの表示非表示のみならず、特定のページだけに特定のファイルを読み込ませることもできます。

以下のコードでは、TOPページだけにindex.cssファイルの読み込み、その他のページにはpage.cssファイルの読み込みをします。

{% if template == 'index' %}
  <link rel="stylesheet" href="{{ 'index.css' | asset_url }}">
{% else %}
  <link rel="stylesheet" href="{{ 'page.css' | asset_url }}">
{% endif %}

その他のページで条件分岐する方法

ページの条件分岐は、ページテンプレートで出し分けを指定しています。
先ほどのコードを例にご説明すると、{% if template == 'index' %}というコードは、Shopifyのファイル構造のtemplateファイル内のindex.jsonで条件分岐を行なっています。
つまり、開いているページのテンプレートがindex.jsonならtrue、その他のページならfalseとなり表示非表示の出し分けを行なっているのです。

そのため、TOPページ以外のページでも条件分岐を行うことが可能です。

コレクションページでの条件分岐

{% if template == 'collection' %}
  <p>コレクションページです。</p>
{% endif %}

ブログページでの条件分岐

{% if template == 'blog' %}
  <p>ブログページです。</p>
{% endif %}

固定ページ(ページ)での条件分岐

{% if template == 'page' %}
  <p>固定ページです。</p>
{% endif %}

その他にも、templateファイルに入っている〇〇.jsonの〇〇の部分を指定することで、デフォルトテンプレート以外に独自追加したテンプレートの指定も可能です。

様々な条件分岐指定

{% if template == '〇〇' %}という指定方法以外にも、if文の応用を利用した条件分岐の指定方法があるので、1つずつご紹介していきます。

特定のワードが入ったページテンプレートで条件分岐

先ほどからご紹介している{% if template == '〇〇' %}というコードは、完全一致の条件分岐です。
例えば、デフォルトの'collection.json'の他に、独自で追加した'collection.new-arrival.json'や'collection.sale.json'などのファイルが存在した場合{% if template == 'collection' %}を実行しても、'collection.new-arrival.json'や'collection.sale.json'にはコンテンツが表示されません。

elseを使用して全てに表示させることも可能ですが、コードが冗長になってしまうためif文のcontainsの使用がおすすめです。
以下は、collectionというワードが入ったテンプレート全てにコンテンツを表示させるコードです。

{% if template contains 'collection' %}
  <p>collectionのワードが入ったテンプレートページです。</p>
{% endif %}

上記のコードを記述することで、デフォルトの'collection.json'、追加したcollection.new-arrival.json'、'collection.sale.json'の全てに「collectionのワードが入ったテンプレートページです。」という文言が表示されます。

ページのパスで条件分岐

ページのパスを使用した条件分岐も可能です。
if文の書き方はこれまで出てきたものと同じですが、request.pathというオブジェクトを使用して条件分岐を行います。
request.pathは現在のページへのパスを返してくれるオブジェクトです。

以下のコードでは、'/404'というパスのページだけに「ページが存在していません。」という文言を表示します。

{% if request.path  == '/404' %}
  <p>ページが存在していません。</p>
{% endif %}

先ほどご紹介したcontainsを併せて使用することもできます。
以下のコードでは、パスに'/policies'というワードを含むページだけに「ポリシーページです。」という文言を表示します。

{% if request.path contains '/policies' %}
  <p>ポリシーページです。</p>
{% endif %}

まとめ

ページテンプレートに条件分岐を使用して、表示内容を切り替えるというのは実務でもよく使うので、この記事が少しでもお役に立てていたら嬉しいです。
その他にも、{% if △△ == '〇〇' %}の△△の部分に'collection.handle'や'product.handle'などのオブジェクトを利用することで様々なページの条件分岐ができますので、ぜひお試しください！