Introduction to Shopify Liquid - Essential Knowledge for Theme Customization

Shopifyのテーマエディターで色やフォントを変えるのは簡単です。でも「商品ページに在庫数を表示したい」「セール品だけバッジをつけたい」「特定の条件で表示を切り替えたい」となると、テーマエディターだけでは限界があります。

ノーコードで十分なこともありますが、やはりみなさんそれぞれ自分はこういうカスタマイズがしたいなど思うところはあるのではないでしょうか。
確かにShopifyのテーマの豊富さはすごいですが、やはりみんな同じだと個性が出ません。やはり自分好みのカスタマイズをしたいですよね。 そこで必要なのが Liquid という言語の知識です。

Liquidはプログラミング言語といっても、HTMLが少しわかれば読める程度のシンプルさです。
この記事では、Liquidの基本構文からよく使うコード例、テーマファイルの構造まで、コード初心者でもわかるように順番に解説していきます。

Liquidとは？

Shopifyが採用しているオープンソースのテンプレート言語です。HTMLの中に Liquid のコードを埋め込むことで、商品名・価格・在庫状況などのデータを動的に表示できます。Rubyで書かれていますが、Rubyの知識は不要です。

出典：Shopify.dev - Liquid reference

Liquidを学ぶメリット

テーマエディターだけでも多くのカスタマイズはできます。それでもLiquidを覚える価値がある理由を整理しておきます。

正直なところ、ストアオーナーが全員Liquidを覚える必要はありません。ただ「基本的な読み方」を知っておくだけで、テーマの挙動を理解したり、ちょっとした修正を自分で行えるようになります。

Liquidの3つの基本要素

Liquidの構文は大きく 3つの要素 で成り立っています。これさえ押さえれば、テーマのコードを読む力がつきます。

1. 01

   オブジェクト（Objects）

   二重波括弧 {{ }} で囲まれた部分です。Shopifyのデータ（商品名、価格、ストア名など）を画面に出力します。

2. 02

   タグ（Tags）

   {% %} で囲まれた部分です。条件分岐やループなどのロジック（処理の流れ）を記述します。画面には直接表示されません。

3. 03

   フィルター（Filters）

   オブジェクトの出力を加工するための仕組みです。パイプ | で繋いで使います。価格のフォーマットや文字列の変換などに使います。

出典：Shopify.dev - Liquid basics

それぞれ具体的なコードで見ていきましょう。

オブジェクト — データを表示する

オブジェクトは、Shopifyが持っているデータを画面に表示するための仕組みです。

{{ product.title }}
{{ product.price | money }}
{{ shop.name }}

product.title と書けば商品名が、shop.name と書けばストア名が表示されます。ドット . の前がオブジェクト、後ろがプロパティ（属性）です。

タグ — ロジックを組み立てる

タグは画面に直接表示されず、「こういう条件のときだけ表示する」「商品を繰り返し表示する」といった処理を記述します。

条件分岐（if）の例：

{% if product.available %}
  <span class="in-stock">在庫あり</span>
{% else %}
  <span class="sold-out">売り切れ</span>
{% endif %}

ループ（for）の例：

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

出典：Shopify.dev - Liquid tags: if

フィルター — 出力を加工する

フィルターはパイプ | でオブジェクトの後ろに繋げて使います。複数のフィルターを連結することもできます。

{{ product.title | upcase }}
{{ product.price | money_with_currency }}
{{ product.description | strip_html | truncate: 100 }}
{{ "now" | date: "%Y年%m月%d日" }}

テーマファイルの構造を知る

Liquidのコードを編集するには、テーマのファイル構造を理解しておく必要があります。Shopifyのテーマは以下のようなディレクトリ構成になっています。

テーマ/
├── layout/        … 全ページ共通の枠組み（theme.liquid）
├── templates/     … ページタイプごとのテンプレート（JSON形式）
├── sections/      … 再利用可能なセクション（Liquidファイル）
├── snippets/      … 小さなコード部品（パーツの再利用）
├── assets/        … CSS・JavaScript・画像
├── config/        … テーマ設定ファイル
└── locales/       … 多言語翻訳ファイル

出典：Shopify.dev - Theme architecture

出典：Shopify Help Center - Theme structure

実践で使えるコード例

ここからは、わたしが実際のストア構築でよく使うLiquidコードを紹介します。コピーして使えるので、ぜひ試してみてください。

セール価格の表示

商品にセール価格（compare_at_price）が設定されている場合だけ、元の価格と割引後の価格を両方表示するコードです。

