主な機能

• ワンクリック獲得: ログイン済みユーザーは即座にクーポンを獲得
• マーケティング同意: クーポン獲得と同時にメール配信の同意を取得可能
• 配布上限表示: 「残り50枚」などの限定感を演出
• 獲得済み表示: 既に獲得している場合は「獲得済み」と表示

推奨配置場所

• 商品ページ（商品画像の下）
• トップページのキャンペーンバナー横
• ランディングページの特設セクション

主な機能

• 動的価格表示: 現在の商品価格から割引額を自動計算
• 複数クーポン対応: 該当するクーポンが複数ある場合は最大割引を表示
• リンク機能: クリックでクーポン詳細ページへ遷移
• 条件判定: 最低購入金額などの条件を満たすか自動判定

推奨配置場所

• 商品ページの価格表示の下
• 「カートに追加」ボタンの上

主な機能

• 全件表示: 獲得した全クーポンを一覧表示
• 最新N件: 獲得したクーポンで、最新順で表示
• 有効期限表示: 各クーポンの有効期限を明示
• 使用状況: 未使用/使用済みのステータス表示
• コピー機能: クーポンコードをワンクリックでコピー

推奨配置場所

• マイページ（アカウントページ）
• 専用の「マイクーポン」ページなど

主な機能

• 詳細情報表示: 割引内容、有効期限、最低購入金額などを表示
• 配布状況: 配布枚数の上限と残り枚数を表示
• 利用条件: 対象商品や除外商品の条件を明示
• 獲得ボタン統合: 同ページ内に獲得ボタンを配置可能

推奨配置場所

• クーポン専用ランディングページ
• キャンペーンページ
• 新規会員登録完了ページ

1. スキーマに @app を追加

セクションファイルの {% schema %} 内にある blocks 配列に @app を追加します。

{% schema %}
{
  "name": "商品情報",
  "blocks": [
    { "type": "title" },
    { "type": "price" },
    { "type": "@app" }
  ]
}
{% endschema %}

2. ブロックをレンダリング

スキーマに追加しただけでは表示されません。セクション内のブロックループで @app をレンダリングする記述を追加します。

{% for block in section.blocks %}
  {% case block.type %}
    {% when '@app' %}
      {% render block %}
    {% when 'title' %}
      <h1>{{ product.title }}</h1>
  {% endcase %}
{% endfor %}

これで、テーマカスタマイズ画面からアプリブロックを自由に追加・並び替えできるようになります。