Upsells ブロック

Upsells ブロックは、選択した Strategy によって選ばれた商品オファーをカートドロワーに表示します。購入者がカートを開くと、現在のカート内容と設定済みのターゲティングルールに基づいて Strategy が返す商品がブロックに表示されます。

カート内容とターゲティングルールに基づいて表示内容を選ぶ Strategy を使い、購入者がカートを開いた瞬間に関連性の高い商品オファーを提示することで、平均注文額を伸ばします。

• 商品は購入者の現在のカートに基づいてリアルタイムに取得されるため、オファーは実際のカート内容を反映します。
• 商品が 1 つも解決されない場合、セクション全体が非表示になります。 Strategy が未設定、Strategy が何も返さない、返された商品がどれも購入不可、といった場合です。購入者に空の Upsells セクションが表示されることはありません。
• 返されたオファーに割引が付いている場合、購入者には正確な取り消し線価格と割引バッジが表示され、割引はチェックアウトで適用されます。

以下のメタフィールドベースのレビューアプリに対応しています: Shopify Product Reviews、Junip、Okendo、Growave、Fera、Stamped、Loox、REVIEWS.io、Automizely Reviews、Judge.me、Ali Reviews、Trustoo、Rivo、Rivyo、Vitals。Yotpo は商品メタフィールドではなく独自の API を使用しているため、対応していません。 Upsells ブロックには、Design パネルにブロック単位のデザインオーバーライドがあります。これらはこのブロックに限り、カートのグローバルデザイン設定を上書きします。値を空欄にするとグローバル設定を継承します。 Upsells ブロックのデザイン設定には Text セクションがあります。各 upsell カード上の個々のテキスト要素のタイポグラフィを制御するために使用します。ピッカーからテキスト要素を選択して、その設定を調整します。 スタイリングできるテキスト要素はカテゴリごとにグループ化されています。 Heading

• Heading — upsell カードの上に表示されるセクション見出し（例: You may also like）。カスタムフォントファミリーにも対応。太字と色は上のリッチテキストエディタで設定します。

Product

• Product title — 各 upsell カード上の商品名。
• Review count — Show product reviews が有効な場合に表示されるレビュー数。

Pricing

• Price — 各カードの現在価格。
• Compare-at price — 取り消し線付きの元の価格。
• Discount — 割引ラベル（例: 20% off）。

いずれかのフィールドを空欄のままにすると、その要素はデフォルト値のままになります。 Show product reviews が有効な場合、Design パネルの Reviews セクションから星の色をカスタマイズできます。

• リージョン: body または bottom。
• 最大数: カート状態ごとに 1 つ。商品が入ったカートと空のカートにそれぞれ独自の枠があります。
• 状態: 商品が入ったカートと空のカートの両方。
• デフォルトでは追加されません。ロックもされていないため、削除や非表示が可能です。

Upsells ブロックは空の状態では届きません。Strategy が未設定の場合、Aftersell はストアの Shopify AI strategy を解決し(まだない場合は作成して)自動で設定するため、ブロックはすぐに動作します。変更するには Strategy ピッカーを開きます。ピッカーには 2 つのグループがあります。 Quick start

• Create strategy from selected products — 特定の商品を直接選ぶと、Strategy が自動的に作成されます。
• Create strategy from scratch — カートエディターを離れずにルールを構築できる Strategy エディターを開きます。

Strategies

• Shopify AI recommendations — Shopify 自身のレコメンデーションに基づく Strategy を作成します。以後、どこに表示される場合も Shopify AI recommended products という名前になります。ストアに必要な Shopify AI strategy は 1 つだけなので、すでに持っている場合はこの項目は表示されません。
• 既存の Strategy が名前順に一覧表示されます。検索フィールドに入力して絞り込めます。

Strategy を選択すると、その名前がブロック内の strategy 行に表示されます。 Strategy をアタッチすると、strategy 行に •••(省略記号)ボタンが表示されます。クリックするとアクションメニューが開きます。

• Edit strategy — Strategy エディターを新しいタブで開きます。カートエディターのセッションと未保存の変更はそのまま維持されます。このオプションは、自動管理されており編集可能なルールを持たない Shopify AI recommended strategy では利用できません。
• Remove from upsell — このブロックから Strategy を切り離します。Strategy 自体は削除されず、Strategies の一覧に残ります。

Strategy を新しいタブで編集してもカートエディターのセッションには影響しません。カートエディターのタブに戻り、作業を失うことなく設定を続けられます。 Code タブからカスタムテンプレートをサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は以下のとおりです。 layout が 'carousel' のときのみ関係します。 upsells の各エントリ: variants の各エントリは id、title、price と compareAtPrice(未フォーマットの生の値で、通貨の主要単位の文字列)、availableForSale、imageUrl、sku、selectedOptions([{ name, value }])を持ちます。 このブロックのスタイルは、設定パネルの Design セクションで調整します。これらはブロック単位のオーバーライドで、グローバルデザインの上に重なり、空欄の場合はグローバル設定にフォールバックします。 デザイン設定とは何か? 詳しくはこちら: デザイン設定。