ShopifyのLiquid言語の基礎・使い方やチートシート

ShopifyのLiquid（リキッド）言語をうまく活用することで、ECサイトのデザインや機能を細かくカスタマイズできます。この記事では、Liquid言語の基礎や使い方、そしてカスタマイズ時に重宝するチートシートについてわかりやすく解説します。

ShopifyのLiquidとは？

Shopifyの「Liquid」は、オンラインストアの見た目などをカスタマイズする際に役立つプログラミング言語です。Liquidは通常のWebページ作成で使われるHTMLやCSSと同じく、Webサイトの構造やスタイルの一種です。しかし、Shopify独自のタグや変数を使って、商品情報などの動的なデータをWebページに直接組み込める特徴があります。

Liquidを学ぶには、まず基礎（Basic）・オブジェクト（Object）・タグ（Tags）・フィルター（Filters）の4つの基本的な考え方を理解しましょう。

Shopify Liquidの基礎

オブジェクトハンドル（Object handles）

オブジェクトハンドルとは、商品やコレクション、ブログなどを識別するための名札のようなものです。オブジェクトハンドルは商品の名前などから自動的に作られ、WebページのURLを構築したり、特定の商品情報を取り出したりする際に使用されます。

たとえば、以下のURLで表示される商品の場合、末尾の「handmade-candles」がオブジェクトハンドルに該当します。

http://ABC-store.myshopify.com/products/handmade-candles

作成時はルールに基づき、すべて小文字で、空白や特殊文字はハイフンに置き換わります。同名の商品がある場合は、末尾に番号が自動的に付け加えられるため、それぞれを区別することが可能です。

オブジェクトハンドルを使いこなせれば、店舗のさまざまな要素をすぐに参照し、Webページを効率的に管理できます。

比較演算子と論理演算子（Comparison and logical operators）

• ==：等しい
• !=：等しくない
• >：より大きい
• <：より小さい
• >=：以上
• <=：以下
• or：条件Aまたは条件Bのいずれかが真であれば真となります。
• and：条件Aおよび条件Bの両方が真である場合に真となります。
• contains：特定の要素が含まれているかを確認します。

ShopifyのLiquid言語で利用できる比較演算子と論理演算子は、上記のとおりです。比較演算子は、2つの値を比較するために使われます。一方、論理演算子はひとつまたは複数の論理式を組み合わせて、論理値（真または偽）を判断するために使われます。「or」や「and」など、条件式の組み合わせや複雑な条件を設定するときに使われるケースが多いです。

論理演算子の「contains」は文字列や配列内の要素の存在を確認する際に便利ですが、オブジェクトの配列を扱う場合は使用できないため注意しましょう。さらに、複数の演算子を利用する場合は右から左へと評価されるルールがあり、括弧を使っても順序が変更できない点にも注意が必要です。

タイプ（Types）

• String（文字列）：単語や文など、引用符で囲まれたテキスト
• Number（数値）：計算可能な数字
• Boolean（真偽値）：「真」か「偽」のいずれかを表示する値
• Nil（空値）：何も格納されていない、または存在しない値
• Array（配列）：配列フィルターで出力を変更可能
• Empty（空）：何も格納されていないオブジェクト

ShopifyのLiquid言語で使えるデータのタイプは、上記の6つです。いずれのタイプも、Webサイトの動作や表示を制御する役割を担っています。

たとえば、文字列は顧客へのメッセージ表示に、数値は価格や数量の表記に、真偽値は条件に応じた表示切り替えの際に使われます。また、配列を使えば、商品リストなど複数の項目を効率的に扱うことが可能です。空値や空のオブジェクトは、何も表示しない場合やデータが存在しないことを示すのに役立ちます。

真偽値（Truthy and falsy）

ShopifyのLiquid言語では、すべてのデータ型が条件分岐で「真」または「偽」として扱われます。真とは、条件の判断時に「true」となる値のことです。設定した条件に該当した場合や整数などが「true」と評価されます。

それに対して、偽は「false」と評価される値のことです。設定した条件が間違っている場合や空値（Nil）が「false」に該当します。

注意すべきなのが、Empty（空の文字列・配列）が偽ではなく、真として扱われる点です。文字列が空かどうかを確認するには「blank」という特別な条件を使用する必要があります。また、オブジェクトが何も含まれていない状態かどうかを確認する場合にも、単純に真偽を評価するだけではなく「empty」を用いる必要があります。

ホワイトスペースコントロール（Whitespace control）

