Shopify Liquidとは

Liquidとは、Shopifyが開発したテンプレート言語です。 プログラミング言語のように構文があり、変数（データ）を扱います。 Liquidは、HTMLの中にShopify特有の構文が混ざったもので、ECサイトの見た目を作成できます。Liquidは動的コンテンツで記載されるので、ECサイトのデザインに独自性を出すことができます。

＼ECサイトの売上を上げたいなら／

ECサイト18,000件※以上の支援実績をもとに、売上を上げる秘訣を無料アドバイスいたします。
今よりもっと売上を上げていきたい方、これからEC事業を始める方にもお役立ていただける無料相談会です。 ECのプロが貴社のお悩みを解決いたしますので、お気軽にご相談ください！

＼費用はかかりません／

無料でアドバイスをもらう ▶
個人事業主の方は入力フォームで「個人」としてご入力ください。

※当社2023年10月実績

Liquidの主な埋め込み方法

Liquidを使用してECサイトの見た目を作るには、HTMLの構文内にLiquid特有の構文を埋め込む必要があります。主な埋め込み方法は以下の通りです。

• Object　{{ }}
• Tags　{% %}

それぞれ説明いたします。

Object

Objectは、テーマ構築に使用できる変数のことです。 {{ }}は出力を示します。{{ }}の中に、オブジェクト、プロパティ、文字列を書くことで、出力したい文字を表示させることができます。

上記のように、prodact Objectにtitleを書き製品名を入れると、書いた製品名が出力されます。

引用：Shopify

石澤ちゃんコメント

Liquid Objectは、 Liquid 変数とも呼ばれますっ。

Tags

Tagsは、{% %}で囲んで記述する繰り返しや条件分岐の記述のことです。 {% %}はロジックを示します。主に、for文やif文などがあります。

まず、if文からご紹介します。

if構文は条件を表現することができます。 上記の例では、ifは満たされる条件を定義しています。prodact.availableが返された場合trueとなり、右図のように価格が表示されます。それ以外の場合は、「売り切れ」と表示されます。

引用：Shopify

次に、for文をご紹介します。

for構文を使用すると、このように同じ要素を何回も繰り返して表示することができます。

引用：Shopify

まとめ

今回は、Shopify が独自開発をしたLiquidについてご紹介いたしました。 Liquidを使うと、動的なサイトが作成できるので独自性のあるECサイトを作ることができます。是非トライしてみてくださいね。