Shopifyでよく利用する、liquidのテンプレートタグの備忘録です。順次追記します。
※網羅したものではありませんので全てのタグは公式のリファレンスをご覧ください。
Liquidの仕組みは４つに分類できる
具体案を紹介する前に、リファレンスを参考にLiquidの全体像を把握しておきます。
Basics
通常のプログラミング言語と共通する部分が多い、基礎的な仕組みがまとめられています。
具体的には、型や演算子の扱い方、ハンドルの分類などです。
Objects – {{ ~ }}
Shopifyで使用される、商品・コレクション・顧客・ページなどの「データ・モノ」を扱う仕組みです。
出力タグ {{ ~ }} で、値を出力します。フィルター(Filters)を利用して出力内容をコントロールすることも可能です。
Tags – {% ~ %}
「データ・モノ」を操作して、任意の表現を実現する仕組みです。
処理タグ {% ~ %} で、変数の利用できたり条件分岐などで使用します。
Filters – {{ ●● | filter }}
” | (パイプ記号)”を使用して、表示させる「データ・モノ」に独自の処理(フィルター)をかけることができます。
【参考】
Liquid reference – Syntax tags
https://shopify.dev/docs/api/liquid/tags/syntax-tags
Shopify Liquid Cheat Sheet
https://www.shopify.com/partners/shopify-cheat-sheet
Basics – Liquidの基礎知識
型(Types)
String：文字列
Number：数列
Boolean：真偽値
Nil：空の値(null)
Array：配列
EmptyDrop：演算子(Operators)
==
!=
<
>
>=
<=
and: AND演算子
or: OR演算子
contains: 指定した文字列を含むか？→真偽値を返します記法：{% ●● %}と{%- ●● -%}の違い
ハイフン( – )があってもなくても、基本的には両方とも機能します。ハイフンを記述することで、Liquidのレンダリング時に余分な空白を発生させないための記法です。
//ハイフンが無い場合
{% assign my_variable = "tomato" %}
{{ my_variable }}
//出力
←空白が生まれる
tomato//ハイフンがある場合(※例えば右側にだけハイフンを設置した場合、右側に生まれる空白だけを削除する)
{% assign my_variable = "tomato" -%}
{{ my_variable }}
//出力
tomato【参考】
Liquid reference – Whitespace control
https://shopify.dev/docs/api/liquid/basics#whitespace-control
Liquid – Whitespace control
https://shopify.github.io/liquid/basics/whitespace/
【参考】Liquid reference – Basics
https://shopify.dev/docs/api/liquid/basics
ファイルの読み込み
section – セクションファイルの読み込み
sectionsフォルダのliquidファイルを読み込みます。
<!-- ◉入力例 -->
{% section 'main-password-header' %}
<!-- ◉出力ファイル -->
sections / main-password-header.liquidsections – セクショングループファイルの読み込み
sectionsフォルダのjsonファイル(セクショングループファイル)を読み込みます。
<!-- ◉入力例 -->
{% sections 'header-group' %}
<!-- ◉出力ファイル -->
sections / header-group.jsonrender – スニペットファイルの読み込み
snippetsフォルダのファイルを読み込みます。
<!-- ◉入力例 -->
{% render 'article-card' %}
<!-- ◉出力ファイル -->
snippets / article-card.liquidasset – アセットファイルの読み込み
asset_url
assetsフォルダのファイルを読み込みます。
<!-- ◉入力例 -->
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>
<!-- ◉出力ファイル -->
assets / cart.jsasset_img_url
assetsフォルダの画像を読み込みます。
asset_img_url パラメーターを指定しない場合(デフォルト)では smallサイズ(100px*100px)を返します。
<!-- ◉入力例 -->
<img src="{{ 'image.png' | asset_img_url }}">
<img src="{{ 'image.png' | asset_img_url: 'large' }}">
<!-- ◉出力ファイル -->
assets / cart.jsfile_url
Shopify管理画面からアップロードしたファイルを読み込みます。
<!-- ◉入力例 -->
<img src="{{ 'sample.jpg' | file_url }}">
<!-- ◉出力例 -->
https://cdn.shopify.com/s/files/1/0000/1111/2222/files/sample.jpg?v=0123456789
file_img_url
Shopify管理画面からアップロードしたファイルを読み込みます。
file_img_urlパラメーターを指定しない場合(デフォルト)では smallサイズ(100px*100px)を返します。
<!-- ◉入力例 -->
<img src="{{ 'sample.jpg' | file_img_url }}">
<img src="{{ 'sample.jpg' | file_img_url:'large' }}">
<!-- ◉出力例 -->
https://cdn.shopify.com/s/files/1/0000/1111/2222/files/sample.jpg?v=0123456789
global_asset_url
Shopifyにホストされているグローバルアセットファイルを読み込みます。
【読み込めるファイル一覧】
https://shopify.dev/docs/api/liquid/filters/global_asset_url
<!-- ◉入力例 -->
{{ 'lightbox.js' | global_asset_url | script_tag }}
{{ 'lightbox.css' | global_asset_url | stylesheet_tag }}
<!-- ◉出力例 -->
<script src="//example.com/cdn/s/global/lightbox.js" type="text/javascript"></script>
<link href="//example.com/cdn/s/global/lightbox.css" rel="stylesheet" type="text/css" media="all" /> -->
shopify_asset_url
Shopifyにホストされているグローバルアセットファイルを読み込みます。
【読み込めるファイル一覧】
https://shopify.dev/docs/api/liquid/filters/shopify_asset_url
<!-- ◉入力例 -->
<script src="{{ 'option_selection.js' | shopify_asset_url }}" defer="defer"></script>
<!-- ◉出力例 -->
<script src="//example.jp/cdn/shopifycloud/shopify/assets/themes_support/option_selection-00000.js"></script>補足：画像サイズのパラメーターについて
名前で指定
| 指定名 | 出力されるサイズ |
|---|---|
| pico | 16 × 16 px |
| icon | 32 × 32 px |
| thumb | 50 × 50 px |
| small (デフォルト) | 100 × 100 px |
| compact | 160 × 160 px |
| medium | 240 × 240 px |
| large | 480 × 480 px |
| grande | 600 × 600 px |
| original | 1024 × 1024 px |
| master | オリジナルサイズ |
【参考】Liquid filters: img_url https://shopify.dev/docs/api/liquid/filters/img_url#img_url-size
数値で指定
最大 5760 x 5760 px までの数値を指定することが可能です。
| 指定方法 | 記述例 |
|---|---|
| width x height | 300×300 |
| width x | 32× |
| height x | 50× |
【参考】Liquid filters: img_url https://shopify.dev/docs/api/liquid/filters/img_url#img_url-size
リンクの取得・出力
{{ routes.root_url }} ルート
routes オブジェクト。
サイトのルート( / )を返します。
<!-- ◉入力例 -->
<a href="{{ routes.root_url }}">
<!-- ◉出力例 -->
<a href="/">{{ shop.url }} トップページ
サイトのトップページを返します。
<!-- ◉入力例 -->
<a href="{{ shop.url }}">
<!-- ◉出力例 -->
<a href="https://example.com">{{ canonical_url }} 現在のページ
今いるページのURLを返します。
<!-- ◉入力例 -->
<a href="{{ canonical_url }}">
<!-- ◉出力例：コレクション一覧ページにいる場合 -->
<a href="https://example.com/collections">{{ collections[‘hoge’].url }} 指定したコレクションページ
指定したコレクションページのURLを返します。
<!-- ◉入力例 -->
<a href="{{ collections['hoge'].url }}">
<!-- ◉出力例 -->
<a href="https://example.com/collections/hoge">Product Objects | 商品情報の取得・出力
{{ product.url }} 商品URL
商品の相対URLを返します。
<!-- ◉入力例 -->
data-url="{{ product.url }}"
<!-- ◉出力例 -->
data-url="/products/xxx"【参考】
Liquid reference
https://shopify.dev/api/liquid
Shopify Liquid Cheat Sheet
https://www.shopify.com/partners/shopify-cheat-sheet
Github Shopify/liquid
https://github.com/Shopify/liquid