{% if product.compare_at_price > product.price %}
  <span class="original-price">
    <s>{{ product.compare_at_price | money }}</s>
  </span>
  <span class="sale-price">
    {{ product.price | money }}
  </span>
  <span class="sale-badge">SALE</span>
{% else %}
  <span class="regular-price">
    {{ product.price | money }}
  </span>
{% endif %}

在庫数の表示

在庫が少なくなったときだけ「残りわずか」と表示する例です。

{% if product.selected_or_first_available_variant.inventory_quantity <= 5
  and product.selected_or_first_available_variant.inventory_quantity > 0 %}
  <p class="low-stock">
    残り{{ product.selected_or_first_available_variant.inventory_quantity }}点です
  </p>
{% endif %}

コレクション内の商品をループ表示

コレクション（カテゴリ）に属する商品を一覧表示するパターンです。limit で表示件数を制限できます。

{% for product in collections['featured'].products limit: 4 %}
  <div class="product-card">
    <a href="{{ product.url }}">
      <img src="{{ product.featured_image | img_url: '400x' }}"
           alt="{{ product.title }}">
      <h3>{{ product.title }}</h3>
      <p>{{ product.price | money }}</p>
    </a>
  </div>
{% endfor %}

ページごとのコンテンツ出し分け

特定のページテンプレートでだけ表示を変えたいときに使えるコードです。

{% if template == 'index' %}
  <p>トップページ限定のメッセージ</p>
{% elsif template contains 'product' %}
  <p>商品ページ用のメッセージ</p>
{% endif %}

出典：Shopify.dev - Liquid objects: product

セクションのスキーマを理解する

テーマエディターから設定を変更できるようにするには、セクションファイルの末尾に スキーマ（schema） を記述します。これがLiquidカスタマイズの醍醐味ともいえる部分です。

{% schema %}
{
  "name": "お知らせバナー",
  "settings": [
    {
      "type": "text",
      "id": "banner_text",
      "label": "バナーのテキスト",
      "default": "送料無料キャンペーン実施中！"
    },
    {
      "type": "color",
      "id": "banner_bg",
      "label": "背景色",
      "default": "#0100a0"
    }
  ]
}
{% endschema %}

このスキーマを定義しておくと、マーチャント（ストア運営者）がテーマエディターからテキストや背景色を自由に変更できるようになります。セクションのHTML部分では {{ section.settings.banner_text }} のように呼び出します。

<div style="background-color: {{ section.settings.banner_bg }}; padding: 12px; text-align: center;">
  <p style="color: #fff; margin: 0;">{{ section.settings.banner_text }}</p>
</div>

出典：Shopify.dev - Section schema

Liquidを編集するときの注意点

Liquidの編集は楽しいですが、いくつか気をつけておきたいポイントがあります。わたし自身が失敗から学んだことを共有します。

• 編集前に必ずテーマのバックアップ（複製）を取る
• 本番テーマを直接いじらず、下書きテーマで作業する
• 変更は少しずつ行い、こまめにプレビューで確認する
• テーマのアップデートでカスタムコードが上書きされる可能性を意識する
• コードにはコメント {% comment %}...{% endcomment %} を残しておく

出典：Shopify.dev - Shopify CLI

まとめ

Liquidは一見すると難しそうに見えますが、基本はたった3つの要素（オブジェクト、タグ、フィルター）だけです。

1. 1

   まずはコードを読むところから

   テーマのコードエディターを開いて、既存のセクションファイルを眺めてみましょう。{{ }} と {% %} の意味がわかるだけで、テーマの仕組みが理解できるようになります。
2. 2

   小さな変更から試す

   セール価格の表示や在庫数の表示など、この記事で紹介したコード例を下書きテーマにコピーして試してみてください。
3. 3

   スキーマを書いてみる

   テーマエディターから設定変更できるセクションを1つ作ってみましょう。ここまでできれば、Liquidの基本は身についています。

テーマエディターのノーコードカスタマイズと、Liquidによるコードカスタマイズ。この両方を使い分けられるようになると、Shopifyストアの表現力は大きく広がります。

わたし自身、Liquidを覚えたことでクライアントからの「ここをこうしたい」というリクエストに対して、アプリを追加せずにテーマのコードだけで対応できる場面が増えました。まずは一つ、小さなカスタマイズから始めてみてください。

→ Shopifyのテーマカスタマイズ入門（ノーコード編）を読む

→ Shopify公式 Liquidリファレンスを見る

よくある質問