2021/03/17 (更新日: 2021/03/20)

【Shopify学習】Liquidを使ったテーマカスタマイズ
【条件分岐】

PROGRAMMING Shopify

Shopify エンジニア

Shopifyでテーマをカスタマイズして、コレクションページや商品ページに、特定の場合だけバナーを表示させるシステムを作成したいなー。どうやってコードを書けば良いのだろー。

こういった疑問に答えます。

この記事の内容

手順① 表示させたいバナーファイル作成
手順② 表示させたいバナーファイルを読み込ませる方法

手順③ 表示させたいパーツを条件分岐で操作して特定の場合に表示
条件分岐まとめ

この記事を書いている僕は、2020年からShopifyエキスパートで働いている現役フロントエンドエンジニアです。

Liquidコードをゴリゴリ書いてShopifyのテーマ開発、編集をしているので、実務で習得したスキルをアウトプットしていきます。少しでもお役に立てればと。

今回は、Tシャツコレクション（カテゴリー）に属する商品の商品ページのみに独自バナーパーツを表示させるという実装を行います。

表示させたいバナーファイル作成

まず、新しいバナーのファイルを作成します。

今回は、管理画面上からの更新を想定せず、シンプルに独自パーツ（バナー）を作成を行うので、スニペットで作成します。

管理画面のコードを編集から、新しいスニペットを追加するを選択してbannerと入力します。

そうすると、baner.liquidが作成されます。

※補足

セクションとスニペットの違い

この違いは、管理画面のカスタマイズから写真を変えたり、文章を変えたり出来るファイルがセクション。出来ないのが、スニペットになります。SVGとかもファイルに出来るので、スニペットで作成することが多いです。

表示させたいバナーファイルを読み込ませる方法

それでは、表示させたいバナーファイルを読み込ませる記述を行っていきます。

今回は、「Tシャツコレクション（カテゴリー）に属する商品の商品ページのみに独自バナーパーツを表示させる」ので、載せるところは、商品ページ。

なので、商品ページのテンプレートを確認します。

product.liquidがあると思うので、そこに記述するか、テーマによっては

{% section ‘product-template’ %}

を記述されている時は、セクションの中のproduct-template.liquidのコードのところに、独自バナーパーツファイルを貼り付けます。

貼り付け方は、

{% include 'banner' %}

になります。

記述ができれば、バナーがうまく表示されていることを確認します。

手順③ 表示させたいパーツを条件分岐で操作して特定の場合に表示

次に、特定の商品タイプのバナーパーツを表示させるという条件分岐の記述を行います。

{% include 'banner' %}

を表示させるのに、条件分岐（if文）を記述して前後で挟みます。

今回は、Tシャツのタイプのみに表示させるので、

{% if product.type == "Tシャツ" %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

例えば、商品タイプがスカートの場合に表示させるバナーだとすると、

{% if product.type == "スカート" %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

と記述します。

次は、タグの条件分岐の記述方法を説明します。

タグの場合は、上記のtypeではなく、tagに変更します。

同じタグがTシャツの場合は、

tag = 〇〇として一致したら表示することになります。

{% if product.tag == "Tシャツ" %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

になります。

これが、商品のタイプやタグではなくて、コレクションのタイプであれば、

{% if collection.type == "Tシャツ" %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

コレクションのタグであれば、

{% if collection.tag == "Tシャツ" %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

応用していくと、コレクションのタイプやタグではなくて、コレクションのタイトルを指定するのであれば、

{% if collection.title == 'Tシャツ' %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

コレクションのタイトルではなく、url（ハンドル）を指定するのであれば、

{% if collection.handle == 'tshirts' %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

覚えておきたい条件分岐

イコールの場合　＝＝
除外する場合　！＝
どちらかの場合 or
両方含む場合 and

タグが赤を含む商品がコレクションページにある場合に表示させるタグはこのようになる

{% if collection.tag == '赤' %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endif %}

タグに赤を含まない商品がコレクションページにある場合に表示させるには、

{% unless collection.tag == '赤' %}
{% include 'banner' %}　⇦ ここに表示させたいものを記述
{% endunless %}

と記述するとOKです( ´∀｀)

条件分岐まとめ

手順③ 表示させたいパーツを条件分岐で操作して特定の場合に表示

コレクションデータや商品データの連動を伴ったシステマチックなサイト運営が出来るので、

いろいろ試して、カスタマイズの幅を広げて、ECサイト運用を行いやすいようにしてみてください。

Liquidの学習方法を知りたい人向けの記事

Liquidの基本構文を知りたい人向けの記事

Liquid Shopify

【Shopify学習】Liquidを使ったテーマカスタマイズ【条件分岐】

手順① 表示させたいバナーファイル作成

※補足

表示させたいバナーファイルを読み込ませる方法

手順③ 表示させたいパーツを条件分岐で操作して特定の場合に表示

次は、タグの条件分岐の記述方法を説明します。

条件分岐 まとめ

RELATED

【Shopify学習】Liquidを使ったテーマカスタマイズ
【条件分岐】

条件分岐まとめ