☰
YOSUKE-BLOG Written by よーすけ@Shopfiyフリーランス

【初心者向け】Shopifyをカスタマイズ Liquid言語の基本構文を解説

PROGRAMMING Shopify

YOSUKE DESIGN

Shopify勉強してるけど、Liquidって難しいなー。コードを編集したいけど、Liquidの部分をどうやって編集したりするのか、全然わからないなー。誰か説明して欲しいなー。

この疑問にお答えします。

※Liquid構文を触らなくても、HTML,CSSの知識があれば、Shopifyのデザインを変更出来ますので、それよりさらにレベルアップしたい方向けの解説になります。

この記事の内容

この記事を書いている僕は、現役Shopify developerで、Liquidコードをゴリゴリ書いてShopifyのテーマ開発、編集をしています。
できるだけ初心者にもわかりやすいように解説していますが、プログラミングの知識がないと、理解がちょっと厳しいかもです^_^;

Shopify Liquid構文 とは

Shopify Liquid構文 基礎知識

Shopify Liquidテンプレート言語は、PHPのようなWeb中心の言語と似ています。Liquidファイルの拡張子は.liquid でLiquidファイルは、HTMLの文中にLiquidコードを直接書くことが出来ます。

Liquidのテンプレート言語を理解する上でおさえておきたいポイントは３つです。
　　

  • ①Liquid オブジェクト
  • ②Liquid タグ
  • ③Liquid フィルター

順番に説明していきます。

(学習方法の参考： →【初心者用】Shopify Liquid 学習方法のまとめ)

Shopify Liquid構文 オブジェクト

Shopify Liquid構文 基礎知識

Liquid オブジェクト とは

  • オブジェクトは、ページ上のコンテンツの表示する場所をLiquidに指示
  • 書き方は {{ ●●● }}

ちょっと難しい説明になっていますが、簡単に言うと{{ ●●● }}と書いたら、●●●が出力（アウトプット）されて表示されます。●●●は、オブジェクトか変数名が入ります。

※プログラミング初心者だと、この動的な部分（出力）や変数の理解が難しいと思います。
JS、PHPやRubyの基礎文法を少し勉強すると理解が早いと思いますので、ちょっと遠回りかもですがプロゲートとかで、一通りの学習をおすすめします。

出力（アウトプット）を例で説明します。


   
{{ page.title }}

この場合、レンダリングして（もとになる情報を整形して表示する）ブラウザーで見ると、下記のように、現在見ているページのタイトルが{{ }}の部分に出力（アウトプット）されます。


    ページのタイトル

補足：プレイスホルダー

補足として、「プレースホルダー」という概念も理解しておくと、よりわかってきます。「プレースホルダー」とは、IT用語として簡単に説明すると、「正式な値が入るまで一時的に場所を確保しておくために入れておく値」のことです。

Shopifyでは、{{ ●●● }}をこのプレースホルダーとして捉えることが出来ます。最終僕たちが見るブラウザを見るときは、このプレースホルダーが、データに置き換わります。このデータに関しては、テンプレート内のLiquidコードの結果として、テーマ開発者が設定出来ます。

プレースホルダーをより具体的に説明すると、、、

例えば、〇〇 くんへ

と書いた場合、ここの 〇〇 には、誰かの名前が入りますよね。太郎くんだったり。「取りあえず仮のものを入れておくから好きに置き換えてね」が役割です。

Shopify Liquid構文 タグ

Liquid タグ とは

  • タグは、テンプレートに何をすべきかを指示するロジックと制御フローを作成
  • 書き方は {{% ●●● %}}

タグ{{% %}} は、オブジェクト{{ }}のように、実際のWebページで表示されません。何をするかと言うと、変数の割り当てや、if文などのロジックやコンテンツの制御をするために使います。商品の在庫がある場合とない場合で異なる内容を表示させることができます。

　　

変数の割り当てを例で説明


   
{% assign food = "りんご" %}

出力するには、１つ目で紹介した オブジェクト を使用して、{{ ●●● }}を書きます。


   
{{ food }}

ブラウザーで見ると


    りんご

初心者の時、この変数っていうのが全然わからなかったんですよねー汗

算数で三角形の面積求めるとき、底辺 × 高さ ÷ 2 という公式があって、その「底辺」とか「高さ」に入る数字っていろいろ変わると思うんですね。今回例に出した「food」も同じで、「底辺」とか「高さ」と一緒でいろいろ変わるので、変数っていうのを置く感じです。

条件を例で説明


{% if product.available %}
    
Price: 9,800円

    {% else %}
    
Sold Out

    {% endif %}

もし、商品が売り切れていたら


    Sold Out

と出力（アウトプット）されます。

標準で使用できるタグ一覧

  • assign – 新しい変数を作成する
  • break – ループを抜ける
  • capture – タグで囲んだ範囲を変数に代入する
  • case – case文
  • comment – テキストをコメントアウトする
  • continue 現在のループをスキップして次のループへ進む
  • cycle – 色やDOMのclassを設定する用途などで複数の値を順番に切り替えるために使用される
  • for – forループ
  • if – 条件分岐
  • unless – 条件分岐 ifの否定文
  • include – 部分的なテンプレートなど、snipetsフォルダーにある、他のテンプレートファイルを読み込む
  • raw – 構文の衝突を避けるために、一時的にタグ処理を無効にする

