【Shopify開発言語】Liquidとは|概要からObject・Tagsについても解説

category :  EC売上UP

update :  2022/10/31(月)

staff :  石澤ちゃん

ネットショップの支援実績12,000 件超! / (※2022年7月18日現在)
ネットショップの売上UPを支援するどヘンタイ集団「株式会社これから」

Shopifyを使えば、HTMLやCSSなどがわからなくてもECサイトを構築することができます。しかし、開発言語を知っておいた方がより独自性のあるECサイトを構築することができます。今回は、Shopifyが独自に開発した「Liquid」というテンプレート言語についてご紹介いたします。


【ShopifyでのEC運営につまずきたくないなら!】
ネットショップ事業者の支援を専門にしている弊社が、2,000社*以上の支援実績をもとにしたノウハウをまとめた「Shopify運営のコツ」を無料でご提供します。
▶資料を試し読みしてみる


Shopify Liquidとは

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


【ShopifyでのEC運営につまずきたくないなら!】
ネットショップ事業者の支援を専門にしている弊社が、2,000社*以上の支援実績をもとにしたノウハウをまとめた「Shopify運営のコツ」を無料でご提供します。
▶資料を試し読みしてみる

Liquidの主な埋め込み方法

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

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

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


Object

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

コード

1 {{product.title}} 

1 Health potion


データ

1 {
2″product”:{
3″title”:”Health potion”
4 }
5 }

1 Health potion

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

引用:Shopify

石澤ちゃんコメント

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


Tags

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

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

コード

1 {% if product.available %}
2 Price:$99.99
3 {% else %}
4 Sorry,this product is sold out.
5 {% endif %}  

 1 Price:$99.99


データ

1 {
2 “product”{
3 “available”:true
4 }
5 }  

 1 Price:$99.99

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

引用:Shopify

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

コード

1 {% assign numbers =’1,2,3,4,5|split’,’%}
2
3 {%for item in numbers limit:2 -%}
4 {{item}}
5 {%-endfor %}  

  1
2

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

引用:Shopify

まとめ

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


【ShopifyでのEC運営につまずきたくないなら!】
ネットショップ事業者の支援を専門にしている弊社が、2,000社*以上の支援実績をもとにしたノウハウをまとめた「Shopify運営のコツ」を無料でご提供します。
▶資料を試し読みしてみる

SNSでシェアする

売れるECサイトを
作りたいなら
\無料相談を活用/
売れるECサイトを作りたいなら
12,000件*以上の支援実績がある
これからに
お任せください。

お電話でのお問い合わせも
お待ちしております
03-5363-1966
※2022年7月18日現在