Shopify Liquidとは？どこで使う？初心者向けに仕組みと使い方を解説

【Shopifyのテーマを編集していると、「Liquid」という見慣れないコードを目にすることがあります。「HTMLとは違うの？」「どこを触ればいいの？」「Liquidが分からないとShopifyは使えない？」と疑問に感じる方も多いのではないでしょうか。

Shopify Liquidは、商品名や価格、画像など、Shopifyに登録されている情報をWebページに表示するためのテンプレート言語です。基本的な仕組みを理解すると、商品ページの表示変更や条件分岐、オリジナルセクションの制作など、Shopifyのカスタマイズできる範囲が大きく広がります。

ここでは、Shopify Liquidとは何か、どこで使うのか、HTML・CSS・JavaScriptとの違い、基本的な書き方まで、専門知識がない方にも分かるように解説します。

Shopify Liquidとは？

Liquid（リキッド）は、Shopifyのテーマで動的な情報を表示するために使用されるテンプレート言語です。

たとえば、商品ページに表示されている商品名は、テーマファイルへ「Tシャツ」「バッグ」のように直接書き込まれているわけではありません。Shopifyの商品管理画面に登録した商品情報をLiquidで取得し、その内容をページへ表示しています。

Liquidでは主に「オブジェクト」「タグ」「フィルター」を組み合わせて、Shopifyに保存されている情報を表示したり、表示条件を変更したりします。

たとえば、次のコードは商品名を表示する基本的なLiquidです。

{{ product.title }}

商品Aのページでは商品Aのタイトルが表示され、商品Bのページでは商品Bのタイトルが表示されます。

つまりLiquidは、「Shopifyに登録されているデータ」と「お客様が見るWebページ」をつなぐ役割を持っていると考えると分かりやすいでしょう。

Shopify Liquidはどこで使う？

Liquidは、主にShopifyのオンラインストアのテーマ内で使用します。

現在のShopifyテーマは、layout、templates、sections、blocks、snippets、assets、config、localesなどのファイルやディレクトリで構成されています。Liquidは、その中でもページの表示や機能を作るファイルで広く利用されています。

layoutでサイト全体の基本構造を作る

「layout」には、ストア全体の土台となるファイルがあります。

代表的なのが次のファイルです。

layout/theme.liquid

theme.liquidは、HTML文書全体の基本構造やヘッダー・フッターなど、複数のページで共通して使用する内容に関係する重要なファイルです。Shopify公式ドキュメントでも、layoutはテーマのベースとして各テンプレートがレンダリングされる場所と説明されています。

sectionsでページのパーツを作る

Shopifyテーマをカスタマイズするときに、特に触れる機会が多いのが「sections」です。

セクションとは、画像とテキスト、商品一覧、お知らせ、バナーなど、ページを構成するまとまりのことです。

たとえば、オリジナルの「おすすめ商品セクション」や「キャンペーンバナー」を作りたい場合、sectionsフォルダ内にLiquidファイルを作成することがあります。

sections/featured-products.liquid

ShopifyのセクションはLiquidファイルで作られており、HTMLやLiquidに加えてschemaを設定することで、テーマエディターから画像やテキストなどを変更できる仕組みを作ることもできます。

snippetsで繰り返し使うコードをまとめる

「snippets」は、テーマ内で何度も使用する小さなコードを部品としてまとめるための場所です。

たとえば、商品カードを商品一覧ページ、トップページ、おすすめ商品エリアなど複数の場所で使用する場合があります。

同じコードを毎回書くのではなく、商品カードをsnippetとして作成し、必要な場所から呼び出すことで管理しやすくなります。

{% render 'product-card', product: product %}

Shopify公式でも、snippetsは再利用可能なLiquidコードを保存し、テーマ内の重複を減らすための仕組みとして案内されています。

templatesでページごとの構成を決める

templatesは、商品ページ、コレクションページ、固定ページなど、ページ種類ごとの構成に関係します。

