shopify-liquid

Shopify Liquid スキル

Liquid は、ストアフロントで動的コンテンツを読み込むために Shopify が使用するテンプレート言語です。

1. 基本構文

• 出力：{{ ... }} - コンテンツをページに表示します。
• タグ：{% ... %} - ロジック（if、for、assign）を記述します。
• フィルター：{{ value | filter }} - 出力を変更します。

2. Theme App Extensions（App Blocks）

最新のアプリでは、テーマの既存コードを直接編集する代わりに、App Blocks を使ってテーマにコードを挿入します。

schema タグ

Theme Editor で使用できる設定を定義します。

{% schema %}
{
  "name": "Star Rating",
  "target": "section",
  "settings": [
    {
      "type": "color",
      "id": "star_color",
      "label": "Star Color",
      "default": "#ff0000"
    }
  ]
}
{% endschema %}

設定へのアクセス

block.settings.id を使って、schema で定義した値にアクセスします。

<div style="color: {{ block.settings.star_color }}">
  ★★★★★
</div>

App Embed Blocks

グローバルに実行されるスクリプトです（例：分析機能、チャットバブル）。

{% schema %}
{
  "name": "Chat Bubble",
  "target": "body",
  "javascript": "chat.js",
  "settings": []
}
{% endschema %}

3. よく使うオブジェクト

• product：
  • {{ product.title }}
  • {{ product.variants.first.id }}
  • {{ product.featured_image | image_url: width: 400 }}
• cart：
  • {{ cart.item_count }}
  • {{ cart.currency.iso_code }}
• customer：
  • {% if customer %} でログイン状態を確認します。
• shop：
  • {{ shop.name }}
  • {{ shop.permanent_domain }}

4. 便利なフィルター

• 金額：{{ product.price | money }} -> $10.00
• アセット URL：{{ 'style.css' | asset_url }}（assets/ フォルダー内のアセットを参照します）
• JSON：{{ product | json }}（JavaScript にデータを渡すときに便利です）

5. JavaScript での使用

データ属性またはグローバル変数を使って、Liquid のデータを JavaScript に渡します。

パターン：データ属性（推奨）

<div id="my-app" data-product-id="{{ product.id }}" data-shop="{{ shop.permanent_domain }}"></div>

<script>
  const app = document.getElementById('my-app');
  const productId = app.dataset.productId;
</script>

パターン：グローバルオブジェクト（従来方式）

<script>
  window.ShopifyData = {
    product: {{ product | json }},
    cart: {{ cart | json }}
  };
</script>

6. App Proxies

App Proxy 経由のリクエストの場合、liquid はレスポンスをレイアウトに送信する前にレンダリングします。

• Content-Type: application/liquid を返すと、Shopify がレスポンス内の Liquid を解析します。