はじめに
Shopifyでストアを構築していると、必ず出会うのが「Liquid」という言語。テーマをカスタマイズしたり、動的にデータを呼び出したりするために必要不可欠な存在です。
ただ、僕も最初に触ったときは「HTMLやCSSはわかるけど、Liquidは何者？」と感じました。独特な書き方やタグが多く、最初は戸惑うことも多かったです。
この記事では、Liquidとは何か？どんな使い方をするのか？学習方法は？ を初心者目線で解説します。さらに、実際に学んでみて「ここでつまずきやすい」「こうすると理解が早い」というポイントも紹介していきます。
Liquidとは何か？
Liquidは、Shopifyが採用しているテンプレート言語です。ざっくり言うと「データを呼び出すための橋渡し役」。
- HTML + CSS：見た目を作る部分
- Liquid：Shopifyのデータを引っ張ってくる部分
たとえば商品ページなら、
{{ product.title }}
と書けば商品名が自動的に表示されます。
つまり「デザインとデータをつなぐ言語」というイメージです。
Liquidでよく使う基本構文
1. 出力（Output）
{{ product.title }}
{{ product.price }}
「{{ }}」で囲むとデータを表示できます。
2. オブジェクト（Objects）
Shopifyのデータベースから呼び出せる変数のようなもの。
- product（商品）
- collection（コレクション）
- cart（カート）
など。
3. フィルター（Filters）
データを加工するための仕組み。
{{ product.title | upcase }}
→ 商品名を大文字に変換。
4. タグ（Tags）
条件分岐やループ処理に使います。
{% if product.available %}
在庫あり
{% else %}
売り切れ
{% endif %}
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
→ コレクション内の商品を一覧表示。
Liquid学習のステップ
ステップ1：基礎を押さえる
まずは「オブジェクト」「フィルター」「タグ」の3つを理解しましょう。公式ドキュメントを流し読みして、どんな種類があるかざっと把握するのがおすすめです。
ステップ2：テーマエディタで触ってみる
実際にShopifyのテーマ（DawnやCraftなど）を開いて、コード編集画面を覗いてみましょう。「あ、ここでLiquidが使われているんだ」と気づくだけでも理解が進みます。
ステップ3：小さなカスタマイズをやってみる
例：商品ページに在庫数を表示する
残り {{ product.inventory_quantity }} 点
このくらい簡単な変更から始めると、コードの動きが体感できます。
ステップ4：応用カスタマイズに挑戦
- タブ切り替えUIをLiquidで制御
- カートページにおすすめ商品を表示
- メタフィールドを読み込んで商品詳細に反映
この辺りまで触れると「Liquidがわかってきた！」と実感できます。
学習リソースまとめ
- Shopify公式ドキュメント
→ https://shopify.dev/ でLiquidの基礎解説あり - Shopifyテーマのコード
→ 実際のコードを読むのが一番勉強になる - YouTubeやブログ記事
→ 日本語解説も多くなってきたので助かります - 自分のストアで試す
→ 手を動かすのが何よりの近道
つまずきやすいポイントと対処法
- エラーが出ても原因が見えにくい
→ {% endif %} や {% endfor %} を閉じ忘れていることが多い。 - 変数の使い方が混乱する
→ product, products, collection, cart などを整理して覚える。 - 翻訳と混同しやすい
→ Liquidはあくまで「データを扱う言語」。翻訳や多言語化は別の仕組み。
僕も最初は「なぜ出力されない？」と何度も悩みましたが、コードをコピーして少しずつ削っていくと原因がわかりやすかったです。
フリーランス目線でLiquidを学ぶメリット
- 案件の幅が広がる：テーマ編集だけでなく、クライアントの要望に応じたカスタマイズが可能。
- 単価が上がる：ただの「設定代行」ではなく「カスタマイズ提案」ができるようになる。
- 海外案件にも対応できる：Liquidは世界共通の仕組みなので、どの国のShopifyでも使える。
どこでLiquidを学ぶ？おすすめの学習場所
1. Shopify公式ドキュメント（英語／日本語あり）
- Shopify Dev Docs
Liquidのリファレンスが網羅されていて一番信頼できる情報源。
最初は少し難しいですが、実際のコード例もあるので「実際どう使うのか」が理解しやすいです。
2. 公式テーマ（Dawnなど）のコードを読む
無料テーマのコードを開いて、「どこでLiquidが使われているか」を確認するのが一番の学習方法。
product.jsoncollection.liquidcart.liquid
などを見ると、実際のデータ取得の書き方が学べます。
3. 国内の学習スクールや教材
- デイトラ Shopifyコース
→ 実案件に近い構築体験ができる。SNSで学習者が成果を共有しているのも励みになります。 - Udemy（ユーデミー）
→ ShopifyやLiquidに特化した講座もあり。安いときに購入するとコスパが高いです。
4. YouTube・ブログ記事
英語圏の動画は量が多いですが、最近は日本語解説も増えてきました。
実際に手を動かしながら学ぶのに最適です。
5. コミュニティで質問する
- Shopify Community（公式フォーラム）
- Twitter / X で「#Shopify制作」などのハッシュタグ
- SlackやDiscordのフリーランスコミュニティ
他の人の質問を見て「自分も同じことでつまずいていた！」という発見が多いです。
まとめ
Liquidは最初こそとっつきにくいですが、基本を理解すれば「Shopifyを自由に操る魔法のようなツール」になります。
- 出力 → オブジェクト → フィルター → タグの流れで学ぶ
- 実際のテーマを触って少しずつカスタマイズ
- 小さな成功体験を積み重ねる
これだけで、Shopifyの世界がぐっと広がります。僕自身もLiquidを理解したことで案件の幅が広がり、より自由にストアを作れるようになりました。
Liquidを学ぶときは「読む」より「触る」のが一番早いです。
ドキュメントで基礎を理解 → テーマでコードを確認 → 自分のストアで小さな改修、の流れが王道です。
これから学ぶ人はぜひ「小さな一歩」から始めてみてください。
コメント