はじめに

shopifyでは誰でも簡単にECサイトを作ることができます。
shopifyでサイトを作るにあたって、shopifyが独自に開発した言語「Liquid」というものがあります。shopifyを使っていく中で、

「そもそもLiquidってなに？」
「Liquid使ってみたいけど、どのように使えばいいの？」

こういった疑問をお持ちではないでしょうか？
この記事ではshopify独自開発言語「Liquid」とは何か、使い方と注意点について解説していきます。この記事でLiquidについての理解を深め、ECサイトをカスタマイズしてみましょう。

1. Shopifyの独自開発言語Liquidとは？

Liquidは、Shopifyを利用する際に欠かせない重要な要素であり、ECサイトのカスタマイズやパーソナライゼーションを実現するための強力なツールです。

Liquidとは何か

Liquidは、Shopifyが開発したテンプレートエンジンおよび独自のプログラミング言語です。テンプレートエンジンとは、動的なWebページを生成する際にテンプレート（雛形）を使用して、コンテンツを動的に挿入・表示する仕組みを指します。Liquidは、このテンプレートエンジンを実現するために開発されました。

Shopifyでの利用目的

Shopifyは、主にEC（電子商取引）プラットフォームとして利用されており、オンラインストアを運営する際に使用されることが多いです。Liquidは、Shopifyのテーマエンジンとして用いられ、オンラインストアのデザインやレイアウト、商品ページの表示など、様々な部分で活用されます。具体的には、商品情報の表示、カートの挙動、商品ページやカテゴリーページのカスタマイズなど、ECサイトの見た目と機能性を高めるために使用されます。

Liquidの特徴と利点

Liquidの特徴と利点を5つ紹介します。

1. 構文がシンプルでとっつきやすい

Liquidは簡単な構文であり、HTMLやCSSの基本的な知識があれば使いやすいです。誰でも比較的容易にカスタムテンプレートを作成できます。

2. 表示の自由度が高い

Liquidでは変数、フィルター、タグの組み合わせによって、商品情報やカート内の商品数などの動的な情報を簡単に表示できます。個別化された表示を実現し、マーケティングや販促活動の効果を高めることができます。

3. Shopifyとの連携できる

LiquidはShopifyと連携しており、Shopify独自のデータや機能にアクセスすることが簡単です。注文情報や顧客情報の取得、カートの挙動の制御などが可能です。

4. テーマの再利用

Liquidで作成したテーマは再利用が可能です。同じテーマを別のECサイトに適用できるため、デザインやレイアウトの統一性を保ちながら、複数のオンラインストアを効率的に運営できます。

5. コミュニティのサポート

Shopifyは広く利用されており、Liquidに関する豊富な情報やコミュニティが存在します。問題解決や知識共有が簡単であり、高度なカスタマイズを行う際に役立ちます。

2. Liquidの基本的な使い方

2.1 Object(オブジェクト)

Liquidでは、オブジェクトはデータを含んだ要素を指します。例えば、商品情報や顧客情報など、ECサイトで表示する必要があるデータは、オブジェクトとして扱われます。これらのオブジェクトには、プロパティと呼ばれるデータの要素が含まれており、それぞれのプロパティには個別の値が割り当てられています。

例：商品情報を含むオブジェクトの表示
{% assign product = {
  "title": "商品A",
  "price": 1000,
  "stock": 10
} %}

商品名: {{ product.title }}
価格: {{ product.price }}円
在庫数: {{ product.stock }}個

この例では、商品情報を含むオブジェクト"product"を定義しています。その後、商品のタイトル、価格、在庫数をそれぞれ表示しています。`{{ オブジェクト名.プロパティ名 }}`の形式を使ってオブジェクトの各プロパティにアクセスし、値を表示しています。

例：変数を用いたオブジェクトプロパティの表示
{% assign product = {
  "title": "商品B",
  "price": 1500,
  "stock": 5
} %}

{% assign propertyName = "title" %}
商品名: {{ product[propertyName] }}

この例では、変数"propertyName"にプロパティ名"title"を代入し、その変数を使ってオブジェクトのプロパティにアクセスしています。`{{ オブジェクト名[変数名] }}`の形式を使って、動的にプロパティを指定して表示しています。

2.2 Tags(タグ)

Liquidでは、Tags(タグ)は {% と %} の特殊な構文で囲まれたコードブロックを指します。タグは通常のテンプレートタグとは異なり、動的な処理や制御を行うために使用されます。Liquidのタグは、条件分岐やループなどのプログラムの制御フローを作成する際に非常に便利です。