ホワイトスペースコントロールとは、ShopifyのLiquid言語でホワイトスペースを管理する機能のことです。ホワイトスペースは、プログラミング言語やHTMLコード内で使用される空白や改行のことです。コードを書く際の見やすさや整理のために使用されています。

Liquidでは、LiquidのタグやロジックがHTMLに不要な空行を追加してしまうことがあります。不要な空行の追加を防ぐために、Liquidタグの前後にハイフンを加えることで、タグによって生成される空白や空行を削除することが可能です。たとえば{%- if shop -%}という形でタグを記述することで、HTMLに余分な空行を出力することを防ぎます。

Shopify Liquidの変数（オブジェクト）一覧

オブジェクトとは、複数のプロパティが集まって形成されるまとまりのことです。プロパティは、オブジェクトのさまざまな特徴を表します。productオブジェクトを例に挙げると、商品の名前や価格、画像などがプロパティに該当します。

shop

• shop.address：住所や郵便番号などの店舗情報
• shop.currency：利用可能な通貨の設定
• shop.email：問い合わせ先のメールアドレスの設定
• shop.refund_policy：返金に関する規約
• shop.products_count登録している商品数

shopオブジェクトでは、上記のように住所や商品数といった店舗に関する情報を細かく設定できます。

cart

• cart.currency：カートの通貨
• cart.item_count：カート内の商品数
• cart.note：注記
• cart.original_total_price：商品の合計額
• cart.total_discount：割引額の合計額

cartオブジェクトでは、カートに入っている商品情報や購入金額に関する情報を設定できます。

checkout

• checkout.billing_address：チェックアウト時に入力する住所
• checkout.discounts_amount：チェックアウト時に適用される割引額
• checkout.item_count：購入する商品数
• checkout.tax_price：チェックアウト時にかかる合計税額

checkoutオブジェクトでは、会計に関する設定が可能です。ただし、Shopify Liquidでcheckoutオブジェクトを設定するには、Shopify Plusへの加入が求められます。

customer

• customer.company_available_locations：会社の所在地
• customer.first_name：顧客の名
• customer.last_name：顧客の姓
• customer.phone：顧客の電話番号

customerオブジェクトでは、ショップを利用している顧客に関する情報を設定できます。

page

• page.author：ページ作成者に関する情報
• page.content：ページのコンテンツ
• page.title：ページのタイトル
• page.url：ページのURL

pageオブジェクトでは、表示されるページについて細かく設定可能です。

product

• product.collections：商品の分類
• product-compare_at_price_max：商品価格を比較した際の最高額
• product-compare_at_price_min：：商品価格を比較した際の最低額
• product-images：商品に添付する画像

Shopify Liquidのproductオブジェクトの設定では、販売する商品に関する情報を設定できます。

settings

settingsオブジェクトは、ストアにおけるさまざまな設定を自由に設定できます。テーマやセクションなど、細かく設定できるのが特徴です。詳細は、Shopifyの公式サイト（英語）より確認できます。

Shopify Liquidのタグ

タグは、コードの実行や処理を指示する機能を持っています。特定の条件下でのみコードを実行したり、同じコードを繰り返し行ったりする際はタグが活躍します。

コンディショナルタグ（Conditional tags）

• if：「もし〜ならば」の条件設定において、条件が真の場合にのみ、特定のコードを実行
• unless：「もし〜ならば」の条件設定において、条件が偽の場合にのみコードを実行
• elsif：ifタグで設定した条件が偽の場合で別の条件を設定するときに使用
• else：if・elsifタグで設定した条件がすべて偽の場合に実行するコードを設定するときに使用
• case：whenタグなどと組み合わせて活用することで、変数の値に応じたコードを実行

Shopify Liquidで利用できるコンディショナルタグは、上記のとおりです。コンディショナルタグを利用することで、条件の真偽に基づいて、コードを実行するかどうかを決定できます。

Ifタグを例に挙げると「もし商品が定価より安い場合は『この商品はセール中です！』と表示する」といった条件設定をすることで、セール中の商品がどれなのかを顧客にわかりやすく伝えることが可能となります。その場合は、以下のコードを入力しましょう。

{% if product.compare_at_price > product.price %}

この商品はセール中です！

{% endif %}

イテレーションタグ（Iteration tags）

