【Shopifyテーマカスタマイズ】最初に把握したいLiquidタグとオブジェクト知識まとめ

Shopifyテーマ制作を覚えよう、と公式リファレンスやLiquidの解説を見ても、どこを見て良いか困ってしまいませんか？JavaScriptやphp（WordPress)など、プログラミング言語の経験がないと、説明が難しい・何から学べばよいかわからないの二重苦になってしまいます。

そこで、完全未経験～初心者の方が「まず最初に把握しておきたい」Liquidオブジェクトとタグについての基礎をまとめました。すべてを覚える必要はありません。どんなことをしているのか、どこで調べられるのか、この２つを把握するのが第一歩です。
基礎をおさえつつ、Liquidのコードに慣れていきましょう！

• 準備
• 練習用セクションファイルの作成
• Liquidの{{ }}と{% %}の違いを理解する
• Liquidのオブジェクト(Objects)
• オブジェクトとプロパティ
• Liquidオブジェクトを使ったデータの表示
• Liquidのタグ(Tags)
• 繰り返しタグ（for）
• 条件分岐タグ
• テーマタグ
• 変数タグ
• Liquidのフィルター(Filters)
• よく使うフィルター

準備

練習用セクションファイルにコードを書いて、表示を見ながら進めていきましょう。

Shopifyテーマのコード編集自体初めて、プログラミング言語未経験という方は、先に下記2つの記事をご確認頂くと本記事の内容が理解しやすいです。

Skillhubブログ

Shopifyのテーマセクションを自作する方法【Liquid・JSON未経験者でもできる】

Skillhubブログ

Shopifyテーマに自作ブロックを作成・追加する方法【Liquid・JSON未経験でもできる】

練習用セクションファイルの作成

新規セクションファイル作成

セクションディレクトリ内に、lesson2.liquidを作成してください。
{% schema %}内で、nameとpresetsを記述します。
以下のコードをそのまま貼り付けて頂いてもOKです。

lesson2.liquid

