> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Upsells ブロック

> Aftersell Cart の Upsells ブロック — Strategy が選んだ商品オファーをドロワーに表示します。

> **Upsells** ブロックは、選択した **Strategy** によって選ばれた商品オファーをカートドロワーに表示します。購入者がカートを開くと、現在のカート内容と設定済みのターゲティングルールに基づいて Strategy が返す商品がブロックに表示されます。<br /><br />カート内容とターゲティングルールに基づいて表示内容を選ぶ Strategy を使い、購入者がカートを開いた瞬間に関連性の高い商品オファーを提示することで、平均注文額を伸ばします。

<Info>
  常にあなたが選んだ 1 つの商品を表示する [**Product add-on**](/ja/aftersell/cart/product-add-on-block) ブロックとは異なり、Upsells は表示内容を決める Strategy によって駆動されます。
</Info>

<Frame>
  <img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/cart-upsells-block-strategy-picked-product-recommendations.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=5ce00c7f12e1ddf32a0533eb700d22ee" alt="カートドロワーに Strategy が選んだ商品レコメンデーションを表示する Upsells ブロック" width="1228" height="510" data-path="images/aftersell/cart-upsells-block-strategy-picked-product-recommendations.png" />
</Frame>

<div id="behavior">
  ## 動作
</div>

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

<div id="settings">
  ## 設定
</div>

| 設定                        | 制御する内容                                                                                 | デフォルト                           |
| ------------------------- | -------------------------------------------------------------------------------------- | ------------------------------- |
| **Title**                 | オファーの上に表示されるリッチテキストの見出し。太字、斜体、配置、色をサポートします。                                            | `You may also like`             |
| **Add button text**       | 各商品の追加ボタンのラベル。                                                                         | `Add`                           |
| **Strategy**              | 表示する商品を選ぶ Strategy。                                                                    | 自動的に割り当てられる Shopify AI strategy |
| **Layout**                | **Carousel** または **List**。                                                             | Carousel                        |
| **Maximum products**      | 表示する商品の最大数。`1`–`12` を受け付けます。                                                           | `4`                             |
| **Show compare-at price** | 取り消し線付きの比較価格を表示するかどうか。                                                                 | オン                              |
| **Show product reviews**  | 各 upsell カードに星評価とレビュー数を表示するかどうか。評価はレビューアプリの商品メタフィールドから取得され、有効なレビューデータが存在する場合にのみ表示されます。 | オフ                              |

<div id="supported-review-apps">
  ### 対応レビューアプリ
</div>

以下のメタフィールドベースのレビューアプリに対応しています: Shopify Product Reviews、Junip、Okendo、Growave、Fera、Stamped、Loox、REVIEWS.io、Automizely Reviews、Judge.me、Ali Reviews、Trustoo、Rivo、Rivyo、Vitals。Yotpo は商品メタフィールドではなく独自の API を使用しているため、対応していません。

<div id="design">
  ## デザイン
</div>

Upsells ブロックには、**Design** パネルにブロック単位のデザインオーバーライドがあります。これらはこのブロックに限り、カートのグローバルデザイン設定を上書きします。値を空欄にするとグローバル設定を継承します。

<div id="text-styling">
  ### テキストスタイリング
</div>

Upsells ブロックのデザイン設定には **Text** セクションがあります。各 upsell カード上の個々のテキスト要素のタイポグラフィを制御するために使用します。ピッカーからテキスト要素を選択して、その設定を調整します。

| 設定                 | 制御する内容                                                                                      |
| ------------------ | ------------------------------------------------------------------------------------------- |
| **Text color**     | 選択したテキスト要素の色。                                                                               |
| **Font**           | **Theme font**（テーマのフォントを継承）または **Custom font**（テーマがすでに読み込んでいるフォント名を入力）。**Heading** のみで利用可能。 |
| **Size**           | フォントサイズ（ピクセル単位）。                                                                            |
| **Weight**         | フォントの太さ: Light、Regular、Medium、Semibold、または Bold。                                            |
| **Line height**    | フォントサイズに対する倍率としての行の高さ（例: `1.4`）。                                                            |
| **Letter spacing** | 文字間隔（ピクセル単位）。負の値でテキストを詰めます。                                                                 |