例1：条件分岐
{% assign price = 1200 %}
{% if price > 1000 %}
  <p>この商品は割引対象です！</p>
{% else %}
  <p>この商品は割引対象外です。</p>
{% endif %}

この例では、priceという変数が1200という値に代入されています。if文を使って、価格が1000円を超える場合は「この商品は割引対象です！」と表示され、それ以外の場合は「この商品は割引対象外です。」と表示されます。

例2：ループ
<ul>
  {% for product in products %}
    <li>{{ product.title }} - 価格: {{ product.price }}円</li>
  {% endfor %}
</ul>

この例では、productsというリストがあると仮定しています。for文を使って、リストの中身を順番に表示します。各商品のタイトルと価格がリスト項目ごとに表示されます。

例3：変数の代入と演算
{% assign discountRate = 0.1 %}
<p>割引率は {{ discountRate | times: 100 }}% です。</p>

この例では、discountRateという変数に0.1（つまり10%の割引率）を代入しています。割引率を表示する際に、`times`というフィルターを使って100倍して表示しています。

2.3 Filters(フィルター)

Liquidのフィルターは変数やオブジェクトの値を柔軟に変換するのに役立ちます。フィルターを利用することで、テンプレート内でのデータの整形や加工を簡単に行うことができます。開発者やデザイナーはこれらのフィルターをうまく活用して、ECサイトのカスタムテンプレートにおいてより魅力的な表示を実現できます。

例1：通貨形式に変換するフィルター
{% assign price = 1500 %}
価格: {{ price | currency }}

この例では、priceという変数に1500という値を代入しています。`currency`フィルターを使って、変数priceの値を通貨形式に変換して表示しています。結果は、"価格: ￥1,500"のようになります。

例2：文字列を大文字に変換するフィルター
{% assign productName = "商品A" %}
商品名: {{ productName | upcase }}

この例では、productNameという変数に"商品A"という文字列を代入しています。`upcase`フィルターを使って、変数productNameの値を大文字に変換して表示しています。結果は、"商品名: 商品A"のようになります。

例3：文字列を切り詰めるフィルター
{% assign longText = "これは長いテキストの例です。" %}
切り詰めテキスト: {{ longText | truncate: 10 }}

この例では、longTextという変数に"これは長いテキストの例です。"という文字列を代入しています。`truncate`フィルターを使って、変数longTextの文字列を10文字まで切り詰めて表示しています。結果は、"切り詰めテキスト: これは長…"のようになります。

3. Liquidを使用する際の注意点

3.1 外部アプリ利用がLiquidのファイルに影響を与える

Shopifyのテーマカスタマイズでは、Liquidファイルを使用してテンプレートやデザインをカスタマイズします。しかし、外部アプリやプラグインを導入する際に、これらのアプリがLiquidファイルを追加・変更することがあります。外部アプリのカスタマイズがテーマのLiquidファイルに影響を及ぼす可能性があるため、注意が必要です。アプリをインストールする前に、テーマファイルのバックアップを取っておくことが重要です。

3.2 ディレクトリ記載の間違い

Liquidファイルを編集する際に、特定のディレクトリ内にあるファイルを変更する必要がある場合があります。しかし、間違ったディレクトリを記載してしまうと、意図しないファイルが変更されてしまう可能性があります。これにより、テーマにエラーや予期しない動作が生じる可能性があるため、ディレクトリを正確に記載することが重要です。ディレクトリの指定は慎重に行い、誤って他のテンプレートファイルを変更しないようにしましょう。

3.3 チェックアウト画面のカスタマイズは、Shopify Plusプランで

Shopifyでは、ECサイトのチェックアウト画面のカスタマイズに制限があります。通常のShopifyプランでは、チェックアウトページのLiquidファイルを直接編集することはできません。チェックアウト画面のカスタマイズを行いたい場合は、Shopify Plusプランを利用する必要があります。Shopify Plusプランでは、Liquidファイルの編集が許可されており、高度なカスタマイズを実現することができます。ただし、Shopify Plusプランは料金が高額であり、小規模なECサイトには必要ない場合もあるため、プラン選択には注意が必要です。

4. まとめ

この記事では、shopifyのオリジナル開発言語「Liquid」について解説しました。Luquidの基本的な使い方、利用するときの注意点が分かると、あなたのECサイトをより良くカスタマイズすることもできます。Luquidにある程度、慣れてきたらShopify Plusプランに加入することで表現の幅をさらに広げることができます。ShopifyでECサイトを作っている方、作ろうと思っている方はLuquidをぜひ活用してみてくださいね。

弊社クオーツでは、Shopifyを用いたD2Cの開発を行っております。
こちらのお問い合わせフォームからお見積り・ご相談ください。