• for：配列内の各アイテムに対して繰り返し処理を行いたい場合に使用
• limit：商品リストの最初2つのアイテムのみを表示したいときなど、forの繰り返し回数を制限する際に使用
• offset：forの繰り返しを開始する位置を指定可能
• range：数値の範囲を指定して繰り返し処理を行いたい場合に使用
• reversed：新着商品をリストの最後に表示するなど、配列のアイテムを逆順で繰り返し処理する際に使用
• else：forの繰り返し処理が一度も行われない場合に実行するコードを指定する際に使用
• break：forの処理を中断する条件を設定可能
• continue：特定の条件下で現在のfor処理の繰り返しを飛ばし、次の繰り返しに進みたいときに使用
• cycle：forの繰り返しで異なる文字列や値を順に出力する際に使用
• paginate：配列が50項目など多数のアイテムを含む場合に、アイテムを複数のページに分割表示することが可能

Shopifyで利用できるイテレーションタグは、上記のとおりです。イテレーションタグは、特定のコードを繰り返し実行するために使用されます。リストや配列内の各アイテムに対し、同じ操作を繰り返し適用する際に使用されるケースがほとんどです。

変数タグ（Variable tags）

• assign：新たに変数を作成し、値を入力する際に使用
• capture：商品名に応じて大文字・小文字を決定するなどの複雑な情報を変数に入れる時に使用
• decrement：-1から始まり、数値をひとつずつ減らしていく時に使用
• increment：0から始まり、数値を1ずつ増やしていく時に使用

変数タグはWebサイトの中で情報を一時的に保存し、さまざまな箇所で再利用することが可能です。変数タグを使うことでサイトの情報を上手に管理し、見せ方を変えたり、特定の条件下で特別な表示をしたりできます。また、一度設定した情報は他の場所でも適用可能です。

テーマタグ（Theme tags）

• include: Webサイトのスニペット使用時に利用されていた古い方法で、現在はサイトが遅くなるなどの理由で利用が推奨されていない
• javascript：Shopify Liquidでjavascriptを入れる際に使用
• layout：Webサイトの大まかなデザインを決める際に使用
• render：includeに代わり、Webサイトのスニペットの使用時に利用可能な新しい方法
• section：ヘッダーやフッターなどのWebサイトのセクションを表示・作成する際に使用
• stylesheet：Webサイトのスタイルを決めるコード（CSS）をセクション内に入れるための場所で、細かくサイトデザインできるのが特徴

テーマタグは、Webサイトを作る際にサイトの見た目や機能の一部を作ったり、変更したりする際に役立ちます。たとえば、オンラインショップ上でセール情報を更新したい場合、セール情報を記載する箇所（スニペット）を作ることで、サイト上に追加できます。

Shopify Liquidのフィルター

フィルターは、出力する内容を制御するための構文です。フィルターを活用することで、Webページに表示するデータをわかりやすくできます。データを表示する際の区切り文字{{ }}の内部で使用され、パイプ記号「|」を挟んでデータとフィルターを指定します。

たとえば{{ '2024-04-01' | date: '%Y年%m月%d日' }}と記述すると、日付を「2024年04月01日」のように視覚的にわかりやすい形式に変換して出力可能です。

フィルター機能をうまく活用できれば、コーディングの効率化やサイトデザインのカスタマイズがより簡単になります。

ShopifyをLiquidを使ってカスタマイズする方法

Shopifyの管理画面からカスタマイズする方法

1. Shopifyの管理画面>「テーマをカスタマイズする」に移動
2. 「現在のテーマ」を選択し、カスタマイズしたいテーマの「アクション」メニュー>「コードを編集」をクリック
3. コード編集画面から編集したいLiquidファイル群を選択し、Liquid言語で編集

Shopifyの管理画面からカスタマイズする手順は、上記のとおりです。Shopifyストアの商品ページやホームページなど、特定のセクションのデザインを細かく変更できます。

ローカル環境からカスタマイズする方法

1. RubyInstallersからRubyとRuby開発キット2.7以上のバージョンをインストール
2. ソースコードのバージョン管理ツールであるGitをインストール
3. カスタマイズを行うShopifyストアを作成し、URLを取得
4. Shopifyの公式サイト（英語）からShopify CLI（コマンドラインインターフェース）をインストール
5. ターミナルを立ち上げ、開発ストアにログイン
6. 新しいテーマを作成する場合はshopify theme initを、既存のテーマをダウンロードする場合はshopify theme pullコマンドを使用

Shopifyストアのカスタマイズをローカル環境で行う手順は、上記のとおりです。開発したテーマのテストやアップロードは、CLIのコマンドを利用して行えます。より詳細な情報や具体的なコマンドについては、ShopifyのCLI公式サイト（英語）を確認してください。

ShopifyのメタフィールドにカスタムLiquidを追加する方法

1. 「設定」>「カスタムデータ」>「商品メタフィールドの定義」から該当セクションのキーを確認
2. 「オンラインストア」>「カスタマイズ」より、メタフィールドの情報を表示したい場所にカスタムLiquidのセクションを追加
3. メタフィールドの値を出力したい箇所に{{ product.metafields.custom.1で確認した該当セクションのキー }}の形式でLiquidタグを挿入