スタイリングできるテキスト要素はカテゴリごとにグループ化されています。

**Heading**

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

**Product**

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

**Pricing**

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

いずれかのフィールドを空欄のままにすると、その要素はデフォルト値のままになります。

<Tip>
  カートプレビュー内のテキスト要素を直接クリックすると、その要素がハイライトされ、パネルのコントロールが自動的に開きます。
</Tip>

<div id="tile-colors">
  ### タイルの色
</div>

| 設定                        | 制御する内容                | デフォルト     |
| ------------------------- | --------------------- | --------- |
| **Tile background color** | 各 upsell 商品カードの背景色。   | 透明        |
| **Tile border color**     | 各 upsell 商品カードのボーダー色。 | `#F6F6F7` |

<div id="reviews">
  ### レビュー
</div>

**Show product reviews** が有効な場合、Design パネルの **Reviews** セクションから星の色をカスタマイズできます。

| 設定                   | 制御する内容           | デフォルト     |
| -------------------- | ---------------- | --------- |
| **Star color**       | 各星の塗りつぶし部分。      | `#FDCC0D` |
| **Empty star color** | 各星の塗りつぶされていない部分。 | `#D1D5DB` |

<div id="placement-and-limits">
  ## 配置と制限
</div>

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

<div id="selecting-a-strategy">
  ## Strategy の選択
</div>

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 行に表示されます。

<div id="managing-a-selected-strategy">
  ## 選択した Strategy の管理
</div>

Strategy をアタッチすると、strategy 行に **•••**(省略記号)ボタンが表示されます。クリックするとアクションメニューが開きます。

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

Strategy を新しいタブで編集してもカートエディターのセッションには影響しません。カートエディターのタブに戻り、作業を失うことなく設定を続けられます。

<div id="custom-template">
  ## カスタムテンプレート
</div>

Code タブから[カスタムテンプレート](/ja/aftersell/cart/custom-templates)をサポートしており、このブロックの組み込みマークアップをあなたの JSX に置き換えます。受け取る props は以下のとおりです。

<div id="block-content">
  ### ブロックのコンテンツ
</div>

