Shopify Liquid テーマタグ｜render・section・content_for・schema・form

snippets フォルダのファイルを読み込んで表示します。

書き方

{% render 'スニペット名', 引数: 値 %}

読み込んだ側の変数は見えない（独立した範囲で動く）ため、必要な値は引数で渡します。for: で配列を渡すと要素ごとに繰り返し表示できます。

例

{% render 'product-card', product: product, show_vendor: true %}
{% render 'tag-chip' for product.tags as tag %}

公式ドキュメント　｜　目次へ戻る ↑

スニペットを読み込む古い書き方です。

書き方

{% include 'スニペット名' %}

非推奨です。読み込み元の変数を書き換えられるため動作が追いにくく、表示速度にも不利です。新しく書くときは render を使います。

非推奨　代わりに：render

例

{% # 旧: include 'price' / 新: 次のように書き換える %}
{% render 'price', product: product %}

公式ドキュメント　｜　目次へ戻る ↑

セクションファイルを、決まった位置に固定で表示します。

書き方

{% section 'セクション名' %}

固定表示なのでテーマエディタで並べ替え・削除はできません。ヘッダーやフッターは現在 sections タグ（セクショングループ）で出すのが主流です。

例

{% section 'announcement-bar' %}

公式ドキュメント　｜　目次へ戻る ↑

セクショングループ（header-group など）をレイアウトに表示します。

書き方

{% sections 'グループ名' %}

Online Store 2.0 で加わった仕組みで、ヘッダーやフッターの中身をテーマエディタから追加・並べ替えできるようになります。

例

{% sections 'header-group' %}
{{ content_for_layout }}
{% sections 'footer-group' %}

公式ドキュメント　｜　目次へ戻る ↑

テーマブロック（blocks フォルダの部品）を表示する場所を作ります。

書き方

{% content_for 'blocks' %}

'blocks' で利用者が追加したブロックを並べ、'block' と type・id を指定すると特定のブロックを固定表示できます。Horizon など新しいテーマの中心となるタグです。

例

<div class="group">
  {% content_for 'blocks' %}
</div>
{% content_for 'block', type: 'price', id: 'main-price' %}

公式ドキュメント　｜　目次へ戻る ↑

セクションやブロックの設定項目を JSON で定義します。

書き方

{% schema %} { JSON } {% endschema %}

ここに書いた settings がテーマエディタの入力欄になります。1ファイルに1つだけ書け、中で Liquid は使えません。

例

{% schema %}
{
  "name": "お知らせ",
  "settings": [
    { "type": "text", "id": "message", "label": "本文" }
  ]
}
{% endschema %}

公式ドキュメント　｜　目次へ戻る ↑

セクション・ブロック・スニペット専用の JavaScript をまとめて書きます。

書き方

{% javascript %} 〜 {% endjavascript %}

Shopify がまとめて1つのファイルとして配信します。中では Liquid が使えないので、設定値は data 属性などでHTML側から渡します。

例

{% javascript %}
  document.querySelectorAll('[data-copy]').forEach((el) => {
    el.addEventListener('click', () => navigator.clipboard.writeText(el.dataset.copy));
  });
{% endjavascript %}

公式ドキュメント　｜　目次へ戻る ↑

セクション・ブロック・スニペット専用の CSS をまとめて書きます。

書き方

{% stylesheet %} 〜 {% endstylesheet %}

javascript タグと同じく中では Liquid が使えません。設定値で変えたい値は CSS 変数（--名前）を style 属性で渡します。

例

<div class="notice" style="--notice-bg: {{ block.settings.bg }}">...</div>
{% stylesheet %}
  .notice { background: var(--notice-bg); }
{% endstylesheet %}

公式ドキュメント　｜　目次へ戻る ↑

data-shopify 属性付きの <style> タグを出力します。

書き方

{% style %} 〜 {% endstyle %}

中で Liquid が使え、色の設定を参照するとテーマエディタで色を変えたときに再読み込みなしで反映されます。

例

{% style %}
  .badge-{{ section.id }} { color: {{ section.settings.badge_color }}; }
{% endstyle %}

出力

<style data-shopify>.badge-xxx { color: #e00; }</style>

公式ドキュメント　｜　目次へ戻る ↑

そのテンプレートで使うレイアウトファイルを指定します。

書き方

{% layout 'レイアウト名' %} / {% layout none %}

none を指定するとヘッダー・フッターなしで出力できます。JSON テンプレートでは layout キーで指定します。

例

{% layout 'password' %}

公式ドキュメント　｜　目次へ戻る ↑

カート追加・お問い合わせ・ログインなどの送信フォームを、必要な隠し項目付きで出力します。

書き方

{% form '種類', 対象 %} 〜 {% endform %}

種類（'product'、'contact'、'customer_login' など）ごとに送信先が決まっています。エラーは form.errors で受け取れます。

例

{% form 'contact' %}
  {{ form.errors | default_errors }}
  <input type="email" name="contact[email]" required>
  <textarea name="contact[body]"></textarea>
  <button>送信</button>
{% endform %}

公式ドキュメント　｜　目次へ戻る ↑