こんにちは😊
株式会社プロドウガの@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コミュニティフォーラムや、多くの開発者が書いているブログ記事には、具体的なカスタマイズ例やトラブルシューティングの情報がたくさんあります。

まとめ：Liquidで、あなたのストアの可能性を無限大に！ 🌌

Liquidは、Shopifyストアを単なる「商品を並べる場所」から、ブランドの世界観を表現し、顧客とインタラクティブに関わるダイナミックな空間へと進化させるための強力なツールです。

最初は難しく感じるかもしれませんが、

オブジェクト {{ ... }} でデータを表示し、
タグ {% ... %} で処理をコントロールし、
フィルター | でデータを加工する

という基本さえ押さえれば、あとは実践あるのみ！

テーマエディタの限界を超え、あなたの創造性を存分に発揮して、お客様を魅了するユニークなストア体験を作り上げてください。Liquidをマスターすれば、Shopifyでのストア運営がもっと楽しく、もっと奥深くなること間違いなしです！

さあ、Liquidの力を借りて、あなたのShopifyストアの可能性を無限に広げましょう！応援しています！😊

最後に：業務委託のご相談を承ります

私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！