Shopify Liquidとは

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

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サイトを作ることができます。是非トライしてみてくださいね。