ShopifyのメタフィールドにカスタムLiquidを追加したい場合、上記の手順で作業を進めましょう。メタフィールドで定義したカスタムLiquidを利用すると、商品の色に関する情報の追加や利用上の注意点などを表示できます。

Shopify Liquidのチートシート

Shopify Liquidのチートシートとは、Shopifyのテーマ開発時に利用するLiquid言語のコマンドや構文を簡潔にまとめた便利な早見表です。基礎やオブジェクト、タグ、フィルターに関するコードを開発者がすぐに確認できるように設計されています。Shopifyのカスタマイズ作業において、コードの書き方を確認したい時や、使用可能な変数やフィルターの名前を忘れた時に役立つでしょう。

しかし、チートシートには各コードの詳細な解説は記載されていないため、使いこなすにはLiquid言語の基本的な知識がある程度求められる点には注意が必要です。

Shopify Liquidのチートシート一覧

• Shopify Developers Platform（英語）：開発者向けのチートシート
• Liquid reference（英語）：基礎・オブジェクト・タグ・フィルターについて調べやすい
• Shopify Cheat Sheet — A resource for building Shopify Themes with Liquid（英語）：必要な情報をすぐに見つけられる
• Liquid template language（英語）：基礎・タグ・フィルターについてわかりやすく記載

上記がShopify Liquidのチートシートです。実際に目を通し、使いやすいものを利用するとよいでしょう。

ShopifyのLiquidを使ううえでの注意点

ディレクトリでのミスに注意

ディレクトリとは、ファイルや他のディレクトリを整理するためのフォルダのことです。ShopifyでWebサイトをカスタマイズする際は、ディレクトリ内にLiquidファイルを保存する必要があります。その際、間違ったディレクトリにファイルを保存してしまうと、サイトの動作に悪影響を及ぼす可能性があります。

サイトが機能しないなどの問題を避けるためにも、ファイル管理を行う場合は誤って不適切なディレクトリにファイルを入れてしまわないように注意しなければなりません。問題が発生した際は、まずファイルの格納場所が正しいかどうかを確認し、必要に応じて修正しましょう。

チェックアウト画面のカスタマイズにはShopify Plusへの加入が必須

Shopifyでチェックアウト画面を細かくカスタマイズするには、Shopify Plusプランに加入する必要があります。Shopify PlusはShopifyの最上位プランで、他のプランより費用がかかる分、高度なカスタマイズや拡張機能を利用できるのが強みです。

チェックアウト画面のカスタマイズや売上の拡大、リピーターの獲得を本格的に目指す場合はShopify Plusへの移行を検討してみましょう。Shopify Plusの詳細は、公式サイトで確認できます。

Liquidファイルの増加

Shopifyで外部アプリを使用する際、Liquidファイルの管理に注意が必要です。仮にアプリをアンインストールしても、Liquidファイルがシステムに残留することがあり、不具合の原因となる場合があるためです。不具合を防ぐためにも、アプリの削除後は不要なLiquidファイルが残っていないかを確認するようにしましょう。

また、アプリのインストールやアップデートなど、Shopifyを通じてLiquidファイルを編集する際には、作業を開始する前にバックアップを取ることをおすすめします。バックアップはShopify管理画面から「オンラインストア」>「テーマ」>「アクション」>「複製」を選択することで簡単に作成可能です。バックアップがあれば、問題が発生しても元の状態に復元できるため、安心してカスタマイズ作業を進められるでしょう。

まとめ

ShopifyのLiquid言語を使いこなすことで、オンラインストアの見た目や機能を細かくカスタマイズできます。特にメタフィールドのカスタマイズや、条件分岐、繰り返し処理を活用することで、顧客に合わせたページを表示することが可能です。

ただし、チェックアウト画面のカスタマイズにはShopify Plusへの加入が必須要件であることは、前もって理解しておきましょう。また、安全にストアをカスタマイズするには、ディレクトリ管理やLiquidファイル編集前のバックアップ取得を心掛けることが重要です。Liquid言語をうまく利用し、運営するオンラインストアの魅力をさらに引き出しましょう。

ShopifyではLiquid言語を使えばより高度なカスタマイズができるものの、Shopifyの無料テンプレートやアプリを活用すればLiquidの知識がない人も魅力的なネットショップを開設できます。無料体験も実施していますので、ぜひお気軽にShopifyを活用してみてください。

文：Yukihiro Kawata