ShopifyのテーマではJSONテンプレートとLiquidテンプレートがあり、JSONテンプレートを利用する場合、HTMLやLiquidコードはテンプレートから参照されるsection側に記述します。

そのため、現在のShopifyテーマをカスタマイズする場合は、templatesだけを見るのではなく、そこから使用されているsectionsも確認することが重要です。

LiquidとHTML・CSS・JavaScriptの違い

Shopifyをカスタマイズするときは、LiquidだけでなくHTML・CSS・JavaScriptも使用します。それぞれ役割が異なります。

• HTML：ページの構造を作る
• CSS：色・サイズ・余白・レイアウトなど見た目を整える
• JavaScript：クリックやスライダーなど動きや操作を実装する
• Liquid：Shopifyの商品情報などを取得し、表示内容や条件を制御する

たとえば、商品名を表示する場合はHTMLとLiquidを組み合わせて次のように記述できます。

<h1>{{ product.title }}</h1>

文字サイズや色を変えたい場合はCSSを使います。

このように「LiquidだけでWebサイトを作る」というよりも、HTML・CSS・JavaScriptとLiquidを組み合わせてShopifyテーマを構築すると考えると理解しやすくなります。

Shopify Liquidの基本的な書き方

Liquidを理解するうえで、まず覚えておきたいのが「オブジェクト」「タグ」「フィルター」の3つです。

1．オブジェクトで情報を表示する

オブジェクトは、Shopifyに登録されている情報を取得して表示するときに使用します。

基本的な書き方はこちらです。

{{ product.title }}

代表的な例として、次のような情報があります。

{{ product.title }}
{{ product.description }}
{{ product.price }}
{{ collection.title }}

Shopifyではproductオブジェクトから商品タイトル、商品タイプ、URL、タグなど、さまざまな商品情報へアクセスできます。

2．タグで条件分岐する

タグは、条件によって表示内容を変えたり、繰り返し処理を行ったりするときに使用します。

たとえば在庫がある商品のみに文章を表示したい場合は、次のような条件分岐ができます。

{% if product.available %}
  <p>在庫があります</p>
{% endif %}

「条件に当てはまる場合だけ表示する」という処理ができるため、商品状態によって表示を切り替えたい場合に便利です。

3．forで商品などを繰り返し表示する

複数の商品を一覧表示するときによく使うのがforタグです。

{% for product in collection.products %}
  <p>{{ product.title }}</p>
{% endfor %}

このコードでは、コレクション内の商品を順番に取り出して商品名を表示します。

商品一覧、ブログ一覧、画像一覧など、複数のデータをまとめて表示するときによく使われる書き方です。

4．フィルターで表示内容を加工する

フィルターは、取得したデータの表示方法を変更するときに使います。

Liquidでは「|（パイプ）」の後ろにフィルターを指定します。

{{ product.price | money }}

そのままのデータを表示するのではなく、用途に合わせて加工して出力できるのがフィルターの特徴です。Liquidでは複数のフィルターを組み合わせることもできます。

Liquidを使うとShopifyで何ができる？

Liquidを理解すると、テーマエディターだけでは難しい細かなカスタマイズができるようになります。

代表的な活用方法として、次のようなものがあります。

• 商品名・価格・商品画像を任意の場所に表示する
• 特定の商品だけバナーを表示する
• 在庫状況によって表示内容を変更する
• 商品タグに応じて文章やアイコンを変更する
• コレクションの商品を一覧表示する
• オリジナルのセクションを作成する
• 商品カードなど共通パーツを作成する
• テーマ設定と連動するデザインを作る

たとえば「SALEというタグが付いている商品だけセール表示を出す」といったカスタマイズもLiquidを使って実装できます。

{% if product.tags contains 'SALE' %}
  <span>SALE</span>
{% endif %}

商品の登録内容とページデザインを連動できる点が、Liquidを利用する大きなメリットです。

Liquidはどこから編集する？

