> ## 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.

# チェックアウトウィジェットの種類

> このドキュメントでは、Aftersell で追加できる、Shopify Plus のチェックアウト体験を高めるさまざまなチェックアウトウィジェットを紹介します

チェックアウトウィジェットには多様な選択肢があります。この記事では、それぞれのウィジェットオプション、その機能、および利用可能なカスタマイズを紹介します。

* [Upsells](#upsells)
* [Cart Controls](#cart-controls)
* [Rewards](#rewards)
* [Trust Badges](#trust-badges)
* [Testimonials](#testimonials)
* [Notes](#notes)
* [Images](#images)
* [Text](#text)

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-editor-widget-cards.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=4b4512f2474f534bb8f93bfa67cb8701" alt="upsells、カートコントロール、リワード、トラストバッジ、メモ、画像、テキストのウィジェットカードを表示する Aftersell Checkout エディター" width="1610" height="1756" data-path="images/aftersell/checkout-widget-types-editor-widget-cards.png" />

***

<div id="upsells">
  ## Upsells
</div>

チェックアウト中に顧客に商品を提案して、**AOV の向上に役立てます。**

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-order-summary-sticker-pack.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=7d44a67d995c2093de1607118d760107" alt="Add ボタン付きの Sticker Pack upsell オファーがハイライトされたチェックアウトの注文サマリー" width="2242" height="1358" data-path="images/aftersell/checkout-widget-types-order-summary-sticker-pack.png" />

upsell ウィジェットにはいくつかの構成があります。

* **Single Product Upsell:** 顧客に 1 つの商品を提案します。
* **Multi-Product Upsell:** 複数の商品をスタックまたはカルーセルレイアウトで表示します。顧客は複数のオファーを受け入れられます。
* **Checkmark Upsell:** Add to Cart ボタンの代わりにチェックボックスで単一商品を upsell します。配送保護や優先配送など、低価格のアドオンによく使われます。

<div id="product-selection-options">
  ### 商品選択オプション
</div>

upsell オファーを作成する際、商品の選択方法を選べます。

* **Specific Products:** upsell する個々の商品を手動で選択します。
* **Collection:** コレクションを選択し、そのコレクションからランダムに最大 5 商品を表示します。すでにカートに入っている商品は自動的に除外されます。
* **AI Recommendations:** 顧客のカート内容に基づいて Aftersell に商品を自動レコメンドさせます。
* **Most Expensive Product:** 顧客のカートから最も高額な商品を自動的に upsell します。

商品ピッカーの **Products** タブを閲覧する際、**Active products only** にチェックを入れると、Draft(下書き)と Archived(アーカイブ済み)の商品を一覧から非表示にできます。このフィルターはデフォルトでオフで、Products タブにのみ適用されます。Collections には影響しません。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-shipping-protection-checkmark-upsell.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=29edf23c7c1712d357055d28bec148a9" alt="Yes add to order チェックボックス付きの Shipping Protection チェックマーク upsell がハイライトされたチェックアウト" width="2164" height="1032" data-path="images/aftersell/checkout-widget-types-shipping-protection-checkmark-upsell.png" />

<div id="product-types">
  ### 商品タイプ
</div>

upsell ウィジェットに商品を追加する際、いくつかの商品タイプから選択できます。

* **Specific product** - ストアから特定の商品を選んで表示します
* **Automatic upsell** - **Settings > Automatic upsells** で設定されたレコメンデーションプロバイダー(デフォルトは Shopify、接続していれば Nosto または Constructor)を使い、カート内容に基づいて補完商品をレコメンドします
* **Most expensive product** - 顧客のカートから最も高額なアイテムを表示します
* **Spend threshold** - 顧客がリワードのしきい値に到達するのに役立つ商品をインテリジェントにレコメンドします(リワードバーの有効化が必要)
* **Collection** - 特定のコレクションの商品を表示します
* **Strategy** - ルールベースのターゲティングを使って商品を動的に選択します。[Strategies](/ja/aftersell/strategies_overview) が有効なストアでのみ表示されます

**spend threshold** 商品タイプはリワードバーと連携し、送料無料や割引などの目標に顧客が到達するのに役立つ商品を提案します。顧客がしきい値にどれだけ近いかに基づいて、最も関連性の高い商品を自動的に選択します。

<div id="variant-name-display">
  ### バリアント名の表示
</div>

顧客がチェックアウト upsell 商品のバリアントを選択すると、バリアント名が商品タイトルの下に小さな控えめなテキストで表示されます。これにより、顧客は正しいバリアントを注文に追加しているかを確認できます。

バリアント名は商品に複数のバリアントがある場合にのみ表示されます。単一バリアントの商品(「Default Title」バリアントのみの商品)では非表示になります。

<div id="subscription-plan-locking">
  ### サブスクリプションプランのロック
</div>

* バリアントオプションを非表示にすると、顧客のチェックアウト upsell には表示されません。
* 選択したデフォルト値が商品に自動的に適用されます。
* 選択したデフォルト値に一致するバリアントのみが顧客に提供されます。
* 複数のオプションを非表示にした場合、選択したすべてのデフォルトに一致するバリアントのみが表示されます。サブスクリプション商品の upsell を作成する際、upsell を特定のサブスクリプションプランにロックできます。これにより、顧客がチェックアウトでサブスクリプションプランを変更できなくなり、設定したとおりのサブスクリプションオプションが確実に提供されます。

**サブスクリプションプランロックの設定方法:**

1. Checkout エディターで upsell ウィジェットを開きます。
2. **Purchase option** を **Subscription** に設定します。
3. **Subscription plan** ドロップダウンで、「Any plan (customer chooses)」ではなく特定のプランを選択します。
4. これでプランがロックされます。顧客はチェックアウトでこのプランを見ることができますが、変更はできません。

**ロックされたプランの表示のカスタマイズ:**

* Color オプションを非表示にし、デフォルトを「Black」に設定
* Size オプションは表示のまま
* 顧客には黒い T シャツのサイズオプションのみが表示されます

プランがロックされている場合、チェックアウトでの顧客への表示方法をカスタマイズできます。

* **Show subscription option on checkout** - サブスクリプションオプションの行(ラベル + プラン名)をチェックアウトに表示するかを切り替えます。デフォルトで有効です。
* **Subscription option label** - プラン名の上に表示されるラベルをカスタマイズします(デフォルト: 「Subscription」)。たとえば「Subscribe」、「Delivery」など、ブランドに合った用語に変更できます。
* **Plan name** - チェックアウトに表示されるプラン名を上書きします。デフォルトでは Shopify のプラン名が使われます。

**upsell スタイル設定**

これらのコントロールはサブスクリプションロックとは関係ありません。upsell エディターの **Show style settings** の下にあり、以下の画像とカードに関する 4 つのオプションは **Try new look**(デフォルトでオフ)にチェックを入れると表示されます。

* **Product image corner radius** - 商品画像に角丸を適用します。以下から選択:
  * None - 四角い角
  * Base - わずかに丸い角
  * Large - より丸い角(デフォルト)
  * Fully Rounded - 最大の丸み
* **Product image size** - 画像サイズを制御:
  * Default - 標準サイズ(縦レイアウトで 64px)
  * Small - 小さい画像(縦で 48px、横では縦長のアスペクト比)
  * Medium - 中サイズの画像(縦で 72px、横では正方形のアスペクト比)(デフォルト)
  * Large - 大きい画像(縦で 96px、横では横長のアスペクト比)
* **Product image display** - 画像がコンテナをどう満たすかを選択:
  * Fill - 画像が端から端まで広がる(デフォルト)
  * Bordered - 画像の周りに視認できるボーダーを追加
* **Card padding** - カードの端とコンテンツの間の内側の余白を設定:
  * None - 余白なし
  * Tight - 最小限の余白
  * Base - 標準の余白
  * Loose - 最大の余白(デフォルト)
* **Button width style** - upsell 全体でカート追加ボタンの幅の表示方法を制御。以下から選択:
  * Auto(デフォルト) - バリアントセレクターの有無に応じてボタン幅が変わります
  * Compact (uniform small) - すべてのボタンがコンパクト幅になり、サイズが揃います
  * Full width (uniform large) - すべてのボタンが全幅になり、サイズが揃います

<Note>
  **Button width style** は Checkmark を除くすべての upsell タイプで表示され、**Try new look** の配下ではありません。
</Note>

**プランが自動的にロックされる条件:**

* 特定のサブスクリプションプランを選択した場合(上記のとおり)
* 商品に利用可能なサブスクリプションプランが 1 つしかない場合

どちらの場合も、顧客はチェックアウトでサブスクリプションプランを変更できません。

<div id="upsell-button-text">
  ### upsell ボタンテキスト
</div>

チェックマーク以外の upsell ウィジェットでは、upsell ボタンに表示されるテキストをカスタマイズできます。これらのフィールドはアカウントで機能が有効化されている場合に利用できます。アクセスをリクエストするにはサポートにお問い合わせください。

デフォルトでは、ボタンには以下が表示されます。

* 標準の upsell には **Add**
* 顧客が節約できる置き換え型 upsell には **Upgrade • \$X savings**
* 商品がより高額になる置き換え型 upsell には **Upgrade • \$X**

<div id="upsell-button-text-2">
  #### upsell ボタンテキスト
</div>

標準および置き換え型 upsell の追加ボタンのテキストをカスタマイズできます。カスタムテキストを入力しても、置き換え型オファーでは節約額またはコストのサフィックスが引き続き自動的に付加されます(例: `Buy Now • $5 savings`)。

<div id="replacement-button-text">
  #### 置き換えボタンテキスト
</div>

置き換え型オファーのボタンには、別のカスタムプレフィックスを設定できます。これは、デフォルトの「Upgrade」プレフィックスと、置き換え型オファーで **Add button text** フィールドに入力したテキストの両方を上書きします。価格のサフィックス(例: `• $5.00 savings`)は常に自動的に付加されます。

たとえば `Trade up` と入力すると、顧客が \$5 節約できる置き換え型オファーでは `Trade up • $5.00 savings` になります。

> 💡 **ヒント:** 置き換えボタンテキストのフィールドでは `{Amount}` プレースホルダーは置換されず、そのままのテキストとして扱われます。ラベルの形式を完全にコントロールしたい場合は、`{Amount}` を使って **Upsell button text** フィールドを使用してください。

<div id="using-the-amount-placeholder">
  #### `{Amount}` プレースホルダーの使用
</div>

**Upsell button text** フィールドに `{Amount}` を含めると、価格または節約額をラベルに直接埋め込めます。`{Amount}` がある場合、入力したテキストがボタンラベル全体になり、自動サフィックスは付加されません。

| ボタンテキスト                      | オファータイプ      | 結果                     |
| ---------------------------- | ------------ | ---------------------- |
| `Save {Amount} by upgrading` | 置き換え型(節約)    | `Save $5 by upgrading` |
| `Upgrade for {Amount} more`  | 置き換え型(追加コスト) | `Upgrade for $5 more`  |
| `Get yours for {Amount}`     | 標準 upsell    | `Get yours for $10`    |

プレースホルダーは大文字と小文字を区別しません。`{Amount}`、`{amount}`、`{AMOUNT}` のいずれも機能します。

> ⚠️ **注:** 標準(置き換え型でない)upsell で `{Amount}` を使うと、商品価格が代入されます。プレースホルダーは常にフォーマット済みの金額に置き換えられるため、無料の商品ではプレースホルダーが消えるのではなく、フォーマット済みのゼロ(例: `\$0.00`)が表示されます。

<div id="max-accepted-offers">
  ### 受け入れオファーの最大数
</div>

**Single Product Upsell** と **Multi-Product Upsell** ウィジェットでは、1 回のチェックアウトセッション中に顧客が 1 つのウィジェットから受け入れられるオファー数の上限を設定できます。

顧客が設定された数のオファーを受け入れると、そのチェックアウトセッションの残りの間、ウィジェットは追加のオファーを表示しなくなります。

* **空欄のまま** — 上限は適用されません。顧客がいくつ受け入れてもウィジェットはオファーを表示し続けます。
* **正の数を設定** — 顧客がこのウィジェットからその数のオファーを受け入れると、ウィジェットはオファーの表示を停止します。

この設定を行うには、Checkout エディターで upsell ウィジェットを開き、**Max number of accepted offers** フィールドに値を入力します。

> 💡 **ヒント:** この設定は Checkmark Upsell ウィジェットでは利用できません。

***

<div id="discounts">
  ### 割引
</div>

割引は **upsell ウィジェット内で直接設定**できます。顧客が upsell 商品を注文に追加すると、この割引が自動的に適用されます。

<div id="adding-a-discount-to-your-upsell">
  #### upsell への割引の追加
</div>

upsell ウィジェットの設定時に、\*\*「Add discount」\*\*ボタンをクリックして割引を追加できます。2 つのオプションがあります。

* **Pick existing** - すでに作成した割引から選択します。既存の割引を検索して、適用したいものを見つけられます。
* **Create new** - 以下を設定してエディター内で直接新しい割引を作成します:
  * **Title** - チェックアウトで顧客に表示される割引コードのテキスト(例: 「SAVE」)
  * **Amount** - パーセント割引と固定額割引のどちらかを選び、値を入力します

upsell に割引が適用されると、バッジとして表示され、クリックして変更や削除ができます。

すべてのチェックアウト割引を一か所で管理できます。割引の表示、編集、削除の方法は[チェックアウト割引の管理](/ja/aftersell/managing_checkout_discounts)を参照してください。

<div id="hiding-the-discount-amount-text">
  #### 割引額テキストの非表示
</div>

upsell に割引が適用されると、デフォルトでは節約サフィックス(例: 「(20% OFF)」や「(\$6 OFF)」)が商品タイトルの隣に表示されます。upsell エディターの **Show additional settings** セクションで **Hide discount amount text** を有効にすると、このサフィックスを非表示にできます。

* 有効にすると、節約サフィックスが非表示になります。割引後の価格自体は通常どおり表示されます。
* 無効(デフォルト)の場合、節約サフィックスが商品タイトルの隣に表示されます。

> 💡 **ヒント:** この設定はウィジェット単位です。複数の upsell ウィジェットがある場合、それぞれ個別に設定できます。

<div id="customizing-the-discount-suffix-label">
  #### 割引サフィックスラベルのカスタマイズ
</div>

節約サフィックスの「OFF」のテキスト(例: 「20% OFF」)は、**Settings > Translations** でカスタマイズできます。**Discount suffix** の行を探し、希望するラベル(例: 「saved」、「off」、または翻訳された同等の語)を入力します。デフォルト値は「OFF」です。

<div id="showing-the-discounted-price-when-the-aftersell-discount-is-skipped">
  #### Aftersell の割引がスキップされた場合の割引後価格の表示
</div>

**Skip upsell discount if a non-Aftersell discount is already applied?** が有効な場合、ウィジェットはデフォルトで、設定した upsell 割引をプレビュー価格から非表示にします。カートレベルの割引が upsell 割引とすでに一致している場合(顧客はどちらにせよ同じ割引価格を支払う場合)は、**Show the discounted price in the widget even when the AfterSell discount is skipped?** を有効にすることで、プレビュー価格を実際に請求される金額と同期させることができます。

> ⚠️ **重要:** この設定は、プレビューと実際の顧客の両方でウィジェットに表示される価格を変更しますが、Aftersell の割引を適用するわけではありません。カートレベルの割引が upsell 割引と完全に一致する場合にのみ有効にしてください。そうでない場合、顧客に誤った価格が表示される可能性があります。

このチェックボックスは、**Skip upsell discount if a non-Aftersell discount is already applied?** がすでにオンになっている場合にのみ表示されます。

<div id="limiting-how-many-units-get-the-discount">
  #### 割引が適用される数量の制限
</div>

デフォルトでは、割引は受け入れられた upsell 商品のすべての数量に適用されます。数量セレクターやカートコントロールで顧客が追加した数量も含まれます。**Limit how many units get the discount** トグルでこれに上限を設けられます。

有効にすると、上限を設定する **Maximum discounted quantity** フィールドが表示されます。上限までの数量には割引が適用され、それを超える数量は通常価格で請求されます。

**例:** 100% 割引の商品を提供し、上限を 1 に設定します。顧客が数量を 3 に増やした場合、無料になるのは 1 個だけで、残りの 2 個は通常価格で請求されます。

* **トグルオフ(デフォルト):** 受け入れられた upsell 商品のすべての数量が割引されます。
* **トグルオン:** 指定した数量のみが割引を受けます。超過分は通常価格で請求されます。

> 💡 **ヒント:** この設定は、顧客が数量を増やして節約額を倍増できないようにしつつ、強力な割引(無料アイテムなど)を提供したい場合に便利です。

<div id="how-discounts-work">
  #### 割引のしくみ
</div>

* Aftersell の割引は、他の Shopify 割引と同じルールに従います。2 つの割引を組み合わせるには、両方とも Shopify 管理画面で明示的に組み合わせ可能に設定されている必要があります。たとえば、Aftersell が割引コードを作成し、別途「10% オフ」のような割引もある場合、両方で組み合わせが有効になっている必要があります。どちらか一方でも組み合わせが設定されていなければ、組み合わされません。Shopify の標準的な割引ルールが全体に適用されます:
  * Shopify は商品ごとに一度に 1 つのラインアイテム割引しか許可しません。商品にすでに割引が適用されている場合、追加の upsell 割引は同じラインアイテムに重ねて適用されません
  * 注文レベルとラインアイテムの割引は、両方が Shopify 管理画面で「組み合わせ可能」に設定されていれば組み合わせられます。Shopify の組み合わせルールの詳細は、[Shopify の割引の組み合わせに関するドキュメント](https://help.shopify.com/en/manual/discounts/combining-discounts/discount-combinations)を参照してください。**重要な制限事項** 割引の適用に失敗する可能性があるシナリオがいくつかあります:
  * **同一商品への複数の割引:** すでに割引が適用されている商品に Aftersell の upsell 割引を設定した場合、Aftersell の割引は重ねて適用されません
  * **コレクション設定の誤り:** 割引がコレクションを対象とする場合、関連するすべての商品が正しいコレクションに属していることを確認してください。非表示のコレクションを使えば、顧客に見せることなく特定の商品を含めることができます
  * **サードパーティアプリの競合:** 別のアプリがチェックアウトを動的に変更している場合、チェックアウト割引機能は現在サポートされません。そのようなアプリを実行している場合、Aftersell が追加する割引が想定どおりに適用されないことがあります。
    たとえば、アプリがチェックアウトで価格やアドオンを追加して注文合計を再計算する場合、Aftersell の割引適用の妨げになる可能性があります。

***

<div id="upsell-review-stars">
  ## upsell レビュースター
</div>

チェックアウト upsell では、オファー商品に星評価を表示してコンバージョンの向上に役立てられます。評価は商品レビューアプリのメタフィールドから取得され、商品に有効なレビューデータが存在する場合にのみ表示されます。

* API の制限により、これは現在 Aftersell の Checkout バージョン 2 で利用可能で、バージョン 1 では利用できない点にご注意ください。

**有効化の方法**

* **Checkout** を開き、upsell を編集します。
* **Show product review ratings** を有効にします。
* *(オプション)* **Advanced product review settings** を開いて表示をカスタマイズします。

**詳細設定**

* 表示する**最低評価**を設定します(0〜5、デフォルト 4.0)。
* 星の表示位置を選択します(**below title** または **below price**)。
* **塗りつぶし・非塗りつぶしの星の色**をカスタマイズします。
* **数値評価**と**レビュー数**の表示・非表示を切り替えます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-advanced-product-review-rating.gif?s=79a908b28161dfb73225e0e02e773623" alt="最低評価、位置、星の色のフィールドがある高度な商品レビュー評価設定" width="692" height="480" data-path="images/aftersell/checkout-widget-types-advanced-product-review-rating.gif" />

**対応レビューアプリ**\
商品メタフィールドに評価を保存するレビューアプリに対応しています。以下を含みます:

* Shopify Product Reviews
* Junip
* Okendo
* Growave
* Fera
* Stamped
* Loox
* REVIEWS.io
* Automizely Reviews
* Judge.me
* Ali Reviews
* Trustoo
* Rivo
* Rivyo
* Vitals

レビューデータのない商品には評価は表示されません。対応レビューアプリが複数インストールされている場合は、レビュー数が最も多いアプリが使用されます。Yotpo は別の API を必要とするため、Checkout V2 の upsell 評価には対応していません。

<div id="troubleshooting-reviews-show-in-editor-but-not-on-live-checkout">
  ### トラブルシューティング: レビューがエディターには表示されるが本番のチェックアウトに表示されない
</div>

**Show product review ratings** を有効にしてエディターのプレビューでは星が見えるのに本番のチェックアウトでは表示されない場合、レビューアプリのメタフィールドで Storefront API アクセスが有効になっていない可能性があります。

エディターは Admin API(すべてのメタフィールドにアクセス可能)経由で商品データを読み取りますが、本番のチェックアウトは Storefront API(ストアフロントアクセスが明示的に許可されたメタフィールドにのみアクセス可能)経由で読み取ります。この不一致が検出されると、影響を受ける商品を一覧表示する警告バナーがエディターに表示されます。

**解決方法:**

1. Shopify 管理画面で **設定 → カスタムデータ → 商品 → メタフィールド** に移動します。
2. `reviews.rating` と `reviews.rating_count` のメタフィールド定義を見つけます。
3. 各定義で **Storefront API アクセス**を有効にします。

または、レビューアプリの設定で **Storefront API sync** オプションを探して、そちらで有効にしてください。

***

<div id="cart-controls">
  ## Cart Controls
</div>

各商品ラインアイテムの下に modify リンクを表示し、チェックアウトページ上で直接編集できるようにします。

カートコントロールでは以下の機能がサポートされています。

* Variant selector(バリアントセレクター): 顧客が在庫のある別のバリアントに変更できるようにします。
* Quantity selector(数量セレクター): 顧客が商品の数量を変更できるようにします。
* Remove item(商品の削除): 顧客が upsell 商品を削除できるようにします。**Show Remove Item Button** をオンにすると **Allow Removal of Non-Upsell Products** が表示され、顧客が元から追加していた商品にも削除を拡張できます。
* Subscription selector(サブスクリプションセレクター): 顧客が現在選択中のサブスクリプションオプションを変更できるようにします(例: 60 日ごとから 30 日ごとへ)。
* Subscription upgrade(サブスクリプションアップグレード): 顧客が単発購入をサブスクリプションにアップグレードできるようにします。
* Custom text(カスタムテキスト): 各ラインアイテムの下にカスタムテキストを追加します。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-cart-item-modify-link.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=d87925868df0eeeb6c34dc046b2b3f99" alt="Modify リンクと Upgrade to Subscribe and save ボタンがハイライトされたチェックアウトのカートアイテム" width="2210" height="702" data-path="images/aftersell/checkout-widget-types-cart-item-modify-link.png" />

<div id="product-review-ratings">
  ### 商品レビュー評価
</div>

カートコントロールでは、カート内商品の星評価を表示して、信頼の構築とコンバージョンの向上に役立てられます。評価は商品レビューアプリのメタフィールドから取得され、商品に有効なレビューデータが存在する場合にのみ表示されます。

**有効化の方法**

1. **Checkout** を開き、カートコントロールウィジェットを編集します。
2. **Product review ratings** セクションに移動します。
3. **Show product review ratings** を有効にします。
4. *(オプション)* 表示設定をカスタマイズします。

**設定**

* 表示する**最低評価**を設定します(0〜5、デフォルト 4.0)。この評価を下回る商品には星が表示されません。
* 星の表示位置を選択します(**below product title** または **below cart controls**)。
* **塗りつぶしの星の色**(デフォルト: #fdcc0d)と**非塗りつぶしの星の色**(デフォルト: #d1d5db)をカスタマイズします。
* **評価値**(例: 4.5)と**レビュー数**(例: 123 reviews)の表示・非表示を切り替えます。

**対応レビューアプリ**\
商品メタフィールドに評価を保存するレビューアプリに対応しています。以下を含みます:

* Shopify Product Reviews
* Junip
* Okendo
* Growave
* Fera
* Stamped
* Loox
* REVIEWS.io
* Automizely Reviews
* Judge.me
* Ali Reviews
* Trustoo
* Rivo
* Rivyo
* Vitals

レビューデータのない商品には評価は表示されません。対応レビューアプリが複数インストールされている場合は、レビュー数が最も多いアプリが使用されます。

<div id="subscription-products">
  ### サブスクリプション商品
</div>

**Subscription management** 内の **Subscription products** セクションでは、カートコントロールウィジェットにおいて、特定の商品に対して購入者が選べるサブスクリプションプランを制御できます。

デフォルトでは、サブスクリプションセレクターとアップグレードボタンは、Shopify が商品に対して返すプランをそのまま使用します。商品ごとのサブスクリプションプラン制御により、選択可能なプランを絞り込み、商品ごとにデフォルトプランを設定できます。

**サブスクリプションプラン制御の設定方法:**

1. Checkout エディターでカートコントロールウィジェットを開きます。
2. **Subscription management** セクションを展開します。
3. **Subscription products** の下で **Add product** を選択し、Shopify で販売プランが設定されている商品を選びます。
4. 商品の行を開き、**Plans customers can choose** を使います。**Select plans** を選択してピッカーを開き、購入者が選択できるプランにチェックを入れます。選択したプランは削除可能なタグとして表示され、**Select all** アクションもあります。
5. **Default plan** ドロップダウンで、その商品のサブスクリプションアップグレードに適用されるプランを設定します。このドロップダウン自体のデフォルトは **First available plan** です。
6. 変更を保存します。

<Note>
  **Subscription products** は見出しであり、折りたたみパネルではありません。展開するセクションは **Subscription management** です。商品を追加するまでは「No products added yet」と表示され、ステップ 4 と 5 の商品ごとのコントロールは商品の行が存在して初めて表示されます。
</Note>

**動作のしくみ:**

* **Plans customers can choose** — サブスクリプションセレクターを、チェックを入れたプランだけに絞り込みます。商品バリアントがそのいずれにも対応していない場合は、代わりにそのバリアント自身のすべてのプランが表示されるため、購入者がサブスクリプションオプションを失うことはありません。
* **Default plan** — その商品のサブスクリプションアップグレードで適用されるプランを設定します。カート内のバリアントと互換性がない場合は、代わりに最初に選択可能なプランが使われます。
* **未設定の商品** — ここに行がない商品はすべてのプランを保持し、Shopify のデフォルトの並び順を使用します。

サブスクリプションアップグレードボタン自体は、**Subscription management** の上部で別途制御します。**Allow Subscription Upgrade Button** にチェックを入れて有効にします。有効にするとボタンの文言用のテキストフィールドが表示され、デフォルトは `Upgrade to {{subscription_group}}` です。この変数は、その商品で利用可能な最初のサブスクリプショングループに置き換えられます。

> 💡 **ヒント:** 商品で利用可能なすべてのプランを選択すると、設定は「すべてのプラン」に正規化されます。つまり、後で Shopify に追加した新しいプランは、暗黙的に除外されるのではなく自動的に含まれます。

<div id="product-targeting">
  ### 商品ターゲティング
</div>

カートコントロールウィジェットエディターの **Visibility** 設定を使って、どの商品にカートコントロールを表示するかを制御できます。

* **All products in cart:** すべての商品にカートコントロールが表示されます(デフォルト)。
* **Only selected products:** 選択した商品にのみカートコントロールが表示されます。**Select products** をクリックして、カートコントロールを表示すべき商品を選びます。
* **All products except selected:** 選択した商品を除くすべての商品にカートコントロールが表示されます。**Select products** をクリックして、カートコントロールを表示しない商品を選びます。

これにより、特定の商品に基づいてチェックアウト体験をカスタマイズできます。たとえば、特定の商品にのみサブスクリプションアップグレードを有効にしたり、顧客が特定のアイテムをカートから削除できないようにしたりできます。

**商品ターゲティングの設定方法:**

1. Checkout エディターでカートコントロールウィジェットを開きます。
2. **Visibility** セクションに移動します。
3. **Apply cart controls to** ドロップダウンで希望のターゲティングモードを選択します。
4. **Only selected products** または **All products except selected** を選択した場合は、**Select products** ボタンをクリックして商品を選びます。
5. 変更を保存します。

***

<div id="rewards">
  ## Rewards
</div>

チェックアウトにリワードバー(X 円使うと Y がもらえる)を表示して、商品の追加を促します。この目標は Order Value(注文金額)または Item Count(商品数)に基づいて設定できます。

**Rewards は upsell ウィジェットとの相性が抜群です。** 顧客がリワードを達成するために商品を注文へ簡単に追加できるようにしましょう。upsell ウィジェットで **spend threshold** 商品タイプを使うと、顧客がリワードのしきい値に到達するのに役立つ商品を自動的にレコメンドできます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-rewards-bar-progress-toward.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=514c2088fe4e8e6609eeb3d9a406ab46" alt="カートの上にハイライトされた、送料無料への進捗を表示するチェックアウトのリワードバー" width="2184" height="644" data-path="images/aftersell/checkout-widget-types-rewards-bar-progress-toward.png" />

**ご注意ください。** 提供するリワードは Shopify で作成する必要があります。割引を提供する場合は自動割引を作成し、送料無料を提供する場合は配送ルールを変更してください。

<div id="amount-basis">
  ### 金額の基準
</div>

Order Value に基づくリワードを設定する際、**Amount basis** 設定でカート合計の計算方法を選択できます。

* **Order total** — 送料と税を含む注文合計を使用します。
* **Subtotal** — 割引前の商品小計(割引コードが適用される前)を使用します。
* **Subtotal after discounts (excludes tax and shipping)** — 割引、送料、税を差し引いた後のカート合計を使用します。これは Shopify が送料無料のしきい値を評価する方法と一致するため、割引コードが適用された場合でも、顧客が本当にしきい値に達しているかをリワードバーが正確に反映します。

> 💡 **ヒント:** リワードとして送料無料を提供する場合は、バーが Shopify 自身の送料無料の評価と一致するように **Subtotal after discounts (excludes tax and shipping)** を使用してください。他の基準では、割引コードによってバーは「達成」と表示されるのに Shopify は送料を請求する、ということが起こり得ます。

***

<div id="trust-badges">
  ## Trust Badges
</div>

カスタムのアイコンとテキストでトラストバッジを作成し、チェックアウトのコンバージョン率を高めます。バッジは縦にスタックすることも、横に並べて表示することもできます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-trust-badges-secure-payments.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=1c37b9c78f1d7e7bd61a288190606fde" alt="アイコン付きの Secure Payments、30-Day Guarantee、Fast Shipping のチェックアウトトラストバッジ" width="2290" height="1036" data-path="images/aftersell/checkout-widget-types-trust-badges-secure-payments.png" />

トラストバッジは、ブランドへの**信頼感**を築き、価値提案をハイライトするのに最適で、**チェックアウト離脱率の低下**に役立ちます。

***

<div id="testimonials">
  ## Testimonials
</div>

チェックアウトに顧客レビューを直接表示して信頼を築き、チェックアウト離脱率を下げます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-testimonial-five-star-customer.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=6806b0ce19354c34095e9433982601c4" alt="合計の下にハイライトされた、5 つ星の顧客レビュー引用付きのチェックアウトテスティモニアル" width="2138" height="1252" data-path="images/aftersell/checkout-widget-types-testimonial-five-star-customer.png" />

<div id="testimonials-modes">
  ### テスティモニアルのモード
</div>

Aftersell は 2 種類のテスティモニアルウィジェットを提供しています。

* **Classic Testimonials** - 自分で書くテスティモニアル。引き続き利用可能です。Flex Testimonials は、レビューアプリから実際のレビューを取得する新しいオプションです。
* **Flex Testimonials** - レビューアプリ(Judge.me、Klaviyo、Okendo、Yotpo)から顧客レビューを自動取得します。すべてのマーチャントに推奨されるオプションです。

<div id="switching-from-classic-to-flex-testimonials">
  ### Classic から Flex Testimonials への切り替え
</div>

Classic Testimonials を使用している場合は、レビューアプリのレビューを表示するために Flex Testimonials に切り替えるべきです。

1. Aftersell で **Checkout** を開きます
2. **Classic Testimonials** ウィジェットタブに移動します
3. 上部のバナーで **Switch to review app widget** をクリックします
4. **Settings > Product Reviews** でレビューアプリの認証情報を設定します(下記の[レビューアプリ連携](#review-app-integrations)を参照)

Flex Testimonials がアクティブな間に表示されるバナーの **Switch back to manually written reviews** をクリックすれば、いつでも元に戻せます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-types-review-app-banner.gif?s=9640e4164e7ce4834ad1305a608ed5a6" alt="実際の顧客レビューのためにレビューアプリウィジェットへの切り替えを促す Aftersell のバナー" width="3696" height="1080" data-path="images/aftersell/checkout-widget-types-review-app-banner.gif" />

<div id="flex-testimonials-configuration">
  ### Flex Testimonials の設定
</div>

Flex Testimonials には 2 つの選択モードがあります。

* **Manual selection** - テスティモニアルウィジェットに表示する特定のレビューを選びます
* **Dynamic** - 顧客のカート内の商品に基づいてレビューを自動取得・表示します

<div id="dynamic-mode">
  #### Dynamic モード
</div>

Dynamic モードでは、Aftersell がレビューアプリからレビューをインポートして保存し、チェックアウトウィジェットに表示できるようにします。最初のインポートは 24 時間以内に自動で行われ、その後は週 1 回行われます。

すぐにレビューをインポートするには、**Settings > Product Reviews** に移動し、お使いのレビューアプリの **Sync now** をクリックします。

以下を設定できます。

* **Max reviews to show** - 表示するレビュー数を 1〜3 の範囲で制御します
* **Display type** - 横型カルーセルと縦型スタックのレイアウトから選びます
* **Minimum rating** - 表示するレビューの最低星評価を設定します
* **Truncate review text after (optional)** - レビューテキストの最大文字数を設定します。レビューがこの制限を超えると、省略記号で切り詰められ、「Read more」ボタンが表示されます。「Read more」をクリックすると、レビュー全文のポップオーバーが開きます。空欄にすると制限なし(デフォルト)。

<div id="review-app-integrations">
  ### レビューアプリ連携
</div>

Flex Testimonials を使用するには、**Settings > Product Reviews** でレビューアプリの認証情報を設定する必要があります。Aftersell は以下に対応しています。

* **Judge.me** - Private API トークンが必要
* **Klaviyo** - プライベート API キーが必要
* **Okendo** - User ID が必要
* **Yotpo** - App Key が必要

セットアップ手順は以下のガイドを参照してください。

* [Judge.me 連携](/ja/aftersell/judgeme_reviews_integration)
* [Klaviyo 連携](/ja/aftersell/klaviyo_reviews_integration)
* [Okendo 連携](/ja/aftersell/okendo_reviews_integration)
* [Yotpo 連携](/ja/aftersell/aftersell_yotpo_reviews_integration)

***

<div id="notes">
  ## Notes
</div>

顧客が注文にメモを追加できるようにします。メモは顧客が手動で書くことも、事前に用意されたメモを使うこともできます。事前に用意されたメモは、ストアがギフトラッピングやエコ包装を提供していて、顧客に簡単なオプトイン方法を提供したい場合に最適です。

***

<div id="images">
  ## Images
</div>

カスタム画像をアップロードして、チェックアウトに挿入できます。

***

<div id="text">
  ## Text
</div>

チェックアウトに任意のテキストのバナーを挿入します。

テキストウィジェットには **4 つのスタイル**があります。

* **Information:** 青い背景に青い情報アイコン。
* **Success:** 緑の背景に緑のチェックマークアイコン。
* **Critical:** 赤い背景に赤い感嘆符アイコン。
* **Warning:** 黄色い背景に黄色い警告三角形アイコン。
