Subscription upgrade ブロック

Subscription upgrade ブロックは、Cart items の中にネストされるサブブロックです。対象となる単発購入のラインアイテムをカートから直接サブスクリプションに切り替えるよう購入者に促し、意思決定の瞬間に単発購入を継続収益へと変えます。また、すでに購読中の購入者は、そのラインでプランの変更やキャンセルができます。

動作

対象ラインにのみ表示されます。 ブロックは商品の販売プランを読み取り、サブスクリプションプランのない商品のラインには何もレンダリングしません。
リワードのギフトには表示されません。 自動付与された無料ギフトを購読に切り替えるとリワードステータスが失われるため、そうしたラインではプロンプトが抑制されます。
単発購入のラインでは、アップグレードのコールトゥアクションを表示します。
すでに購読中のラインでは、プランセレクターと「単発購入にダウングレード」オプションを表示します。

設定

設定	制御する内容	デフォルト
Button text	単発購入ラインでのアップグレードのコールトゥアクション。`{{discount}}` と `{{plan name}}` のトークンをサポートします。	`Subscribe & Save`
Unsubscribe text	購読中のラインを単発購入に戻すオプション。	`Downgrade - One time purchase`

配置と制限

親: Cart items の中にのみネストします。
最大数: カートごとに 1 つ。
デフォルトでは追加されません。ロックもされていないため、削除や非表示が可能です。

サブブロックであるため、ラインごとにレンダリングされ、Product row との相対的な配置に応じて商品コンテンツの上または下に表示されます。サブブロックの配置のしくみを参照してください。

カスタムテンプレート

Code タブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は以下のとおりです。このブロックは 2 つの状態のいずれかをレンダリングし、どちらかは view.state が示します。カスタムテンプレート内で view が null になることはありません。ラインにプランがない場合、ブロックは何もレンダリングせず、テンプレートも呼び出されません。

Prop	型	用途
`view`	`object`	ラインの状態。`{ state: 'upgrade', buttonText, planId }` または `{ state: 'subscribed', plans, activePlanId }` のいずれか。
`title`	`string`	ブロックの見出しではなく、商品のタイトル。組み込みテンプレートでは、プランピッカーのアクセシブルなラベルを組み立てるためだけに使われます。
`unsubscribeText`	`string`	単発購入へのダウングレードオプションのラベル。
`busy`	`boolean`	プラン変更の処理中は `true`。
`selectPlan`	`(planId: number \| null) => void`	購読またはプランの切り替え。`null` を渡すと購読解除。
`onChange`	`(event: Event) => void`	`<select>` 用にあらかじめ用意された `onChange`。値を自分でパースする必要がありません。
`oneTimeValue`	`string`	「単発購入」を表すセンチネルの `<option>` 値。
`line`	`AftersellCartLine`	このブロックが属するカートライン。
`productId`	`number`	Shopify の商品 ID。
`variantId`	`number`	Shopify のバリアント ID。

view.plans の各エントリは { id: number, name: string, discountPercent: number } です。

function CustomTemplate(props) {
  const { view } = props;

  if (view.state === 'upgrade') {
    return (
      <button type="button" onClick={() => props.selectPlan(view.planId)} disabled={props.busy}>
        {view.buttonText}
      </button>
    );
  }

  return (
    <div>
      <select
        aria-label={`Subscription plan — ${props.title}`}
        value={String(view.activePlanId)}
        onChange={props.onChange}
        disabled={props.busy}
      >
        {view.plans.map((plan) => (
          <option key={plan.id} value={String(plan.id)}>
            {plan.name}{plan.discountPercent > 0 ? ` (${plan.discountPercent}% off)` : ''}
          </option>
        ))}
        <option value={props.oneTimeValue}>{props.unsubscribeText}</option>
      </select>
    </div>
  );
}

<select> には onChange を、ボタンには selectPlan を使ってください。onChange は oneTimeValue のセンチネルをすでに処理しています。<select> に独自のハンドラーを接続する場合は、自分で oneTimeValue と比較して selectPlan(null) を呼ぶ必要があります。

デザイン

このブロックのスタイルは、設定パネルの Design セクションで調整します。これらはブロック単位のオーバーライドで、グローバルデザインの上に重なり、空欄の場合はグローバル設定にフォールバックします。デザイン設定とは何か? 詳しくはこちら: デザイン設定。

はじめに

ホームページ

ベストプラクティス

購入後アップセル

Aftersell カート

チェックアウトアップセル（Shopify Plus）

サンキューページ

商品ページアップセル

Rokt Thanks

戦略

アナリティクスとトラッキング

連携

Aftersell MCP

請求とアカウント

トラブルシューティング

動作

設定

配置と制限

カスタムテンプレート

デザイン

​動作

​設定

​配置と制限

​カスタムテンプレート

​デザイン

動作

設定

配置と制限

カスタムテンプレート

デザイン