💧 Shopify Liquidマスター講座：動的テンプレートで実現するストアデザインの極意 ✨

Posted at 2025-05-15

こんにちは😊
株式会社プロドウガの@YushiYamamotoです！
らくらくサイトの開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

「Shopifyのテーマエディタだけじゃ物足りない！もっと自由にストアデザインを操りたい！」「他のストアと差をつける、ユニークな機能を追加したい！」そんな向上心あふれるShopifyオーナーさんや、これからShopify開発に挑戦したいエンジニアの皆さんへ。

その願いを叶える鍵こそが、Shopify独自のテンプレート言語「Liquid（リキッド）」です。Liquidを理解し使いこなせるようになれば、まるで魔法のようにストアの見た目や動作を**動的（ダイナミック）**に変化させ、思い通りの高度なカスタマイズを実現できます。

この記事では、プログラミング初心者やエンジニア初学者の方でもLiquidの世界にスムーズに足を踏み入れられるよう、Liquidの基本概念から具体的な書き方、そして実践的な活用例まで、図解やサンプルコードを交えながら徹底的に解説します！

この記事を読み終える頃には、あなたもLiquidの魅力に気づき、「自分でもできそう！」という自信とワクワク感でいっぱいになっているはず。さあ、Liquidをマスターして、あなたのShopifyストアを唯一無二の存在へと進化させましょう！

Liquidとは？Shopifyテーマの心臓部を動かす言語 🪄

Liquid (リキッド) とは、Shopifyが開発したオープンソースのテンプレート言語です。Rubyというプログラミング言語をベースに作られていますが、Rubyの深い知識がなくても扱えるように設計されています。

Liquidの主な役割:

ShopifyストアのサーバーサイドでHTMLコンテンツを動的に生成することです。これにより、以下のようなことが可能になります。

データベースに保存されている商品情報（名前、価格、画像、在庫など）をウェブページに表示する。
顧客情報（名前、注文履歴など）に応じて表示内容を変える。
コレクション（商品カテゴリ）内の商品を一覧表示する。
「もし在庫が0個なら『売り切れ』と表示する」といった条件に応じて表示を分岐させる。
同じデザインの部品（例：商品カード）を繰り返し表示する。

簡単に言うと、Liquidは**「静的なHTMLの骨組み」に「Shopifyの動的なデータ」を流し込み、ユーザーごとに最適化されたウェブページを作り出すための接着剤**のようなものです。

「テンプレート言語」と聞くと難しそうに感じるかもしれませんが、基本的なルールはシンプルです。HTMLの知識があれば、比較的スムーズに学習を始められますよ！

Liquidの基本構造：3つの要素を覚えよう！🧱

Liquidのコードは、主に以下の3つの要素（デリミタと呼ばれる特別な記号で囲まれた部分）で構成されます。これさえ覚えれば、Liquidコードを読む・書く第一歩はクリアです！

オブジェクト (Objects): {{ ... }} (ダブルカーリーブレース)
- 役割: Shopifyのデータ（文字列、数値、配列など）をHTML内に出力（表示）します。
- 書き方: {{ object.property }} のように、オブジェクト名の後にピリオド . を挟んでプロパティ（属性）名を記述します。
- 例:
  - {{ product.title }} → 商品のタイトルが表示されます。
  - {{ cart.total_price }} → カートの合計金額が表示されます。
  - {{ shop.name }} → ストア名が表示されます。
タグ (Tags): {% ... %} (カーリーブレースとパーセント)
- 役割: プログラムのロジック（処理の流れ）や制御構造（条件分岐、繰り返しなど）を記述します。これらは直接HTMLに出力されるのではなく、HTMLの生成方法を制御します。
- 書き方: {% tag_name parameters %} のように、タグ名の後に必要に応じてパラメータを記述します。多くのタグは {% endtag_name %} で閉じます。
- 代表的なタグ:
  - 条件分岐: if, unless, elsif, else, case/when
  - 繰り返し: for, cycle, tablerow
  - 変数割り当て: assign, capture
  - コメント: comment
  - その他: include, render, form, paginate など多数。
