Shopifyでよく利用する、liquidのテンプレートタグの備忘録です。順次追記します。
※網羅したものではありませんので全てのタグは公式のリファレンスをご覧ください。

Liquidの仕組みは4つに分類できる

具体案を紹介する前に、リファレンスを参考に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.liquid

sections – セクショングループファイルの読み込み

sectionsフォルダのjsonファイル(セクショングループファイル)を読み込みます。

<!-- ◉入力例 -->
{% sections 'header-group' %}

<!-- ◉出力ファイル -->
sections / header-group.json

render – スニペットファイルの読み込み

snippetsフォルダのファイルを読み込みます。

<!-- ◉入力例 -->
{% render 'article-card' %}

<!-- ◉出力ファイル -->
snippets / article-card.liquid

asset – アセットファイルの読み込み

asset_url

assetsフォルダのファイルを読み込みます。

<!-- ◉入力例 -->
<script src="{{ 'cart.js' | asset_url }}" defer="defer"></script>

<!-- ◉出力ファイル -->
assets / cart.js

asset_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.js

file_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>

補足:画像サイズのパラメーターについて

名前で指定

指定名出力されるサイズ
pico16 × 16 px
icon32 × 32 px
thumb50 × 50 px
small (デフォルト)100 × 100 px
compact160 × 160 px
medium240 × 240 px
large480 × 480 px
grande600 × 600 px
original1024 × 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 height300×300
width x32×
height x50×

【参考】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">

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Web制作

前の記事

【Shopify】よく使うLiquidの条件分岐