Liquid

変数

https://shopify.dev/api/liquid/tags#variable-tags

assign

{% assign var_1 = "hoge" %}
{% assign var_2 = product.title %}

{{ var_1 }}
{{ var_2 }}

capture

{% capture var_3 %}
<ul>
  <li>line 1</li>
  <li>line 2</li>
</ul>
{% endcapture %}

{{ var_3 }}

• capture の中に assign で定義した変数の代入も可能

{% assign x = '123' %}
{% capture y %}
{{ x }}
{% endcapture %}

{{ y }}
# 123

画像

https://shopify.dev/api/liquid/filters#media-filters

画像サイズ

https://shopify.dev/api/liquid/filters#img_url-size

• pico
  • 16x16 px
• icon
  • 32x32 px
• thumb
  • 50x50 px
• small
  • 100x100 px
• compact
  • 160x160 px
• medium
  • 240x240 px
• large
  • 480x480 px
• grande
  • 600x600 px
• original / master
  • 1024x1024 px

{{ product | img_url: '480x' }}
{{ product | img_url: 'x480' }}
{{ product | img_url: '480x480' }}
{{ product | img_url: 'large' }}

コレクション

https://shopify.dev/api/liquid/objects#collections

特定のコレクション

{% assign hoge = collections['hoge'] %}

{{ hoge.image | image_url: width: 800 | image_tag }}
{{ hoge.title }}
{{ hoge.description }}

配列

• 他のプログラミング言語のような [] を使った配列がない
• 多重配列は難しそう

https://shopify.dev/api/liquid/tags

1. 特定の文字列を区切り文字で分割
2. 配列にする
3. ループで回す

{% assign numbers = '1,2,3,4,5' | split: ',' %}

{% for item in numbers limit:3 -%}
  {{ item }}
{%- endfor %}