- 例:
  - {% if product.available %} ... {% endif %} → もし商品が購入可能なら...
  - {% for product_variant in product.variants %} ... {% endfor %} → 商品の各バリエーションに対して繰り返し...
フィルター (Filters): | (パイプ)
- 役割: オブジェクトの出力を変更・加工します。文字列操作、数値計算、日付フォーマット変更など、様々な便利なフィルターが用意されています。
- 書き方: {{ object | filter_name: parameter }} のように、オブジェクトの後にパイプ | を挟み、フィルター名と必要に応じてパラメータを記述します。複数のフィルターを連結することも可能です。
- 例:
  - {{ product.price | money }} → 価格を適切な通貨形式（例: ¥1,234）で表示。
  - {{ "hello world" | capitalize }} → "Hello world" と先頭を大文字に。
  - {{ product.description | truncate: 100, "..." }} → 商品説明を最初の100文字に省略し、末尾に "..." を追加。
  - {{ article.published_at | date: "%Y年%m月%d日" }} → ブログ記事の公開日を「2023年04月01日」のような形式で表示。

これらの要素を組み合わせて、HTMLファイル (拡張子が .liquid のファイル) の中に記述していくのがLiquidコーディングの基本です。

Liquidで何ができる？具体的なカスタマイズ例を見てみよう！🚀

Liquidを使いこなすと、テーマエディタだけでは実現できない、より細やかで動的なストアカスタマイズが可能になります。

例1：商品ページに「残り在庫わずか！」メッセージを表示する

{% comment %} 商品ページ (product.liquid) の一部を想定 {% endcomment %}

<h1>{{ product.title }}</h1>
<p>価格: {{ product.price | money }}</p>

{% if product.available %}
  {% assign first_variant = product.variants.first %}
  {% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}
    <p style="color: red; font-weight: bold;">残り在庫わずかです！お早めに！</p>
  {% endif %}
  <form action="/cart/add" method="post">
    <input type="hidden" name="id" value="{{ first_variant.id }}">
    <button type="submit">カートに追加</button>
  </form>
{% else %}
  <p style="color: gray;">現在売り切れ中です。</p>
{% endif %}

解説:
- {% if product.available %}: まず商品が購入可能かチェック。
- {% assign first_variant = product.variants.first %}: 商品の最初のバリエーション情報を first_variant という変数に格納。
- {% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}: 在庫管理がShopifyで行われていて、在庫数が1以上5以下の場合に条件が真になります。
- この条件を満たせば、「残り在庫わずかです！お早めに！」という赤い太字のメッセージが表示されます。

例2：ホームページに特定のコレクションの商品を3つだけ表示する

ホームページ用Liquidコード例 (特定コレクション商品表示)

{% comment %} ホームページ (index.liquid または sections/featured-collection.liquid など) の一部を想定 {% endcomment %}

{% assign featured_collection_handle = 'summer-specials' %}
{% assign product_limit = 3 %}

