Shopifyでストアをカスタマイズしようと「コードを編集」を開いた瞬間、見慣れない記号やファイル名にそっと画面を閉じてしまった…そんな経験はありませんか？実は、そのコードの多くは「Liquid（リキッド）」と呼ばれるShopify独自の言語で書かれています。プログラミングと聞くと難しく感じますが、Liquidの基本は驚くほどシンプル。この記事では、Liquidの正体とその基本ルールを、専門用語を避けて分かりやすく解説します。
Liquidの正体は「自動穴埋め問題」
Liquidは、複雑なプログラミング言語というより、あらかじめ用意された空欄に適切な言葉を自動で埋めてくれる「穴埋め問題」の仕組みに似ています。これにより、同じテンプレートを使いながら、商品ごとに違う名前や価格を表示できるのです。
Shopifyのデータを表示する言語
Shopifyの裏側には、商品名、価格、在庫数、顧客名といった膨大なデータが保管されています。Liquidの役割は、これらのデータを引き出してきて、ウェブページの適切な場所に表示させることです。Liquidがあるからこそ、私たちは商品情報を一つひとつ手入力する必要がないのです。
HTMLに情報を埋め込む仕組み
具体的には、ページの骨組みであるHTMLの中に、{{ product.title }}のようなLiquidコードを「空欄」として埋め込んでおきます。訪問者がTシャツの商品ページを開くと、Shopifyが自動でこの空欄に「Tシャツの商品名」というデータを入れてくれるため、ページに商品名が正しく表示されるのです。
プログラミングとの大きな違い
一般的なプログラミング言語が複雑な計算や処理を行うのに対し、Liquidの主な仕事は「Shopifyのデータを表示する」ことです。そのため、覚えるべきルールが少なく、非常に安全に扱えるように設計されています。目的が限定されている分、初心者でも理解しやすいのが特徴です。
Liquidの基本構造：3つの記号
Liquidの基本は、たった3種類の記号の役割を覚えることから始まります。これらを見分けるだけで、コードが何をしているのか大まかに理解できます。
{{ }}：データを表示する（出力）
二重の波括弧{{ }}は、**「この場所に、このデータを表示してください」**という最も基本的な命令です。{{ product.title }}なら商品名を、{{ product.price }}なら価格を表示します。コードの中でこれを見つけたら、「何かを表示しているんだな」と理解すればOKです。
{% %}：条件を指示する（ロジック）
波括弧とパーセント記号{% %}は、**「もし○○なら、××してください」**という条件分岐や繰り返しなどのルールを記述します。例えば{% if product.available %}というコードは、「もしこの商品が購入可能（在庫あり）なら」という意味です。カートボタンの表示・非表示などに使われます。
{% comment %}：メモを残す（コメント）
{% comment %}と{% endcomment %}で囲まれた部分は、**メモ書き（コメント）**の役割を果たします。この中に書かれた内容は、実際のウェブページには表示されません。コードの修正日や、そのコードが何をしているのかを日本語でメモしておくために使われます。
どこでLiquidは使われる？
LiquidはShopifyストアの様々な場所で活躍しています。具体的な例を知ることで、さらにイメージが掴みやすくなるでしょう。
商品ページでの活用例
商品ページはLiquidの宝庫です。商品名{{ product.title }}、商品説明{{ product.description }}、商品画像、価格{{ product.price | money }}など、表示されている情報のほとんどがLiquidによってデータベースから呼び出されています。
メールテンプレートでの活用例
注文確認メールや発送通知メールにもLiquidが使われています。メールの文中に{{ customer.name }}様と書けば、自動で顧客の名前に変換して送信してくれます。これにより、顧客一人ひとりに合わせたパーソナルなメールを自動で作成できます。
コード編集画面での探し方
Shopify管理画面の「テーマ」＞「コードを編集」で、.liquidという拡張子がついているファイルがLiquidファイルです。特にtemplatesフォルダやsectionsフォルダ内にあるファイル（例：product.liquid）で、{{ }}や{% %}といった記号を探してみてください。
まとめ
Liquidは、Shopifyストアの表示を裏側で支える、縁の下の力持ちです。その基本は「穴埋め問題」であり、**{{ }}（表示）と{% %}（指示）**という2つの記号の役割を理解するだけで、コードへの恐怖心は大きく和らぎます。まずはテーマを複製して安全な環境を用意し、「コードを編集」画面で{{ product.title }}のような簡単なコードを探すことから始めてみましょう。Liquidを少し知るだけで、あなたのストア運営の可能性は大きく広がります。
コメント