テーマコードを編集する場合は、Shopify管理画面から対象テーマのコード編集画面を開いて作業します。

コード編集画面では、layout、sections、snippets、templates、assetsなど、テーマを構成するファイルを確認できます。

ShopifyのコードエディターにはLiquidファイルの過去バージョンを確認し、以前の内容へ戻すための機能も用意されています。

ただし、テーマコードを直接変更するとストア全体の表示に影響する可能性があります。公開中のテーマを直接編集するよりも、テーマを複製してから変更し、表示確認後に公開する方法が安心です。

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

テーマエディターで変更できないか先に確認する

文字や画像、色、余白などの変更は、テーマによってはコードを書かなくてもテーマエディターから設定できます。

まず通常の設定で対応できるか確認し、それでも実現できない場合にLiquidやCSSの編集を検討すると、管理しやすいサイトになります。

既存コードを削除する前に役割を確認する

Liquidファイルには、商品情報やカート、アプリなどに関係する重要な処理が含まれている場合があります。

「表示されていないから不要だろう」と判断してコードを削除すると、別のページや機能に影響する可能性があります。

コードの役割が分からない場合は、変更前にバックアップやテーマの複製を行っておくことをおすすめします。

Liquidだけで解決しようとしない

デザイン変更ならCSS、クリック後の処理やUIの動作ならJavaScriptなど、目的によって使用する技術は異なります。

Liquidは非常に便利ですが、すべてのカスタマイズをLiquidだけで行うものではありません。

「取得するデータをLiquidで決める」「HTMLで構造を作る」「CSSでデザインする」「JavaScriptで動きを付ける」というように、それぞれを適切に使い分けることが大切です。

Shopify Liquidについてよくある質問

Liquidが分からなくてもShopifyは運営できますか？

基本的な商品登録や注文管理、テーマエディターを利用したページ編集であれば、Liquidを知らなくても運営できます。

一方、テーマ標準機能では実現できないデザインや表示条件を追加したい場合は、Liquidの知識が役立ちます。

Liquidはプログラミング言語ですか？

一般的にはテンプレート言語と呼ばれます。

商品情報などのデータをページへ表示したり、条件分岐や繰り返し処理を行ったりするための仕組みで、Shopifyのテーマ制作において重要な役割を持っています。

初心者はどこから勉強すればいいですか？

最初から複雑なテーマを作る必要はありません。

まずは次の順番で学ぶと理解しやすくなります。

1. {{ product.title }}などで情報を表示する
2. ifによる条件分岐を理解する
3. forによる繰り返し処理を理解する
4. フィルターの使い方を覚える
5. sectionsとsnippetsの役割を理解する
6. schemaを使ったセクション制作へ進む

実際のテーマコードを確認しながら、小さな変更から試していく方法がおすすめです。

ShopifyのテーマをカスタマイズするならLiquidは必須ですか？

どの程度のカスタマイズを行うかによります。

CSSによる色や余白の調整だけならLiquidを変更しないこともあります。一方、商品データを使った表示、条件付きコンテンツ、オリジナルセクションなどを実装する場合は、Liquidの知識が必要になるケースが多くなります。

まとめ

Shopify Liquidは、Shopifyに登録されている商品やコレクションなどのデータを、オンラインストア上へ表示するためのテンプレート言語です。

Liquidを理解すると、商品名や価格を表示するだけでなく、商品の状態に応じた条件分岐、商品一覧の繰り返し表示、オリジナルセクションや共通パーツの作成など、テーマをより柔軟にカスタマイズできるようになります。

一方で、Shopifyの運営に必ず高度なLiquidの知識が必要というわけではありません。まずテーマエディターで対応できる範囲を確認し、標準機能だけでは実現できない部分にLiquidを活用するのが効率的です。

Shopifyサイトを制作・改善するときは、「テーマの設定で対応する部分」「Liquidで制御する部分」「CSSやJavaScriptで調整する部分」を整理すると、更新しやすく、将来的な運用もしやすいECサイトになります。