{% if collections[featured_collection_handle].products.size > 0 %}
  <h2>{{ collections[featured_collection_handle].title }}</h2>
  <div class="product-grid">
    {% for product in collections[featured_collection_handle].products limit: product_limit %}
      <div class="product-card">
        <a href="{{ product.url | within: collections[featured_collection_handle] }}">
          {% if product.featured_image %}
            <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.featured_image.alt | escape }}">
          {% else %}
            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          <h3>{{ product.title }}</h3>
          <p>{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
{% else %}
  <p>現在、おすすめ商品はありません。</p>
{% endif %}

解説:
- {% assign featured_collection_handle = 'summer-specials' %}: 表示したいコレクションのハンドル（URLに使われる識別子）を変数に設定。
- {% assign product_limit = 3 %}: 表示する商品数を3つに設定。
- {% if collections[featured_collection_handle].products.size > 0 %}: 指定したコレクションに商品が存在するかチェック。
- {% for product in collections[featured_collection_handle].products limit: product_limit %}: コレクション内の商品を、指定した数だけ繰り返し処理。
- within: collections[featured_collection_handle] フィルターは、商品URLが現在のコレクションのコンテキスト内であることを保証します。
- image_url: width: 400 フィルターは、画像の幅を400pxにリサイズして表示します。
- placeholder_svg_tag フィルターは、商品画像がない場合に代替のSVG画像を表示します。

例3：ログインしている顧客にだけ特別なメッセージを表示する

{% comment %} ヘッダー (layout/theme.liquid や sections/header.liquid など) の一部を想定 {% endcomment %}

{% if customer %}
  <div class="welcome-message">
    こんにちは、{{ customer.first_name | default: "会員" }} 様！いつもご利用ありがとうございます。
    <a href="/account">マイページへ</a> | <a href="/account/logout">ログアウト</a>
  </div>
{% else %}
  <div class="guest-message">
    初めての方ですか？ <a href="/account/register">新規会員登録</a> | <a href="/account/login">ログイン</a>
  </div>
{% endif %}

解説:
- {% if customer %}: 顧客がログインしているかどうかをチェック。customer オブジェクトはログインしている場合にのみ存在します。
- ログインしていれば、顧客のファーストネーム（なければ「会員」）と共にウェルカムメッセージとマイページ/ログアウトリンクを表示。
- ログインしていなければ、新規登録/ログインリンクを表示。
- default: "会員" フィルターは、customer.first_name が空の場合に「会員」という文字列を使用します。

コード編集は慎重に！必ずバックアップを！
Liquidコードを編集する際は、必ず事前にテーマを複製してバックアップを取ってから作業しましょう。Shopify管理画面の「オンラインストア」>「テーマ」で、現在使用しているテーマの「アクション」から「複製する」を選べば簡単にバックアップできます。万が一エラーが出ても、すぐに元の状態に戻せるようにしておくことが非常に重要です。

Liquid学習のステップと役立つリソース 📚

Liquidをマスターするための学習ステップと、参考になるリソースをご紹介します。

HTMLとCSSの基本を理解する:
- LiquidはHTMLと密接に関連しています。まずはHTMLでウェブページの構造を、CSSで見た目をどう作るのか、基本的な知識を身につけましょう。
- 学習サイト例: Progate, ドットインストール
Shopifyテーマの構造を把握する:
- どのLiquidファイルがどのページや部分に対応しているのか、テーマ全体のファイル構成を理解することが重要です。
- 主なディレクトリ: layout/, templates/, sections/, snippets/, assets/
Liquidの基本構文（オブジェクト、タグ、フィルター）を覚える:
- この記事で紹介した3つの要素の役割と基本的な使い方をマスターしましょう。
Shopify公式ドキュメント (Shopify.dev) を参照する:
- Shopify.dev には、Liquidの全てのオブジェクト、タグ、フィルターの詳細なリファレンスやチュートリアルが掲載されています。これが最も信頼できる情報源です。
- 最初は英語ですが、ブラウザの翻訳機能などを使えば理解の助けになります。
既存のテーマコードを読んでみる:
- 実際にShopifyテーマ（特にDawnのような無料公式テーマ）の .liquid ファイルを開き、どのようにLiquidが使われているか読んでみましょう。最初は分からなくても、徐々にパターンが見えてきます。
簡単なカスタマイズから試してみる:
- テキストの色を変える、小さなメッセージを追加するなど、簡単な変更から始めて、Liquidがどのように動作するかを体感しましょう。
Shopifyコミュニティやブログ記事を活用する:
- Shopifyコミュニティフォーラムや、多くの開発者が書いているブログ記事には、具体的なカスタマイズ例やトラブルシューティングの情報がたくさんあります。