| Prop            | 型                      | 用途                                                |
| --------------- | ---------------------- | ------------------------------------------------- |
| `title`         | `string`               | セクションの見出し。                                        |
| `addButtonText` | `string`               | カート追加ボタンのラベル。                                     |
| `layout`        | `'carousel' \| 'list'` | 横スクロールか、折り返しか。これに応じてマークアップを分岐させてください。             |
| `upsells`       | `UpsellCard[]`         | 表示準備済みの商品。下記の[カードの構造](#the-upsell-card)を参照してください。 |
| `isLoading`     | `boolean`              | upsell 商品の取得中は `true`。                            |

<div id="adding-to-cart">
  ### カートへの追加
</div>

| Prop              | 型                                                | 用途                                      |
| ----------------- | ------------------------------------------------ | --------------------------------------- |
| `selectVariant`   | `(productId: string, variantId: number) => void` | 商品のバリアントを選択します。                         |
| `handleAdd`       | `(productId: string) => void`                    | その商品の選択中のバリアントをカートに追加します。               |
| `addingProductId` | `string \| null`                                 | 現在追加中の商品。そのボタンだけを無効化できます。アイドル時は `null`。 |

<div id="carousel-controls">
  ### カルーセルのコントロール
</div>

`layout` が `'carousel'` のときのみ関係します。

| Prop           | 型                                     | 用途                                                      |
| -------------- | ------------------------------------- | ------------------------------------------------------- |
| `trackRef`     | `{ current: HTMLDivElement \| null }` | `ref={props.trackRef}` でスクローラーにアタッチし、矢印がスクロールできるようにします。 |
| `atStart`      | `boolean`                             | トラックが先頭にあるとき `true`。左矢印を無効化してください。                      |
| `atEnd`        | `boolean`                             | トラックが末尾にあるとき `true`。右矢印を無効化してください。                      |
| `scrollByCard` | `(direction: 1 \| -1) => void`        | トラックをカード 1 枚分、左(`-1`)または右(`1`)にスクロールします。                |

<div id="the-upsell-card">
  ### upsell カード
</div>

`upsells` の各エントリ:

| フィールド                     | 型                         | 用途                                                                                                                                                                                                                           |
| ------------------------- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `productId`               | `string`                  | 商品の GID。React の key およびカート追加のターゲットとして使います。                                                                                                                                                                                   |
| `title`                   | `string`                  | 商品タイトル。                                                                                                                                                                                                                      |
| `description`             | `string`                  | プレーンテキストの説明。商品にない場合は `''`。                                                                                                                                                                                                   |
| `url`                     | `string \| null`          | 商品ページの URL。利用できない場合は `null`。                                                                                                                                                                                                 |
| `imageUrl`                | `string \| null`          | フィーチャー画像。商品にない場合は `null`。                                                                                                                                                                                                    |
| `selectedVariantImageUrl` | `string \| null`          | 選択中のバリアント自身の画像。バリアントにない場合は `null` — `imageUrl` にフォールバックしてください。                                                                                                                                                               |
| `variantTitle`            | `string \| null`          | 選択中のバリアントのオプション値（例: `Medium / Blue`）。解決済み。バリアントに実際のタイトルがない場合（空欄または Shopify の `Default Title` プレースホルダーの場合）は `null`。名前付きのバリアントを 1 つだけ持つ商品でもその名前を返すため、`hasMultipleVariants` に依存するのではなく `{upsell.variantTitle && …}` でガードしてください。 |
| `priceLabel`              | `string`                  | 表示する価格。フォーマット済み。割引時はセール価格、それ以外はバリアント価格。                                                                                                                                                                                      |
| `compareAtLabel`          | `string \| null`          | 取り消し線付きの元の価格。フォーマット済み。取り消すものがない場合は `null`。                                                                                                                                                                                   |
| `discountLabel`           | `string \| null`          | `(20% off)` のようなインラインの割引ラベル。割引がない場合は `null`。                                                                                                                                                                                 |
| `review`                  | `object \| null`          | `{ rating, count, stars }`。`stars` は小数点の塗りつぶしが焼き込まれた 5 つのレンダリング済み画像 URL です。それぞれを画像要素としてレンダリングしてください。レビューがオフ、または商品にレビューがない場合は `null`。                                                                                         |
| `options`                 | `Array<{ name, values }>` | オプショングループ。ピッカーやスウォッチの構築用。                                                                                                                                                                                                    |
| `variants`                | `array`                   | バリアントの組み合わせ。下記を参照。                                                                                                                                                                                                           |
| `selectedVariantId`       | `number`                  | 現在選択中のバリアント。`selectVariant` に渡します。                                                                                                                                                                                           |
| `hasMultipleVariants`     | `boolean`                 | バリアントピッカーをレンダリングするかどうか。                                                                                                                                                                                                      |
| `vendor`                  | `string`                  | 商品の販売元。                                                                                                                                                                                                                      |
| `selectedVariantImageUrl` | `string \| null`          | 選択中のバリアント自身の画像。ない場合は `null`。その場合は `imageUrl` にフォールバックしてください。                                                                                                                                                                 |

`variants` の各エントリは `id`、`title`、`price` と `compareAtPrice`(未フォーマットの生の値で、通貨の主要単位の文字列)、`availableForSale`、`imageUrl`、`sku`、`selectedOptions`(`[{ name, value }]`)を持ちます。

<Warning>
  **購入可否は組み合わせ単位であり、オプション単位ではありません。** `options` はレンダリングすべきグループを提供しますが、特定の選択が購入可能かどうかは `variants` の対応するエントリにあります。購入者が選んだ組み合わせを `variants` に対して解決し、そのエントリの `availableForSale` でゲートしてください。`options` のすべての値が注文可能だと仮定しないでください。
</Warning>

<Note>
  `priceLabel` と `compareAtLabel` は表示用にフォーマット済みですが、`variants[].price` と `variants[].compareAtPrice` は通貨の主要単位の生の文字列です。2 つを混在させないでください。表示にはラベルを使い、生の値は比較のみに使います。
</Note>

<div id="design-2">
  ## デザイン
</div>

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

デザイン設定とは何か? 詳しくはこちら: [デザイン設定](/ja/aftersell/cart/design-settings)。