すべてのLiquidコードの組み立ては、最初に説明したオブジェクト{{ }} か、今回のタグ{{% %}}のどちらかで始まります。

Shopify Liquid構文 フィルター

Liquid構文 フィルター

Liquid フィルター とは

  • フィルターは、数値、文字列、変数、およびオブジェクトの出力を変更するメソッド
  • 書き方は {{ ●● | ▲▲ }}

フィルターは、文字列、数値、変数、およびオブジェクトの出力を変更するメソッドで、{{ }} の中で使用され、｜ で区切ります。

フィルターは数多くあります。

フィルターを使うことで、様々な処理を行えるので、公式ドキュメントを参照して、必要な時に使って学習していきましょう。

※プログラミング初心者だと、メソッドの理解はちょっと難しいので上記のオブジェクトとタグを理解してからで全然大丈夫です。
このフィルターっていうのを使うと、出力（アウトプット）が変わるんだなーという理解で十分です。

僕も初心者のうちは、わからずなんとなくの理解で突っ走ってましたので ^_^;

Array 配列を操作するフィルター。
join,first,last,concat,index,
map,reverse,size,sort,where,uniq
Color カラーコード関係を操作するフィルター。
color_to_rgb,color_to_hsl,color_to_hex,color_extract,
color_brightness,color_brightness,color_lighten,
color_darken,color_saturate,color_desaturate,
color_mix,color_contrast,color_difference,brightness_difference
Font フォント関係を操作するフィルター
font_modify,Handling font variants,font_face,font_url
HTML HTMLタグを生成するフィルター。
img_tag,currency_selector,payment_button,script_tag,stylesheet_tag,
time_tag,payment_type_svg_tag
Math 数値を計算できるフィルター。
abs,at_most,at_least,ceil,divided_by,
floor,minus,plus,round,times,modulo
Media external_video_tag,external_video_url,
img_tag,img_url,media_tag,model_viewer_tag,video_tag,
Money 金額を出力するフィルター。
money,money_with_currency,money_without_trailing_zeros,
money_without_currency,
String append,camelcase,capitalize,downcase,escape,
handle/handleize,md5,sha1,sha256,hmac_sha1,hmac_sha256newline_to_br,
pluralize,prepend,remove,remove_first,replace,replace_first,slice,
split,strip,lstrip,rstrip,strip_html,strip_newlines,truncate,
truncatewords,upcase,url_encode,url_escape,url_param_escape,
Reversing strings
URL 文字列を操作するフィルター。
asset_url,asset_img_url,file_url,file_img_url,
customer_login_link,global_asset_url,img_url,link_to,
link_to_vendor,link_to_type,link_to_tag,link_to_add_tag,
link_to_remove_tag,payment_type_img_url,shopify_asset_url.
sort_by,url_for_type,url_for_vendor,within
Additional サイトで使用するURLを生成するフィルター。
date,format,default,default_errors,default_pagination,
format_address,highlight,highlight_active_tag,json,
weight_with_unit,placeholder_svg_tag,

Shopify Liquid構文 まとめ

Liquid構文 まとめ

Shopify Liquid の基礎構文について、書き方の解説は以上になります。

オブジェクトの{{ ●●● }}、 タグの{{% ●●● %}}、フィルターの{{ ●● | ▲▲ }} 。

この３つのポイントを押さえて、どんどんLiquidのコーディングに挑戦してみてください。

参考学習教材と資料

英語ですが、下記Udemy教材のセクション5:Liquid Basics and Shopify File Structure という項目で、Shopify Liquid の基礎構文のオブジェクトとタグの説明をしてくれているので、興味があれば勉強して見てください。（このliquidの構文の説明してる教材少ないんですよね。。。笑　※Liquidの構文の説明をガッツリというわけではないですが、ファイル構成なども学べるのでオススメです。）

Shopify Expert Bootcamp: Start Working For Yourself

Learn how to build Professional Highly Converting stores. Shopify Partners, Theme, Liquid, Figma, and Design.

挑戦する中で、下記３つの公式ドキュメントとチートシートを使うと理解力が上がります。

Liquidの学習方法を知りたい人向けの記事

【初心者用】Shopify Liquid 学習方法のまとめ | YOSUKE-BLOG

ShopifyのLiquidを学習する人が増えましたので、少しでもお役に立てればと。ここに学習したことのアウトプットをしていきます。Shopify Liquid学習 コードの基礎知識、Shopify Liquid学習 テーマのファイル構成、Shopify Liquid学習 テーマの開発の手順

RELATED

【Shopify学習】役立つ Tips集【随時更新】...

Shopify

【Shopify UNITE 2021】大事なポイントのまとめ...

Liquid

【Shopify学習】ECサイトの基礎知識【初心者向け】...

Marketing

Shopify LiquidのVS Codeの拡張機能　おすすめ...

PROGRAMMING

>  >  【初心者向け】Shopifyをカスタマイズ Liquid言語の基本構文を解説