{% schema %}
  {
    "name": "lesson2",
    "settings":[] ,
    "presets": [
      {
        "name": "lesson2"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

作ったセクションを配置する

セクションファイルは、新規作成しただけだと、どこからも確認ができません。
これから記述するコードがどのような結果になるか見られるように、テーマのカスタマイズ画面からlesson2セクションを配置してください。配置する場所はどこでも構いません。

1)ホームページ

2)商品 > デフォルトの商品

現時点では、プレビュー部分でlesson2のセクションは表示されません。
上図のように挿入（配置）だけしておいてください。

Liquidの{{ }}と{% %}の違いを理解する

情報を出力するための{{ }}

Liquidでは{{と}}で変数を囲むことで、その変数の値を出力することが出来ます。
値を出力（表示）する = 二重括弧 {{ }} で囲うです。

lesson2.liquidの1行目に、以下のように書いてください。

lesson2.liquid

{{ shop.name }}

表示を確認してみましょう。
lesson2セクションを配置した位置で、ストアの名前が出力されているはずです。

処理（ロジック）を書く{% %}

Liquidでは{%と%}で囲むと、実行して欲しい処理の指示として認識されます。
{% %}で指示する処理としては、以下が代表的です。

• 繰り返し
• 条件
• 変数の定義
• 別のファイルを読み込む

{% %}内に書いた処理は、ページを表示する際に実行されるものです。
画面上には出力されません。

試しに、lesson2.liquidに書いた {{ shop.name }} を以下のように囲ってみましょう。
1行目のif~ 部分で「ストア名が空ではない場合」という条件をつけています。

lesson2.liquid

{% if shop.name != blank %}
  {{ shop.name }}
{% endif %}

コードの行数は増えましたが、ページの表示は変わりませんね。

Shopify公式ドキュメントでは、こうした{% %}での指示を「Tags」と呼んでいます。
今使ったifなど、よく使うTagsは後記の“Liquidのタグ(Tags)”で紹介します。

Liquidのオブジェクト(Objects)

オブジェクトとプロパティ

オブジェクトとは、プロパティ（KeyとValueのペア）の集合体のことを指します。
Shopifyでのオブジェクトは、Shopifyに登録されているデータをグループ化してまとめたものと考えると分かりやすいです。

例えば、shopというオブジェクトには、ストアの情報（ストア名、所在地、メールアドレスなど）が格納されています。商品情報はproductオブジェクト、ブログの記事情報はarticleオブジェクト…と、それぞれオブジェクトが用意されています。
そして、各オブジェクトの中には、いくつものプロパティがあります。

このプロパティのうち、“値”は表示するページや設定によって異なります。
下図は商品の情報、productオブジェクトのイメージです。

オブジェクトやプロパティという“枠組み”は共通ですが、値は商品ごとに違いますよね。
Shopifyテーマの作成・編集では、この異なっている“値"を呼び出したい（出力したい）ということが多いはずです。

Liquidオブジェクトを使ったデータの表示

オブジェクトの中の、プロパティの値を出力したい場合は、以下のようにドット（ピリオド）でプロパティ名を繋げて記述します。

最初に書いた{{shop.name}}は「shopオブジェクト内の、nameプロパティ」の情報を出力せよ、という指示なのです。

特定のテンプレートのみアクセスできるオブジェクト

Liquidでは{{ }}内にオブジェクトとプロパティを書くことで、登録されている情報を呼び出すことが出来ます。ですが、全てのオブジェクトを呼び出せるわけではありません。

lesson2.liquidで、{% endif %}の次の行に以下の記述を加えてみましょう。

lesson2.liquid

{{ product.title }}

上書き保存して、ストアのホームページと商品ページのプレビューを見てみましょう。

ホームページでは、何も表示されていません。

商品 > デフォルトの商品ページでは、商品タイトルが表示されています。

これが、特定のテンプレートからのみアクセスできるオブジェクトです。
productオブジェクトは、商品ページのtemplate内（ product template ）で使った場合のみ、該当する商品の情報にアクセスして出力することができます。

反対に、最初に書いたshopのように、どのテンプレートを使ったページからでもアクセスできるオブジェクトもあります。どこでも使えるオブジェクトのことを“グローバルオブジェクト（Global Objects）”と呼びます。

オブジェクト、プロパティを調べるには？

Shopifyのシステムには、沢山のオブジェクトがあります。
オブジェクトごとに設定されているプロパティも異なりますし、どのテンプレートで使えるオブジェクトかという問題もありますね。

こうしたオブジェクトやプロパティについては、全て覚える必要はありません。
Shopify公式ドキュメント（shopify.dev）では、オブジェクト名ごとにプロパティの一覧が掲載されています。オブジェクトにアクセス可能なテンプレート等も載っていますので、必要に応じて調べられれば大丈夫です。

上記URLを開いて、左のオブジェクト一覧から「shop」を選んでみましょう。
右側に表示されているボックスのMapをクリック。

Directly accessible in（直接アクセス可能）の下が「Global」になっています。この表示があれば、どのテンプレートからでもアクセスできるグローバルオブジェクトです。

次は、左のオブジェクト一覧から「product」を選んでみます。
Mapの表示が、shopとはかなり違っていますね。

まず、Directly accessible inの下にある、直接アクセス可能なテンプレートはproduct。商品ページのテンプレートからのみ、アクセス・出力が可能と表示されています。

その下、Returned byはダイレクトに呼び出す以外で「値を出力できる」方法です。
例えば、コレクションのページでも、商品のタイトルや画像は出力されていますよね。
これはcollection.products＝ collectionオブジェクトのproductsプロパティ（コレクションに属している全商品）からタイトルなど商品情報を取得しています。

Liquidのタグ(Tags)

Liquidでは{%と%}で囲んで、繰り返しや変数定義などの“処理”を指示します。
この処理を指示するコードをタグ(Tags)と呼んでいます。

Liquid Tagsの一覧は、公式リファレンスにも掲載されています。

以下では、よく使うもの・基本的なものを中心に紹介します。

繰り返しタグ（for）

for文はループ処理（同じ処理を繰り返す）を行うための構文です。
指定したオブジェクトやプロパティ内にある要素を取り出し、繰り返し処理します。
前回の自作ブロック作成で配置したブロックの情報を取り出すのにも使いましたね。

for文を使って、以下のように{{ product.title }}を囲ってみましょう。

“collections.all”は、Shopifyが自動生成している全商品コレクションです。

lesson2.liquid

{% for product in collections.all.products -%}
  <h3>{{ product.title }}</h3>
{%- endfor %}

このfor文は、商品の一覧を表示させるときによく使われています。

コードを保存して、ストアのページを見てみましょう。
ホームページでも、商品ページでも、ストアに登録されている商品のタイトルが並びました。

ちなみに、商品タイトルを呼び出すのに使っている{{ product.title }}。
このproductはオブジェクトのproductではなく、for文を使うときに定義した変数名です。ですので、以下のように変数名を変えても、同じように表示できます。

lesson2.liquid

{% for item in collections.all.products -%}
  <h3>{{ item.title }}</h3>
{%- endfor %}

else

for文のなかで{% else %}というタグを使うと、繰り返し処理をするアイテムが無い場合の処理を記述することができます。

lesson2.liquid

{% for item in collections.all.products -%}
  <h3>{{ item.title }}</h3>
{% else %}
  <p>商品がありません</p>
{%- endfor %}

limit（パラメーター）

forタグには、繰り返しの指定・制御に使えるパラメーターも用意されています。
その中の1つであるlimitを使うと、繰り返す回数を設定できます。

設定方法は、繰り返し処理を行う配列の後にlimit: 繰り返す最大数と記述するだけです。

lesson2.liquid

{% for item in collections.all.products limit: 3 -%}
  <h3>{{ item.title }}</h3>
{% else %}
  <p>商品がありません</p>
{%- endfor %}

使用できるパラメーターは他にもあります。一覧はリファレンスの方をご確認ください。

paginate

一般的にはアイテムがある限り繰り返し処理を行うfor文ですが、Shopifyでは、for文による繰り返しは“1ページで最大50回まで”と定義されています。

paginateタグを使うと、繰り返し処理を複数ページに分割して表示させることが出来ます。
1ページで表示しきれない（50を超えるアイテムがある）場合は、 paginateタグでページを分割して、全アイテムを見られるようにすると良いでしょう。

byの後に1～50までの数値を入れて、1ページでの出力数を設定可能です。
1ページに50件も表示させたくない! という時にも使えますね。

paginateは商品一覧やブログの記事一覧など“一覧”ページを作る場合に使用することが多いです。下記のコードだと、商品の一覧を1ページに12件ずつ表示させます。

{% paginate collections.all.product by 12 %}

条件分岐タグ

条件分岐を使うと「～の時には…する」のように、処理を実行するための条件をつけることができます。

if / elsif

if文は指定した条件を満たしているときに、処理を実行します。
本記事の最初の方に書いた{% if shop.name != blank %}もif文ですね。

「ではない」を意味する != は演算子と言います。
よく使う演算子の例としては、以下が挙げられます。

if文では「elsif」を使うことで、複数の条件と処理を設定することも可能です。

lesson2.liquid

{% if shop.name == "SKILLHUB" %}
  <!-- ショップ名がSKILLHUBの時に実行したい処理 -->
  <p>SKILLHUBのお店です</p>
{% elsif shop.name != blank %}
  <!-- それ以外で、ショップ名が登録されている時に実行したい処理 -->
  <p>{{ shop.name }}</p>
{% endif %}

unless文

unless文はif文の反対、指定した条件が満たされなかった時に処理を実行します。
「ストア名が登録されていたら実行」したい場合は、演算子を変えて以下のように書きます。

case/when

case文は、変数の値を使った条件分岐を作りたいときに使います。
分岐条件に使いたい変数名をcase、分岐を実行する変数の値をwhenで指定します。
前回の自作ブロック作成で、ブロックの種類に応じた表示をさせる為に使いましたね。

下図は、ブロックのtypeプロパティの値に応じて、出力を指定しています。

Shopifyテーマ“Dawn”のセクションファイルでは、この{% case block.type %}の分岐が多用されています。仕組みを理解しておきましょう。

else

elseを使うと、設定した条件に当てはまらない時の処理を指定できます。
if文、unless文、case文、どれでも利用可能です。

lesson2.liquid

{% if shop.name == "SKILLHUB" %}
  <!-- ショップ名がSKILLHUBの時に実行したい処理 -->
  <p>SKILLHUBのお店です</p>
{% elsif shop.name != blank %}
  <!-- それ以外のショップ名が登録されている時に実行したい処理 -->
  <p>{{ shop.name }}</p>
{% else %}
  <!-- どの条件にも当てはまらない時に実行したい処理 -->
  <p>ストア名は考え中です。</p>
{% endif %}

テーマタグ

コメント

{% comment %}と{% endcomment %}で囲われたコードはレンダリングされません。
処理・表示させたくないコードを囲ったり、何の処理かのメモを残したりすることができます。HTMLのコメントアウトと同じイメージです。

練習に書いたfor文（{% for %}から{% endfor %}）までをコメントで囲ってみましょう。
商品名が表示されなくなります。

lesson2.liquid

{% comment %}
  {% for item in collections.all.products limit: 3 %}
    <h3>{{ item.title }}</h3>
  {% else %}
    <p>商品がありません</p>
  {%- endfor %}
{% endcomment %}

render

renderタグは、テーマのスニペット（snippets）ディレクトリにあるファイルを読み込む時に使用します。

Shopifyテーマ（Dawn）に用意されている、アイコンを表示してましょう。

lesson2.liquid

{%  render 'icon-arrow' %}

アイコンが表示されていれば成功です。
よく使うものはスニペットファイル化しておくと、1行で呼び出せるので便利ですね。

renderの活用

renderタグではパラメータ（変数、with、for）を使うことで、スニペットの変数に値を入れることも出来ます。

例えば、“特集コレクション”セクションのファイルfeatured-collection.liquidには「render 'card-product'」という記述があります。
その下、カンマ区切りで、値を渡す変数がいくつか書かれています。

一番上の変数card_productの場合は、productオブジェクトが渡されています。

呼び出されるファイルであるcard-product.liquidの方を見てみましょう。
変数card_productを使って、商品のURLや画像を表示させています。

実際のコードは複雑ですが、やっていることは下図イメージの流れです。

セクションファイル内に書かず、なんで面倒なことを……と思われるかもしれません。
ファイルを別にしているのは、card-product.liquidに書かれている“商品を表示するレイアウト”を他のセクション・他の条件でも使えるようにするため。

検索結果で表示される商品など、同じスニペット（card-product.liquid）を使って商品情報を表示させている箇所はいくつもあります。renderで「ここで表示させたい商品」の情報を渡すことで、柔軟な出力が出来るのです。

変数タグ

Shopifyテーマで使われているliquidでは、assginとcaptureを使って変数や配列を定義することもできます。

assign

assignを使うと、=の右側にある値やオブジェクトなどを代入することができます。
書き方は以下のとおりです。

実際にlesson2.liquidで変数を定義して、使ってみましょう。
1行目に、以下のように書いてみてください。

lesson2.liquid

{% assign myshop = shop.name %}

shopオブジェクトのnameプロパティを、変数「myshop」と定義しています。
その下に書いてあるif文、pタグ内の「shop.name」を「myshop」に変更しても、表示が変わらなければ変数定義が出来ています。

capture

captureでは{% capture 変数名 %}から{{% endcapture %}}までの間に書かれたものを、すべて変数として割り当てることが出来ます。

captureタグの中には、html、liquidオブジェクト、liquidタグなんでも書き込むことができます。htmlによるページレイアウト、liquidタグやオブジェクトを組み合わせたブロックを丸ごと格納できます。関数に近いイメージです。

lesson2.liquidに書いたif文を、captureタグで囲ってみましょう。

lesson2.liquid

{% assign myshop = shop.name %}
{% capture shopname %}
  {% if myshop == "SKILLHUB" %}
    <!-- ショップ名がSKILLHUBの時に実行したい処理 -->
    <p>SKILLHUBのお店です</p>
  {% elsif myshop != blank %}
    <!-- それ以外のショップ名が登録されている時に実行したい処理 -->
    <p>{{ myshop }}</p>
  {% else %}
    <!-- どの条件にも当てはまらない時に実行したい処理 -->
    <p>ストア名は考え中です。</p>
  {% endif %}
{% endcapture %}

この状態で上書き保存して、ページ表示を見てみましょう。
{% capture 変数名 %}から{{% endcapture %}}の間は変数の定義と認識されるので、今まで表示されていたストア名が消えているはずです。

{{ 変数名 }}で、変数に格納されている情報を表示できます。追加してみましょう。

{{ shopname }}

コードを上書き保存して、表示を確認します。
元通り、ストア名が表示されていたら、変数「shopname」の呼び出し成功です。

Liquidのフィルター(Filters)

Liquid フィルターは、Liquidコードの出力・表示を変更するために使用します。
{{ }}内で、パイプ文字（|）の後に入力します。

Shopifyで使えるフィルターは多くあります。
オブジェクトなどと同じく、すべて覚えるというのは現実的ではありません。公式リファレンスで、必要な時に調べられれば良いでしょう。

よく使うフィルター

フィルターの中でも、Media filtersとMoney filtersの２つは利用頻度が高いです。
lesson2.liquidで {% for items ～ を囲っているコメントアウトを外して、以下2つの呼び出しを追加してみましょう。

• featured_image（商品に登録されている最初の画像）
• price_min（最も安い価格）

lesson2.liquid

{% for item in collections.all.products limit: 3 %}
  <h3>{{ item.title }}</h3>
  {{ item.featured_image }}
  {{ item.price_min }}
{% else %}
  <p>商品がありません</p>
{%- endfor %}

表示を確認すると、画像部分はパスの文字列、価格部分は桁数が多く表示されています。

画像をimgタグで出力するために、Media filters（ image_urlと image_tag）を加えます。

{{ item.featured_image | image_url: width: 200 | image_tag }}

価格を日本円表示にすには、Money filters（money）を加えます。

{{ item.price_min | money }}

liquidのフィルターによって、表示が変わりました。
こんな感じでフィルターを使います。フィルターは「状況に応じて」というところも多いです。時間のある時に、リファレンスやDawnのファイル記述を見てみると勉強になるでしょう。