Shopify Liquidは、Shopifyが開発したオープンソースのテンプレート言語で、オンラインストアの機能を柔軟に実装するために設計されています。HTML文書内にLiquid構文を直接記述することで、商品情報などの動的データを利用し、カスタマイズされたウェブページを作成できます。
Liquidは比較的理解しやすい構文を持ち、プログラミング経験が少ない人でも扱いやすい特徴があります。本記事では、Shopify Liquidの基本概念、主な特徴、そしてその学習に役立つリソースについて解説します。
Liquidとは
出典：Liquid｜Shopify.dev
Liquidは、Shopifyが開発したオープンソースのテンプレート言語です。HTML文書の中にLiquidの構文を使用してタグや変数を直接記述し、商品情報などのデータを利用して、動的なウェブページを作成するのに適しています。Shopifyでは、プラットフォーム特有のオブジェクトや変数も提供されており、これらを活用してeコマースサイトの機能を柔軟に実装できます。
Liquidの特徴
理解しやすい簡単な構文
プログラミング経験が少ない人でも比較的理解しやすい構文を持っています。
安全性が高い
ユーザーがサーバーサイドのコードを実行できないようになっており、セキュリティ面で優れています。
柔軟性が高い
変数、条件分岐、ループなどの基本的なプログラミング要素を提供し、複雑な処理も行えます。
テーマカスタマイズに最適
オンラインストアのデザインやレイアウトを効率的にカスタマイズできます。
ShopifyでのLiquidの役割
Shopifyにおいて、Liquidは以下のような重要な役割を果たしています
テーマのカスタマイズ
ストアのデザインや機能を柔軟にカスタマイズするために使用されます。
動的コンテンツの生成
商品情報、カート内容、顧客データなどの動的なコンテンツをウェブページに表示します。
ビジネスロジックの実装
条件分岐や繰り返し処理を使って、複雑なビジネスロジックを実装できます。
データとプレゼンテーションの分離
HTMLとデータを橋渡しし、コードの保守性を高めます。
パフォーマンスの最適化
サーバーサイドでレンダリングされるため、クライアントサイドのJavaScriptに比べて高速です。
マルチ言語対応
国際化（i18n）のサポートにより、多言語ストアの構築が容易になります。
Liquidでカスタマイズできる主な箇所
Liquidを利用することで、Shopifyテーマのカスタマイズやメール本文のカスタマイズ、領収書などの帳票のカスタマイズができます。Liquidでカスマイズできる主な箇所は以下になります。
テンプレートのコード編集
テンプレートは、ストアの各ページの基本構造を定義します。Shopifyでは、product.liquid（商品ページ）、collection.liquid（コレクションページ）、index.liquid（ホームページ）などの主要なテンプレートが用意されています。これらのテンプレートを編集することで、ページの全体的なレイアウトやコンテンツの配置を変更できます。
テンプレートの編集では、HTMLとLiquidを組み合わせて使用します。例えば、商品ページのレイアウトを変更したり、新しい機能（関連商品の表示など）を追加したりできます。テンプレートの編集は慎重に行う必要があり、変更がストア全体に影響を与える可能性があることに注意が必要です。
カスタマイズされたLiquid（セクションブロック）
カスタムLiquidは、テーマエディタで利用できるセクションブロックです。カスタムLiquidを利用することで、liquidファイルを直接編集することなく、任意の場所にliquidコードを挿入することができます。テンプレートの編集よりも影響範囲を抑えて、テーマをカスタマイズできるメリットがあります。
メールテンプレート
Shopifyでは、注文確認、出荷通知、アカウント作成などの自動メールのテンプレートをカスタマイズできます。メールテンプレートの編集により、ブランドの一貫性を維持し、顧客とのコミュニケーションを改善できます。
メールテンプレートでもLiquidを使用でき、注文情報や顧客情報を動的に挿入できます。例えば、{{ order.name }}で注文者名を表示したり、{% for line_item in order.line_items %}ループを使用して注文内容を表示したりできます。
Shopify Order Printer
Shopify Order Printerは、注文の請求書、納品書、ピッキングリストなどの帳票を出力できるShopifyアプリです。
Shopify Order Printerのテンプレートもまた、HTMLとLiquidを使用してカスタマイズできます。例えば、自社のロゴを追加したり、特定の注文情報のレイアウトを変更したりできます。{{ order.shipping_address.name }}で配送先名を表示したり、{{ order.total_price | money_with_currency }}で注文総額を表示したりできます。
下記のブログ記事ではOrder Printerに関して紹介しています。ご参考にしてください。
【完全無料】Shopifyで領収書や請求書を印刷できるアプリ「Order Printer」とは？
Liquidの基本構文
Liquidの基本構文は、変数と出力、オブジェクト、フィルター、タグ（制御フローとイテレーション）、そしてコメントアウトの5つの主要な要素で構成されています。
これらの基本構文を理解し適切に組み合わせることで、柔軟で動的なShopifyテーマを開発できます。
変数と出力
変数と出力は、Liquidの最も基本的な機能です。変数の値を出力するには、二重中括弧「{{ }}」を使用します。例えば、商品のタイトルを表示するには「{{ product.title }}」と記述します。
＜記述例＞
{{ product.title }}
新しい変数を定義する場合は、assign タグを使用します。変数のスコープは通常、それが定義されたテンプレート内に限定されます。
＜記述例＞
{% assign my_variable = "Hello, World!" %}
オブジェクト
Liquidでは、様々なオブジェクトを扱います。オブジェクトのプロパティにアクセスするには、ドット表記を使用します。
＜記述例＞
{{ product.title }}
{{ collection.products }}
Shopifyには、product（商品情報）、collection（コレクション情報）、cart（カート情報）、customer（顧客情報）などの主要なオブジェクトが用意されています。これらのオブジェクトを通じて、ストアの様々なデータにアクセスできます。
＜主要なオブジェクト＞
-
product: 商品情報 -
collection: コレクション情報 -
cart: カート情報 -
customer: 顧客情報 - article: ブログ記事の情報
- blog: ブログの情報
- shop: ストア情報
フィルター
フィルターは、出力される値を修正（または、整形）するために使用されます。フィルターを適用するには、パイプ記号（|）を使用します。
＜記述例＞
{{ product.price | money_with_currency }}
複数のフィルターを連鎖させることも可能です。
＜記述例＞
{{ "hello" | capitalize | append: "!" }}
例えば、金額を通貨形式で表示するには money フィルターを使用し、文字列の先頭を大文字にするには capitalize フィルターを使用します。
＜主なフィルター＞
-
capitalize: 文字列の先頭を大文字にします。 -
money: 金額を通貨形式で表示します。 -
date: 日付をフォーマットします。
タグ（制御フロー、イテレーション）
タグは、テンプレート内でロジックを実装するために使用されます。条件分岐には if、elsif、else タグを使用し、繰り返し処理には for タグを使用します。これらのタグを使用することで、動的なコンテンツの生成や、コレクション内の各アイテムの処理などが可能になります。また、break や continue タグを使用してループの制御を行うこともできます。
<記述例：条件分岐>
{% if product.available %}
在庫あり
{% else %}
在庫切れ
{% endif %}
<記述例：ループ>
{% for product in collection.products %}
{{ product.title }}
{% endfor %}
コメントアウト
コードにコメントを追加するには、comment と endcomment タグを使用します。これらのタグで囲まれたコンテンツは、Liquidエンジンによって無視されます。単一行のコメントや複数行のコメントを記述できます。また、Liquidコードの解析を防ぐために raw と endraw タグを使用することもあります。
<記述例：単一行のコメントアウト>
{% comment %}単一行コメント{% endcomment %}
<記述例：複数行のコメントアウト>
{% comment %}
これは
複数行の
コメントです
{% endcomment %}
<記述例：出力のコメントアウト>
{% raw %}出力のコメント{% endraw %}
Shopify特有のLiquidオブジェクト
Shopifyでは、オンラインストアの開発に特化した独自のLiquidオブジェクトが提供されています。これらのオブジェクトを使用することで、ストアの様々な情報に簡単にアクセスし、動的なコンテンツを生成することができます。以下に、主要なShopify特有のLiquidオブジェクトについて説明します。
product
productオブジェクトは、個々の商品に関する情報を含んでいます。このオブジェクトを通じて、商品のタイトル、説明、価格、画像、バリアント（サイズや色などの選択肢）、在庫状況などにアクセスできます。例えば、{{ product.title }}で商品名を表示したり、{{ product.price | money_with_currency }}で価格を通貨表示付きで表示したりできます。productオブジェクトは主に商品詳細ページで使用されますが、商品一覧ページなどでも活用されます。
collection
collectionオブジェクトは、商品のグループ（コレクション）に関する情報を提供します。コレクションのタイトル、説明、画像の他、そのコレクションに含まれる商品のリストにもアクセスできます。{{ collection.title }}でコレクション名を表示したり、{% for product in collection.products %}ループを使用してコレクション内の全商品を表示したりできます。collectionオブジェクトは、カテゴリーページや関連商品の表示などで頻繁に使用されます。
cart
cartオブジェクトは、現在のショッピングカートの状態を表します。カート内の商品数、合計金額、個々のカート内アイテムなどの情報にアクセスできます。{{ cart.item_count }}でカート内の商品数を表示したり、{{ cart.total_price | money_with_currency }}で合計金額を表示したりできます。cartオブジェクトは、カートページやミニカートの実装、ヘッダーでのカート情報の表示などに使用されます。
customer
customerオブジェクトは、現在ログインしている顧客の情報を提供します。顧客の名前、メールアドレス、注文履歴などにアクセスできます。{% if customer %}と{% endif %}を使用して、ログイン状態に応じて表示を変更したり、{{ customer.name }}で顧客名を表示したりできます。customerオブジェクトは、パーソナライズされたコンテンツの表示やアカウントページの実装に使用されます。
article
articleオブジェクトは、ブログ記事の情報を提供します。記事のタイトル、本文、作成日、著者、コメントなどにアクセスできます。{{ article.title }}で記事タイトルを表示したり、{{ article.content }}で記事本文を表示したりできます。articleオブジェクトは、ブログ記事ページやブログ記事のリスト表示などで使用されます。
blog
blogオブジェクトは、ブログ全体の情報を含んでいます。ブログのタイトル、記事のリスト、コメント設定などにアクセスできます。{{ blog.title }}でブログタイトルを表示したり、{% for article in blog.articles %}ループを使用してブログ内の全記事を表示したりできます。blogオブジェクトは、ブログのインデックスページや、サイドバーでの最新記事リストの表示などに活用されます。
shop
shopオブジェクトは、ストア全体に関する情報を含んでいます。ストア名、説明、ロゴ、通貨設定、ポリシーページへのリンクなどにアクセスできます。{{ shop.name }}でストア名を表示したり、{{ shop.email }}で連絡先メールアドレスを表示したりできます。shopオブジェクトは、ヘッダーやフッター、あるいはストア全体で共通して使用される情報の表示に活用されます。
条件分岐と制御構造
Shopify Liquidでは、様々な条件分岐と制御構造を使用して、動的なコンテンツを作成し、ロジックを実装することができます。以下に主要な構造とその使用方法を説明します。
if、elsif、else
if文は最も基本的な条件分岐構造です。特定の条件が真の場合にのみコードブロックを実行します。elsif（else if）を使用して複数の条件をチェックし、elseを使用してどの条件も満たさない場合の処理を指定できます。
例えば、商品の在庫状況に応じて異なるメッセージを表示する場合、次のように記述できます：
{% if product.available %} <p>在庫あり</p> {% elsif product.variants.first.inventory_quantity < 5 %} <p>残りわずか</p> {% else %} <p>在庫切れ</p> {% endif %}
この構造を使用することで、様々な条件に基づいてコンテンツを動的に変更できます。
下記のブログ記事では、Shopifyで在庫数を表示する方法を紹介しています。ご参考にしてください。
Shopifyで在庫数を表示する方法 3選｜Shopifyアプリも紹介
case/when
case/when構造は、複数の条件を評価する必要がある場合に便利です。特に、単一の変数に対して複数の値をチェックする場合に適しています。
例えば、商品のタイプに基づいて異なる説明を表示する場合：
{% case product.type %} {% when 'Tシャツ' %} <p>快適な着心地の100%コットン製Tシャツです。</p> {% when 'ジーンズ' %} <p>耐久性のある丈夫なデニム製ジーンズです。</p> {% else %} <p>高品質の商品です。</p> {% endcase %}
この構造により、コードをより簡潔に保ちながら、複数の条件を効率的に処理できます。
for ループ
forループは、配列やコレクション内の各項目に対して繰り返し処理を行うために使用します。これは商品リストの表示や、メニュー項目の繰り返しなど、多くの場面で活用できます。
例えば、コレクション内のすべての商品を表示する場合：
{% for product in collection.products %} <div class="product"> <h2>{{ product.title }}</h2> <p>{{ product.price | money }}</p> </div> {% endfor %}
forループには、limit、offset、reversedなどの便利なパラメータも用意されており、表示する項目数の制限や、逆順での表示などが可能です。
複数条件の設定
複雑な条件分岐が必要な場合、複数の条件を組み合わせることができます。andやorを使用して条件を結合したり、括弧を使用して条件のグループ化を行うことができます。
例えば、特定の条件下でのみ特別オファーを表示する場合：
{% if customer.tags contains 'VIP' and cart.total_price > 10000 or product.tags contains 'セール' %} <p>特別オファー対象商品です！</p> {% endif %}
このように、複数の条件を組み合わせることで、より細かな制御が可能になります。
データの操作と変換
Shopify Liquidでは、様々なデータ操作と変換が可能です。これらの機能を活用することで、より柔軟で動的なコンテンツを作成できます。以下に主要な操作と変換方法を説明します。
配列とオブジェクトの操作
Liquidでは、配列やオブジェクトを効率的に操作するための多くのフィルターと技法が用意されています。
配列の操作では、first、last、size、joinなどのフィルターが便利です。例えば、商品のタグを表示する場合：
{% if product.tags.size > 0 %} <p>タグ: {{ product.tags | join: ", " }}</p> {% endif %}
オブジェクトの操作では、whereフィルターを使用して特定の条件に合う項目をフィルタリングできます：
{% assign featured_products = collections.all.products | where: "tags", "おすすめ" %}
また、sortフィルターを使用して配列やオブジェクトをソートすることも可能です。
日付と時刻の扱い
日付と時刻の操作は、注文履歴や投稿日時の表示などで重要です。Liquidには日付フォーマットを変更するためのdateフィルターが用意されています。
<p>注文日: {{ order.created_at | date: "%Y年%m月%d日" }}</p>
また、nowタグを使用して現在の日時を取得し、操作することもできます：
{% assign one_week_from_now = 'now' | date: '%s' | plus: 604800 | date: "%Y-%m-%d" %} <p>1週間後の日付: {{ one_week_from_now }}</p>
文字列操作
文字列操作は、テキストデータの加工や表示形式の調整に役立ちます。主要なフィルターにはcapitalize、downcase、upcase、strip、truncateなどがあります。
例えば、商品説明を短縮して表示する場合：
<p>{{ product.description | truncate: 100, '...' }}</p>
また、replaceフィルターを使用して文字列の一部を置換することもできます：
{{ product.title | replace: '限定版', '<span class="highlight">限定版</span>' }}
数値計算
Liquidでは、基本的な数学演算子（+、-、*、/、%）を使用できます。また、plus、minus、times、divided_byなどのフィルターも用意されています。
例えば、割引価格を計算する場合：
{% assign discount_percentage = 0.1 %} {% assign discounted_price = product.price | times: 1.0 | minus: product.price | times: discount_percentage %} <p>割引価格: {{ discounted_price | money }}</p>
さらに、round、ceil、floorフィルターを使用して数値を丸めることもできます。
リソースと学習材料
Shopify Liquidの習得と活用には、多様なリソースと学習材料が利用可能です。これらは主に公式ドキュメント、チートシート、コミュニティフォーラムの3つに分類されます。
これらのリソースを効果的に活用するためには、公式ドキュメントを基礎として常に最新の情報を確認し、チートシートを日常的な開発作業の効率化に役立てることが重要です。コミュニティフォーラムでは、質問する前に同様の問題がすでに議論されていないか検索し、問題解決だけでなく定期的に新しい技術やトレンドを把握することも大切です。
公式ドキュメント
出典：Liquid｜Shopify.dev
Shopifyの公式ドキュメントは、Liquidを学ぶ上で最も信頼性の高い情報源です。
Shopify Liquid リファレンスでは、Liquidの全オブジェクト、フィルター、タグの詳細な説明と使用例が掲載されています。特定の機能や構文について調べる際に非常に有用で、alphabetical indexを使用すると素早く目的の情報を見つけられます。
Shopify テーマ開発ガイドは、テーマ開発の基本から応用まで段階的に学べる構成になっています。テーマ開発の全体像を把握し、ベストプラクティスを学ぶのに適しています。
さらに、Shopify Design Guidelinesでは、Shopifyのデザイン原則や推奨されるUXパターンが紹介されています。ユーザーフレンドリーなテーマを作成する際の指針として参照すると良いでしょう。
チートシート
出典：Shopify Cheat Sheet
チートシートは、頻繁に使用する構文や機能を素早く参照するのに役立ちます。
Shopify Cheat Sheetは、Liquidの基本構文、オブジェクト、フィルターがコンパクトにまとめられています。デスクトップに保存したり、印刷して手元に置いておくと便利です。
コミュニティフォーラム
出典：Shopify コミュニティ
コミュニティフォーラムは、他の開発者と知識を共有し、具体的な問題解決策を見つけるのに役立ちます。
Shopify コミュニティは、Shopify公式のフォーラムで、開発者、マーチャント、Shopifyスタッフが参加しています。具体的な問題や疑問について質問したり、他の人の質問と回答を参照したりできます。
Stack OverflowのShopifyタグは、より技術的な問題や、Liquidと他の技術を組み合わせる際の問題解決に役立ちます。
また、Redditのr/shopifyサブレディットでは、Shopify関連の幅広いトピックが議論されており、最新のトレンドや他の開発者の経験談を知るのに適しています。
最後に
Shopify Liquidは、オンラインストアのデザインやレイアウトを効率的にカスタマイズするのに便利な言語です。基本的な変数操作から複雑な条件分岐まで、様々な機能を提供し、動的で柔軟なウェブページの構築を可能にします。
Liquidの学習と活用には、公式ドキュメント、チートシート、コミュニティフォーラムなど、多様なリソースが利用可能です。これらのリソースを効果的に組み合わせることで、Shopify Liquidの理解を深め、効果的なテーマ開発のスキルを磨くことができます。
