> ## 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 Checkoutでの配置の最適化まで、Aftersellでチェックアウトウィジェットを設定・配置する方法を順を追って説明します。

**注：** ShopifyのCheckout Extensibility APIの制限により、チェックアウトウィジェットはShopify Plusマーチャントのみが利用できます。

***

<div id="step-1-enable-your-widget-in-aftersell">
  ## ステップ1：Aftersellでウィジェットを有効にする
</div>

チェックアウトにウィジェットを追加する前に、Aftersell管理画面でウィジェットを有効にする必要があります。

1. Aftersell管理画面の**Checkout**タブに移動します
2. 設定したいウィジェットタイプ（[Upsells](#upsells)、[Cart Controls](#cart-controls)、[Rewards](#rewards)、[Trust Badges](#trust-badges)、[Testimonials](#testimonials)、[Notes](#notes)、[Images](#images)、[Text](#text)）を選択します
3. **Create**をクリックして新しいウィジェットを作成するか、既存のウィジェットを選択して編集します
4. ウィジェットの設定を構成します（以下の[ウィジェットの種類と設定](#widget-types-and-configuration)を参照）
5. ウィジェット設定の右上にある**Enable**トグルをクリックします
6. 制限付きまたは高度なアップセルの場合は、先に進む前にカスタムトリガーを有効にしてください

***

<div id="step-2-open-the-shopify-checkout-editor">
  ## ステップ2：Shopifyチェックアウトエディターを開く
</div>

Shopifyチェックアウトエディターにアクセスする方法は2つあります。

**オプション1：Shopify管理画面から**

1. Shopify管理画面の**Settings**に移動します
2. 左側のナビゲーションで**Checkout**をクリックします
3. 目的のチェックアウトプロファイルの横にある**Customize**をクリックします

**オプション2：Aftersellから**

1. AftersellのCheckoutエディターページ右下にある**Open Shopify Checkout Editor**ボタンをクリックします

💡 **ヒント：** オプション1では、どのチェックアウトプロファイルを編集するかをより細かく制御できます。公開する前に、まずドラフトバージョンでテストすることをおすすめします。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-admin-settings-link.gif?s=a182cd42cf41d7b53e5e5765afeb65d9" alt="チェックアウトエディターを開くためにSettingsリンクがハイライトされたShopify管理画面のホーム" width="1844" height="1080" data-path="images/aftersell/checkout-widget-config-admin-settings-link.gif" />

***

<div id="step-3-add-the-app-block-to-your-checkout">
  ## ステップ3：チェックアウトにアプリブロックを追加する
</div>

1. Shopifyチェックアウトエディターで**Add app block**をクリックします
2. 利用可能なウィジェットの一覧から目的のAftersellウィジェットを選択します
3. ウィジェットの正しいプレースメントを選択します（以下の[利用可能なプレースメント](#available-placements)を参照）
4. Shop Payのチェックアウトにウィジェットを表示したい場合は、[**Include app block in Shop Pay**](/ja/aftersell/show_checkout_widgets_in_shop_pay)オプションにチェックを入れます
5. 右上の**Save**をクリックします

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-add-app-block-button.png?fit=max&auto=format&n=1Y3gBpUfxv16VGSW&q=85&s=f6ba0d6ab535b750f8487c408e99ef69" alt="サイドバーのAdd blockボタンを指す矢印が表示されたShopifyチェックアウトエディター" width="3486" height="1964" data-path="images/aftersell/checkout-widget-install-add-app-block-button.png" />

***

<div id="step-4-position-your-widget">
  ## ステップ4：ウィジェットを配置する
</div>

1. 選択したプレースメントエリア内で、アプリブロックを目的の場所にドラッグ＆ドロップします
2. 右上の**Save**をクリックします

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-install-drag-app-block.gif?s=7d17314d5e47e74b202e18baf3867e7a" alt="Aftersellウィジェットを表示するライブチェックアウトプレビューの横にあるShopifyチェックアウトエディターのブロック一覧" width="1916" height="1080" data-path="images/aftersell/checkout-widget-install-drag-app-block.gif" />

***

<div id="widget-types-and-configuration">
  ## ウィジェットの種類と設定
</div>

<div id="placements">
  ## プレースメント
</div>

プレースメントはAftersellのCheckoutエディターで作成し、同じチェックアウトページで同じタイプの複数のウィジェットを実行できるようにします。

たとえば、同じページに2つのアップセルオファーを表示したい場合は、それぞれを別のプレースメントに割り当てる必要があります。

<div id="available-placements">
  ### 利用可能なプレースメント
</div>

* **Default placement**：メインのプレースメント。すべてのウィジェットタイプはここから始まります。
* **Additional placement 1**：同じページで同じタイプの別のウィジェットを表示するための2つ目のプレースメントスロット。
* **Additional placement 2**：さらに分離するための3つ目のプレースメントスロット。

Aftersellのプレースメントドロップダウンから\*\*+ Add new placement\*\*を選択して、新しいプレースメントを直接作成することもできます。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-placement-dropdown.gif?s=e43a141a2b6db37cb17ed0fcb1e2f8ef" alt="Upsells一覧とプレビューの上にプレースメントドロップダウンが表示されたAftersellのCheckoutエディター" width="1912" height="1080" data-path="images/aftersell/checkout-widget-config-placement-dropdown.gif" />

***

<div id="when-to-use-multiple-placements">
  ### 複数のプレースメントを使うべき場合
</div>

以下を行いたい場合は、複数のプレースメントを使用してください。

* 1つのチェックアウトページに同じタイプのウィジェットを複数表示する
* ページの異なるセクションにウィジェットを表示する
* 異なるオーディエンスに異なるオファーをターゲティングする
* 類似または重複するトリガーを持つウィジェットを実行する

Aftersellは優先順位システムを使用しています。同じプレースメント内で、同一のトリガーを持つ複数のウィジェットを実行することはできません。1つのプレースメント内で2つのウィジェットが同じトリガー条件を共有している場合、優先順位に基づいて1つのみが表示されます。

類似のトリガーを使用するには、各ウィジェットを別のプレースメントに割り当てて、競合なく独立して実行できるようにします。

***

<div id="matching-placements-in-the-shopify-checkout-editor">
  ## Shopifyチェックアウトエディターでプレースメントを一致させる
</div>

Aftersellの各プレースメントは、Shopifyチェックアウトエディターの個別のアプリブロックに対応しています。Shopifyで選択するプレースメントは、Aftersellで設定したプレースメントと一致している必要があります。

たとえば、Aftersellでウィジェットが**Additional placement 1**に割り当てられている場合、Shopifyのアプリブロックも**Additional placement 1**に設定する必要があります。

プレースメントが一致していないと、ウィジェットが表示されないか、間違った場所に表示されることがあります。

**重要：** プレースメントの不一致は、ウィジェットが表示されない最も一般的な原因の1つです。ウィジェットが表示されない場合は、さらにトラブルシューティングを行う前に、AftersellとShopifyの両方でプレースメントが一致していることを確認してください。

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-block-placement-dropdown.gif?s=b9fc5f328cbf3bf04a63cfbdde505cb4" alt="PlacementドロップダウンがAdditional placementに設定されたShopifyチェックアウトエディターのUpsell Widgetブロック設定" width="2192" height="1080" data-path="images/aftersell/checkout-widget-config-block-placement-dropdown.gif" />

***

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

チェックアウト中に顧客に商品を提案し、平均注文額（AOV）を高めます。

**設定オプション：**

**ウィジェットモード：**

* **Single Product Upsell：** Add to Cartボタン付きで1つの商品を表示
* **Multi-Product Upsell：** スタックまたはカルーセルレイアウトで複数の商品を表示し、顧客が複数のオファーを承諾できるようにする
* **Checkmark Upsell：** Add to Cartボタンの代わりにチェックボックス付きで1つの商品を表示（配送保険のような低価格のアドオンに最適）

**商品の選択方法：**

* **Specific Products：** アップセルする個々の商品を手動で選択
* **Collection：** コレクションを選択し、最大5つのランダムな商品を表示（カート内の商品は自動的に除外）
* **Automatic upsell(s)：** カートの内容に基づいて商品を自動的にレコメンド
* **Most Expensive Product：** カート内で最も高価な商品を自動的にアップセル
* **Spend threshold：** 顧客がリワードのしきい値に到達するのに役立つ商品をレコメンド（同じアップセルウィジェットで**Show rewards bar**が有効な場合にのみ選択可能）
* **Strategy：** ルールベースのターゲティングを使って商品を動的に選択。[Strategies](/ja/aftersell/strategies_overview)が有効なストアでのみ表示されます

**追加機能：**

* ウィジェット内で直接ディスカウントを追加
* サブスクリプションプランを特定のオプションに固定
* 商品レビューの星評価を表示（互換性のあるレビューアプリが必要）
* ウィジェットごとの承諾可能なオファーの最大数を設定（SingleおよびMultiアップセルタイプのみ）

[アップセルウィジェットについて詳しく見る](/ja/aftersell/checkout_widget_types#upsells)

***

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

顧客がチェックアウトページで直接カートを変更できるようにします。

**利用可能なコントロール：**

* **Variant selector：** 在庫のある別のバリエーションに変更
* **Quantity selector：** 商品の数量を調整
* **Remove item：** Show Remove Item Buttonは、アップセル商品をカートから削除します。ペアとなる設定の**Allow Removal of Non-Upsell Products**（デフォルトでオフ）は、削除対象をカート内のすべてに拡張します
* **Subscription selector：** サブスクリプションの頻度を変更
* **Subscription upgrade：** 単発購入をサブスクリプションにアップグレード
* **Custom text：** ラインアイテムの下にカスタムテキストを追加

**商品ターゲティング：**

* カート内のすべての商品に適用
* 選択した商品のみに適用
* 選択した商品を除くすべての商品に適用

**追加機能：**

* カート内の商品に商品レビューの星評価を表示

[カートコントロールについて詳しく見る](/ja/aftersell/checkout_widget_types#cart-controls)

***

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

顧客がリワード獲得までどれだけ近づいているかを示すプログレスバーを表示します。

**設定オプション：**

* リワードの基準：**Cart total**または**Item count**
* 金額の基準（Cart totalの場合）：**Order total（送料と税を含む）**、**Subtotal（ディスカウント前）**、または**Subtotal after discounts（税と送料を除く）**
* リワードメッセージとスタイル
* プログレスバーの色とデザイン

**ベストプラクティス：**

* アップセルウィジェットと組み合わせて、顧客がリワードのしきい値に到達できるようにする
* アップセルでSpend thresholdの商品タイプを使い、差額を埋める商品を自動的にレコメンドする
* ShopifyでAutomatic Discounts（ディスカウントリワード用）またはShipping Rules（送料無料用）を使ってリワードを作成する
* 送料無料を提供する場合は、金額の基準として\*\*Subtotal after discounts（税と送料を除く）\*\*を使用し、ディスカウントコード適用時にバーがShopify自身のしきい値評価と一致するようにする

[リワードについて詳しく見る](/ja/aftersell/checkout_widget_types#rewards)

***

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

カスタムアイコンとテキストで信頼を構築し、チェックアウトのコンバージョン率を高めます。

**設定オプション：**

* バッジのレイアウト：垂直スタックまたは水平表示
* 各バッジのカスタムアイコンとテキスト
* スタイルと間隔のオプション

**ベストプラクティス：**

* セキュリティ機能を強調する（安全なチェックアウト、SSL暗号化）
* 保証をアピールする（返金保証、無料返品）
* 配送のメリットを表示する（送料無料、迅速な配達）

[トラストバッジについて詳しく見る](/ja/aftersell/checkout_widget_types#trust-badges)

***

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

チェックアウトに直接カスタマーレビューを表示して、信頼を構築します。

**設定オプション：**

* **Flex Testimonials（推奨）：** レビューアプリ（Judge.me、Klaviyo、Okendo、Yotpo）から実際のレビューを自動的に取得
* 選択モード：Manual（特定のレビューを選択）またはDynamic（カートの内容に基づいてレビューを自動取得）
* 表示タイプ：水平カルーセルまたは垂直スタック
* 最低評価フィルター

**セットアップ要件：**

* Settings > Product Reviews でレビューアプリの認証情報を設定
* レビューは24時間以内に自動同期され、その後は毎週同期

[テスティモニアルについて詳しく見る](/ja/aftersell/checkout_widget_types#testimonials)

***

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

顧客が注文にメモを追加できるようにします。

**設定オプション：**

* Manual notes：顧客が入力できる自由記述フィールド
* Pre-written notes：ギフトラッピングやエコ包装などのオプション用チェックボックス

[ノートについて詳しく見る](/ja/aftersell/checkout_widget_types#notes)

***

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

カスタム画像をアップロードしてチェックアウトに表示します。

**設定オプション：**

* 画像のアップロード
* 幅調整スライダー
* 最小サイズの要件なし

[画像について詳しく見る](/ja/aftersell/checkout_widget_types#images)

***

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

カスタムテキスト付きのバナーをチェックアウトに挿入します。

**設定オプション：**

* **Container Style：** **Plain Text**（デフォルト）または**Badge**。以下のバナーカラーはBadgeを選択した場合にのみ表示されます
* **Banner Type**（Badgeのみ）：
  * **Info (Blue)：** 情報アイコン付きの青い背景
  * **Success (Green)：** チェックマークアイコン付きの緑の背景
  * **Warning (Yellow)：** 警告三角アイコン付きの黄色い背景
  * **Critical (Red)：** 感嘆符アイコン付きの赤い背景
* **Body**フィールドのテキストサイズ（SmallまたはBase）— Headingフィールドにはサイズのコントロールはありません
* HeadingフィールドとBodyフィールドの両方の配置
* 間隔：None、Extra Tight、Tight、Base、Loose、Extra Loose

[テキストについて詳しく見る](/ja/aftersell/checkout_widget_types#text)

***

<div id="troubleshooting">
  ## トラブルシューティング
</div>

<div id="widgets-not-displaying">
  ### ウィジェットが表示されない
</div>

セットアップ後にウィジェットが表示されない場合：

1. Aftersell管理画面でウィジェットが有効になっていることを確認します
2. Shopifyチェックアウトエディターでアプリブロックが追加されているか確認します
3. Shopifyチェックアウトエディターでアプリブロックが保存されていることを確認します
4. 正しいプレースメントが選択されていることを確認します。Shopifyチェックアウトエディターでアプリブロックを追加する際は、Default placement、Additional placement 1、Additional placement 2など、一致するプレースメントを選択する必要があります。間違ったプレースメントが選択されていると、ウィジェットが表示されないか、間違った場所に表示されることがあります。アプリブロックを削除して再追加し、意図したプレースメントが選択されていることを確認してください。
5. Shop Payの場合：「Include app block in Shop Pay」にチェックが入っていることを確認します
6. ブラウザのキャッシュをクリアするか、シークレットモードを試します
7. 変更が反映されるまで数分待ちます

<div id="shop-pay-widgets-not-showing">
  ### Shop Payでウィジェットが表示されない
</div>

Shop Payのチェックアウトにウィジェットを表示するには：

1. Shopifyチェックアウトエディターでウィジェットを開きます
2. Checkout behaviourの下にある**Include app block in Shop Pay**オプションにチェックを入れます
3. 変更を保存します

<img src="https://mintcdn.com/aftersell/1Y3gBpUfxv16VGSW/images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif?s=63de90b2b7e5807806e2390316de688d" alt="Mainの下にAftersell Upsell Widgetアプリブロックが表示されたShopifyチェックアウトエディターのサイドバー" width="1416" height="1080" data-path="images/aftersell/checkout-widget-config-editor-sidebar-app-block.gif" />

[Shop Payウィジェットについて詳しく見る](/ja/aftersell/show_checkout_widgets_in_shop_pay)

***

<div id="next-steps">
  ## 次のステップ
</div>

* [チェックアウトトリガーについて学ぶ](/ja/aftersell/checkout_triggers) - 条件に応じてウィジェットを表示する
* [チェックアウトのA/Bテストを設定する](/ja/aftersell/checkout_a_b_testing) - 配置を最適化する
* [チェックアウトのブランディングを設定する](/ja/aftersell/checkout_branding_settings) - ストアのデザインに合わせる
* [高度なアップセル戦略を探る](/ja/aftersell/best_practices) - AOVを最大化する