> ## 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 で利用できるポストパーチェスウィジェットと、それらを使ってポストパーチェスアップセル体験を構築する方法を説明します。ウィジェットはスコープと機能ごとにグループ化されており、重複を避けるため各ウィジェットは 1 回のみ記載されています。

***

<div id="funnel-wide-widgets">
  # ファネル全体のウィジェット
</div>

<div id="progress-bar">
  ## プログレスバー
</div>

**プログレスバー**は、顧客がポストパーチェスフローのどこにいるかを表示します。

有効にすると、プログレスバーはファネル内のすべてのアップセルオファーに表示されます。プログレスバーに加えた変更は、ファネル全体に適用されます。

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-progress-bar.gif?s=f9ee14053add6280b48524aca197a791" alt="Cart、Order placed、Special offer、Done のステップを表示するポストパーチェスのプログレスバー" width="2936" height="480" data-path="images/aftersell/ppu-widgets-post-purchase-progress-bar.gif" />

**設定オプション**

* ファネルのプログレスバーのオン/オフを切り替える
* 表示スタイルを選択する:
  * **Minimal**
  * **Minimal with labels**
  * **Maximal**
* **Black** または **White** の外観を選択する
* 上下のパディングを調整して間隔を制御する

***

<div id="offer-level-widgets">
  # オファー単位のウィジェット
</div>

オファー単位のウィジェットは、個々のアップセルオファーのコンテンツと動作を制御します。

これらのウィジェットは、メッセージング、緊急性、商品情報、価格の詳細、アクションなど、特定のアップセルステップで顧客に表示される内容を定義します。

ファネル内の各オファーは、オファー単位のウィジェットを使って独立してカスタマイズできるため、各ステップで体験を調整できます。

これらのウィジェットには以下が含まれます:\
[Text](#text)\
[Timer](#timer)\
[Upsell Product](#upsell-product)\
[Product Selection](#product-selection)\
[Discount](#discount)\
[Badge](#badge)\
[Shipping](#shipping)\
[Image](#image)\
[Buttons](#buttons)\
[Price Breakdown](#price-breakdown)\
[Product Details](#product-details)\
[Variant & plan options](#variant--plan-options)\
[Layout](#layout)\
[Video](#video)\
[Testimonials](#testimonials)

***

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

**Text** ウィジェットは、オファー全体の見出しや補足コピーに使用します。

見出しと任意の本文テキストをサポートし、フォントサイズ、色、太さ、配置、取り消し線、間隔のコントロールがあります。

動的変数 `{first-name}` を使うと、顧客ごとにメッセージをパーソナライズできます。

***

<div id="timer">
  ## Timer
</div>

**Timer** ウィジェットは、リアルタイムのカウントダウンを表示して緊急性を演出します。

タイマーが動いている間、オファーは表示され続けます。タイマーがゼロに達すると、アップセルオファーは自動的に消え、顧客はファネルの次のステップへ進みます。

***

<div id="upsell-product">
  ## Upsell Product
</div>

**Upsell Product** ウィジェットは、オファーの中核です。どの商品を表示するかを定義し、以下のすべての商品関連ウィジェットのコンテナとして機能します。

以降の項目はすべて、このウィジェット内で設定します。

***

<div id="product-selection">
  ## Product Selection
</div>

Product Selection ウィジェットは、アップセルオファーに表示される商品を制御します。

固定の商品を選択することも、顧客の元の注文に基づいてアップセル商品を動的に決定することもでき、静的なアップセル体験と適応型のアップセル体験の両方を実現できます。

<div id="product-type-options">
  #### 商品タイプのオプション
</div>

* **Specific product**\
  常に同じ商品をアップセルに表示します。
* **Automatic upsell**\
  事前定義されたアップセルロジックを使って商品を動的に選択します。
* **Most expensive in cart**\
  顧客の元の注文の中で最も高い商品を使用します。
* **Least expensive in cart**\
  顧客の元の注文の中で最も安い商品を使用します。

<div id="changing-the-product">
  #### 商品の変更
</div>

選択した商品はウィジェットの上部に表示されます。変更するには:

1. **Change product** をクリックします
2. 商品タイプを選択します
3. 商品を選択または確認します

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

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-offer-editor-edit-product.gif?s=a281ef6837574437297ca063e861d119" alt="ライブのオファープレビューの横に Edit upsell product パネルを表示した Aftersell のオファーエディター" width="948" height="480" data-path="images/aftersell/ppu-widgets-offer-editor-edit-product.gif" />

<div id="identifying-products-with-identical-names">
  #### 同じ名前の商品の識別
</div>

ストアに同じタイトルの商品やバリアントが複数ある場合、商品ピッカーの **Show IDs** トグルを有効にすると、各名前の下に数値の Shopify 商品 ID とバリアント ID が表示されます。これにより、正しい商品を選択していることを簡単に確認できます。

**Show IDs** トグルはピッカーの **Product** タブで利用でき、デフォルトではオフです。Collection タブでは利用できません。

***

<div id="discount">
  ## Discount
</div>

**Discount** ウィジェットは、プロモーション価格を適用して表示します。

パーセンテージ(%)割引または固定額(\$)割引のいずれかを選択できます。必要に応じてカスタムのディスカウントテキストを追加でき、ディスカウントは商品の割引前価格(compare-at price)を参照することも、無視することもできます。

<div id="bulk-discount-shortcut-for-multi-product-offers">
  ### 複数商品オファー向けの一括ディスカウントショートカット
</div>

複数商品オファーとコレクションオファーでは、Upsell Products ウィジェット設定内の商品選択エリアの下に **Discount** セクションが直接表示されます。これにより、各商品の個別設定を開くことなく、複数の商品のディスカウントをより速く設定・更新できます。

このセクションはデフォルトで折りたたまれています。展開すると:

* オファー内のすべての商品のリストが表示され、それぞれにチェックボックスと、現在のディスカウントを表示するバッジ(たとえば、`17% off` や `$18.00 off`)が付いています。
* チェックボックスを使って更新したい商品を選択します。デフォルトではすべての商品が選択されています。
* リストの下のピルには、変更が適用される商品の数が表示されます。
* ディスカウントのタイプと値のフィールドを使ってディスカウントを設定します。変更は選択した商品にのみ適用され、未選択の商品は既存のディスカウントを維持します。

<div id="mixed-discounts-across-products">
  #### 商品間で異なるディスカウント
</div>

選択した商品のディスカウント設定が異なる場合、フィールドにはその違いを示すプレースホルダーテキストが表示されます:

* 商品の**ディスカウントタイプ**が異なる場合(たとえば、一部が % オフで他が \$ オフ)、タイプセレクターには **Mixed** と表示されます。
* 商品の**ディスカウントの値**またはタイプが異なる場合、値のフィールドには **Multiple values** と表示され、新しい値を入力すると選択した各商品の現在のディスカウントが上書きされる旨の注記が付きます。

<div id="info-icon-on-product-rows">
  #### 商品行の情報アイコン
</div>

商品に追加のディスカウント設定(カスタムのディスカウントタイトル、割引前価格、サブスクリプションディスカウントなど)が設定されている場合、その商品のディスカウントバッジの横に情報アイコン(i)が表示されます。アイコンにカーソルを合わせると、それらの追加設定の概要が表示されます。

***

<div id="badge">
  ## Badge
</div>

**Badge** ウィジェットは、人気や緊急性など、商品の重要な属性をハイライトします。

事前定義されたバッジラベルの選択、複数のビジュアルスタイルからの選択、アイコンの追加、そしてバッジをオファー内または商品画像上のどこに表示するかの制御ができます。

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-post-purchase-offer-trending.png?fit=max&auto=format&n=SnVX3h-PpMMxQMDU&q=85&s=c7c4cf7649723721d24bffff865b6f2b" alt="商品タイトルの上に Trending バッジを表示するポストパーチェスオファー" width="1920" height="898" data-path="images/aftersell/ppu-widgets-post-purchase-offer-trending.png" />

カスタムバッジ画像は **Advanced badge settings** からアップロードできます(SVG または PNG、最大 10MB)。

<Note>
  バッジの編集は V2 オファーでのみ利用できます。V1 オファーでは、以前に設定されたバッジは保持されますが、V1 オファーでバッジ設定を編集することはできません。
</Note>

***

<div id="shipping">
  ## Shipping
</div>

**Shipping** ウィジェットは、配送料の伝え方を制御します。

送料無料にするか、特定の配送料金を設定して配送料を請求するかを選択できます。

***

<div id="image">
  ## Image
</div>

**Image** ウィジェットは、商品画像の表示方法を制御します。

メイン画像のサイズ調整、枠線の追加、画像カルーセルの有効化、そして **Advanced image settings** からのカスタム商品画像のアップロードといったオプションがあります。

***

<div id="language">
  ## Language
</div>

**Language** セクションは、ボタンテキスト、サブスクリプションラベル、価格ラベル、その他の編集不可の文字列など、オファー内のすべてのシステムテキストに使用される言語を制御します。

**Language** ドロップダウンから言語を選択すると、そのオファーのシステムテキストが自動的に翻訳されます。Aftersell は 32 の言語をサポートしています。

この設定はバッジやカスタムテキストフィールドには影響しません。翻訳されるのはシステム生成のテキストのみです。

***

<div id="buttons">
  ## Buttons
</div>

**Buttons ウィジェット**は、チェックアウト中に顧客がアップセルを承諾または拒否する方法を制御します。

ボタンの動作と外観をカスタマイズできます:

* **デフォルトの承諾ボタンテキスト**の選択
* アップセルの承諾前に**確認クリック**を必須にする
* **拒否ボタンのスタイル**の変更(たとえば、ボタンまたはリンク)
* **ボタンの配置**と幅の調整
* ボタンの上または下への任意の**補足テキスト**の追加(スタイリングのコントロールと動的変数のサポート付き)

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

**Default accept button text** ドロップダウンを使って、ポストパーチェスオファーの承諾ボタンのテキストを設定できます。利用できるオプションはオファーのタイプによって異なります:

**標準オファー:**

* **Pay Now** - 「Pay Now • \[商品の合計金額]」と表示されます(無料商品の場合は「Add Now • Free」)
* **Accept Offer** - 価格に関係なく「Accept Offer」と表示されます

**サブスクリプションアップグレードオファー:**

* **Upgrade Subscription** - 「Upgrade Subscription」と表示されます(新規のサブスクリプションアップグレードオファーのデフォルト)
* **Accept Offer** - 価格に関係なく「Accept Offer」と表示されます
* **Pay Now** - 「Pay Now • \[商品の合計金額]」と表示されます(無料商品の場合は「Add Now • Free」)

ボタンテキストを翻訳するには、Buttons セクションの上にある **Language** セクションを使用してください。

<div id="button-layout-options">
  ### ボタンレイアウトのオプション
</div>

**承諾ボタンと拒否ボタンの相対的な位置**も制御できます。以下のレイアウトがサポートされています:

* **Accept above decline** - 承諾ボタンを拒否オプションの上に表示します
* **Decline above accept** - 拒否オプションを承諾ボタンの上に表示します
* **Accept beside decline** - 承諾ボタンと拒否ボタンを横に並べて表示します

これらのレイアウトオプションにより、望みのチェックアウト体験とメッセージの優先順位に合わせた、より柔軟な調整が可能になります。

***

<div id="price-breakdown">
  ## Price Breakdown
</div>

**Price Breakdown** ウィジェットは、価格の明確さを高めます。

配送料と税金の表示、小計やディスカウントなどの追加詳細の表示ができ、最大限の分かりやすさのために決済ボタンの近くに配置・整列できます。

<div id="hide-shipping-adjustment-line">
  ### 配送料調整行の非表示
</div>

オファーがリプレイスメントアップセルとして設定されている場合(「Replace item in original order with upsell」設定を使用)、価格内訳には、元の商品と置き換え商品の間の配送料の差額を反映した **Shipping adjustment** の行が含まれます。

この行は **Hide shipping adjustment line** チェックボックスで非表示にできます。このチェックボックスは、リプレイスメントアップセルが設定されている場合にのみ Price Breakdown セクションに表示されます。この設定はデフォルトでオフのため、既存のオファーには影響しません。

* チェックすると、配送料調整の行が顧客の価格内訳から非表示になります。
* チェックを外すと、配送料調整の行は通常どおり表示されます。

この設定は、リプレイスメントアップセルオファーの配送料調整行にのみ影響します。リプレイスメント以外のオファーの標準の配送料行には影響しません。

***

<div id="product-details">
  ## Product Details
</div>

**Product Details** ウィジェットは、商品の重要な情報の表示方法を制御します。

商品レビューの評価(レビューがない場合は自動的に非表示)、任意の数量セレクター、そして商品がすでに元の注文に含まれている場合にオファーをスキップする機能をサポートしています。

商品のタイトルと価格は完全にスタイル設定が可能で、`{product}`、`{original-price}`、`{current-price}`、`{savings}`、`{savings-line}` などの動的変数をサポートしています。

価値や緊急性を強調するために、任意のオファー説明文を追加できます。

<div id="product-review-star-colors">
  ### 商品レビューの星の色
</div>

**Show product reviews rating** が有効な場合、星評価表示の色をカスタマイズできます:

* **Star color** — 塗りつぶされた(アクティブな)星の色。デフォルトは `#fdcc0d`(黄色)です。
* **Empty star color** — 塗りつぶされていない(非アクティブな)星の色。デフォルトは `#d1d5db`(ライトグレー)です。

色を変更するには、**Product Details** ウィジェット設定を開き、**Show product reviews rating** を有効にして、カラー入力欄で希望の 16 進数値を設定します。

<div id="quantity-selector-presets">
  ### 数量セレクターのプリセット
</div>

数量セレクターが有効な場合、オファー表示時に何個の商品を表示または許可するかを制御する**プリセット数量**を設定できます。以下のプリセットオプションが利用できます:

* **Fixed** — 顧客が開始する特定の数量を設定します。数量セレクターは非表示になり、顧客は数量を変更できません。
* **Percentage of purchased quantity** — 顧客が元々購入した数量に対するパーセンテージとして数量を設定します。
* **Minimum quantity** — 数量の下限を設定します。顧客はこの値から開始し、そこから増やせます。
* **Maximum quantity** — 数量の上限を設定します。顧客は 1 から開始し、設定された最大値(最大 20)を超えて増やすことはできません。その商品の最大数量を示すメッセージが顧客に表示されます。

<div id="description-position">
  ### 説明文の位置
</div>

単一商品オファーでは、CTA ボタンに対する商品説明文の表示位置を制御できます:

* **Default (above buttons)** - 説明文が承諾・拒否ボタンの上に表示されます
* **Below buttons** - 説明文が承諾・拒否ボタンの下に表示されます

この設定により、メッセージの優先順位やデザインの好みに合わせてレイアウトを調整できます。

***

<div id="variant--plan-options">
  ## Variant & plan options
</div>

**Variant & Plan Options** ウィジェットは、バリアントの表示、選択、サブスクリプションプランのロックを制御します。

在庫切れのバリアントの表示/非表示、すべてのバリアントが購入不可の場合の商品全体の非表示、選択肢が 1 つしかないバリアントオプションの表示可否を制御できます。**高度な設定では、バリアントセレクターを完全に非表示にすることもできます**。

バリアントの事前選択オプションには、最初の購入へのスマートマッチング、未選択(ユーザーによる選択が必要)、または最初に購入可能なバリアントがあります。

複数のバリアントオプションを持つ商品では、すべてのオプションが表示され、在庫のあるバリアントが可能な場合に事前選択されます。在庫切れのオプションは購入不可として表示されます。バリアントオプションが 1 つの商品では、在庫切れのオプションは非表示になります。

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

複数のサブスクリプションプランを持つサブスクリプション商品を提供する際、オファーを特定のプランにロックできます。これにより、顧客がポストパーチェス体験中にサブスクリプションプランを変更できなくなり、設定したとおりのサブスクリプションオプションを確実に提供できます。

**サブスクリプションプランをロックするには:**

1. **Variant & Plan Options** セクションで **Lock subscription plan** ドロップダウンを見つけます
2. ドロップダウンから特定のプランを選択します
3. これでプランがロックされました。顧客には、変更可能なドロップダウンの代わりに、プラン名が静的テキストとして表示されます

<Frame>
  <img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/ppu-widgets-variant-plan-options.gif?s=8851a3d937b3f732660588f555e8743b" alt="Lock subscription plan ドロップダウンが表示された Variant and Plan Options パネル" width="848" height="1080" data-path="images/aftersell/ppu-widgets-variant-plan-options.gif" />
</Frame>

**プランがロックされている場合:**

* 顧客にはプラン名がテキストとして表示されます
* プランセレクターのドロップダウンは非表示になります
* 顧客はサブスクリプションプランを変更できません
* ロックされたプランが Shopify で利用できなくなった場合、オファーは利用可能なすべてのプランの表示に自動的にフォールバックします

**自動リセット:**

商品の購入オプションを単発購入のみに変更した場合(サブスクリプションオプションを削除した場合)、ロックされたプランの設定は自動的にリセットされます。

<div id="variant-selector-position">
  ### バリアントセレクターの位置
</div>

CTA ボタンに対するバリアントセレクターの表示位置を制御できます:

* **Above CTA buttons (default)** - バリアントセレクターが承諾・拒否ボタンの上に表示されます
* **Below CTA buttons** - バリアントセレクターが承諾・拒否ボタンの下に表示されます

バリアントセレクターと商品説明文の両方が CTA ボタンの下に配置されている場合、その順序を制御できます:

* **Variant selector first** - バリアントセレクターが商品説明文の前に表示されます
* **Description first** - 商品説明文がバリアントセレクターの前に表示されます

また、バリアントセレクターの上下のパディングを調整して、間隔を微調整し、望みのビジュアルレイアウトを作成できます。

***

<div id="layout">
  ## Layout
</div>

**Layout** ウィジェットは、アップセル全体の構造と間隔を制御します。

1 カラムまたは 2 カラムのレイアウトの選択、レイアウトの最大幅の調整、上下のパディングの微調整ができ、すっきりと読みやすい体験を作成できます。

***

<div id="video">
  ## Video
</div>

**Video** ウィジェットは、クリック可能なサムネイルをオファーに追加します。クリックすると、スタイル付きの背景とアップセルに戻るボタンを備えたホスト型ビデオプレーヤーが新しいタブで開きます。動画はインラインではなく新しいタブで再生されるため、アップセルオファーは元のタブで開いたままになります。

このウィジェットは、ブランドに合わせたり、プレーヤーに注目を集めたりするための**背景色**と、配置(左、中央、右)および上下のパディングの**レイアウト設定**もサポートしています。

顧客体験をプレビューするには、エディターの**オファープレビュー**内のサムネイルをクリックします。ホスト型ビデオプレーヤーがストアフロントでの表示とまったく同じように新しいタブで開くため、公開前にサムネイル、CTA、閉じる動作を確認できます。

<div id="browser-compatibility">
  ### ブラウザーの互換性
</div>

ビデオウィジェットは、プレーヤーを新しいタブで開きます。デスクトップでは常に動作するため、ウィジェットは常に表示されます。

モバイルではその逆で、顧客をチェックアウトから追い出すことなく新しいタブを開けると Aftersell が認識しているブラウザーでのみウィジェットを表示します。対象は、Safari、Chrome、Firefox などのよく知られたネイティブモバイルブラウザーと、Facebook および Instagram のアプリ内ブラウザーです。

**それ以外のすべてのモバイルブラウザーではウィジェットは非表示になります。** これには、Google アプリ、TikTok、Pinterest などのアプリ内ブラウザー、汎用の WebView、そして Aftersell が認識しないものすべてが含まれます。認識されないブラウザーは表示ではなく非表示になるため、ウィジェットが表示されない環境は固定のリストではありません。Aftersell が初めて遭遇するブラウザーでも非表示になります。

ウィジェットが非表示になる場所では、代わりに表示する**フォールバック画像**をアップロードできます。たとえば、静的なプロモーション画像やブランドのグラフィックです。フォールバック画像は、リンクや再生ボタンなしで表示されます。フォールバック画像が設定されていない場合、ウィジェットの代わりに何も表示されません。

<Tip>
  公開するすべてのビデオウィジェットに**フォールバック画像**を設定してください。認識されないものは非表示になるため、トラフィックソースだけでは一部の顧客にウィジェットが表示されていないかどうかは分かりません。フォールバックがなければ、それらの顧客には何も表示されません。
</Tip>

<div id="video-source">
  ### 動画のソース
</div>

ウィジェットは、2 つのソースのいずれかから 1 本の動画を再生します。ウィジェット設定の **Upload** / **Link** トグルを使って、プレーヤーが使用するソースを選択します:

* **Upload** — MP4、WebM、または MOV ファイル(最大 50 MB)をドラッグアンドドロップまたは選択して、Shopify Files に直接ホストします。アップロード後、Shopify がファイルを処理し、エディターにプレビューが表示されます。
* **Link** — YouTube の URL、Vimeo の URL、またはホストされた動画ファイルへの直接リンク(たとえば、自社 CDN 上の MP4)を貼り付けます。

両方を入力することもできますが、再生されるのはトグルで選択したソースのみです。もう一方はタブの背後に保持され、自動フォールバックとしては**使用されません**。ソースが 1 つだけ設定されている場合は、トグルに関係なくそのソースが再生されます。

ウィジェットを保存する前に、少なくとも 1 つのソース(アップロードした動画または動画リンク)を設定する必要があります。

<div id="supported-link-formats">
  #### サポートされているリンク形式
</div>

リンクフィールドには以下を入力できます:

* **YouTube** — 標準の動画 URL を使用します(たとえば、`https://youtu.be/VIDEO_ID` または `https://www.youtube.com/watch?v=VIDEO_ID`)。YouTube Shorts の URL(`youtube.com/shorts/...`)はサポートされていません。動画を YouTube で開き、代わりに共有リンクを使用してください。
* **Vimeo** — 標準の動画 URL を使用します(たとえば、`https://vimeo.com/VIDEO_ID`)。ショーケースの URL や、特定の動画を指していないチャンネル・プロフィールページはサポートされていません。個々の動画のアドレスバーの URL を使用してください。数値の動画 ID を含むチャンネルまたはグループの URL は機能します。
* **Direct file** — 動画ファイルを指す公開アクセス可能な HTTPS URL(たとえば、CDN 上の MP4)。

<div id="link-validation">
  #### リンクの検証
</div>

エディターは、2 つのタイミングでリンクを検証します:

* **フィールドを離れたとき** — URL の形式が明らかに間違っている場合(たとえば、YouTube Shorts のリンクや Vimeo のショーケース URL)、インラインエラーで代わりに使用すべきものが説明されます。
* **保存時** — エディターが動画プロバイダーに確認し、動画が埋め込み可能かどうかをチェックします。動画が非公開、削除済み、または埋め込みがオフになっている場合、保存はブロックされ、理由がリンクフィールドに表示されます。リンクを修正して再度保存すると続行できます。

プロバイダーのチェックが利用できない場合(たとえば、ネットワークの問題)、保存はブロックされずに続行されます。

<div id="shopify-files-permission">
  #### Shopify Files の権限
</div>

動画のアップロードには `write_files` 権限が必要です。この権限が付与されていない場合、アップロードエリアに **Update** ボタン付きのバナーが表示されます。クリックして権限を付与すると、アップロードが有効になります。

<div id="upload-processing">
  #### アップロードの処理
</div>

ファイルをドロップまたは選択すると、アップローダーはファイル転送中に **Uploading…**、Shopify がトランスコード中に **Processing…** と表示します。処理が完了するとプレビューが表示されます。動画の処理中も、他のウィジェット設定の編集を続けられます。

唯一のソースが処理中の動画であるウィジェットは保存できません。トランスコードが完了するか、その間に使用するソースとして動画リンクを追加するまで、保存はブロックされます。保存前に変更を破棄したりエディターを閉じたりすると、処理中のアップロードは Shopify Files から削除されます。

動画リンクは、ウィジェットの保存時に検証されます。

<div id="thumbnail-and-watch-video-cta">
  ### サムネイルと動画視聴 CTA
</div>

顧客が動画を開く前にオファー内で目にする画像をアップロードします。再生アクションに注目を集めるため、動画視聴 CTA がサムネイルの上に自動的に配置されます。CTA のラベルテキストは、ブランドに合わせてスタイル設定できます。サムネイルは動画から自動生成されません。アップロードが必要です。

別途、**モバイル専用サムネイル**をアップロードすることもできます。設定すると、モバイルデバイスではモバイル用サムネイルが表示され、デスクトップではデフォルトのサムネイルが使用されるため、画面サイズごとに画像を最適化できます。

<div id="fallback-image">
  ### フォールバック画像
</div>

**Fallback image** 設定では、顧客のブラウザーがプレーヤーを開けないためにビデオウィジェットが非表示になる場合に表示する画像をアップロードできます。[ブラウザーの互換性](#browser-compatibility)を参照してください。フォールバック画像は、リンクや再生オーバーレイなしで表示される、静的な画像のみです。

フォールバック画像がアップロードされていない場合、ウィジェットの代わりに何も表示されません。

<div id="autoplay">
  ### 自動再生
</div>

**Autoplay** トグルは、ホスト型プレーヤーが開いたときに動画を自動的に再生するかどうかを制御します。

自動再生が有効な場合、動画は**ミュート**で開始されます。最近のブラウザーのほとんどは、顧客がページを操作するまで音声付き動画の自動再生をブロックするため、自動再生を確実に機能させるにはミュートでの再生が必要です。顧客は、再生開始後にプレーヤーのコントロールでミュートを解除できます。

最初のフレームから音声を再生したい場合は、自動再生をオフのままにして、顧客が手動で動画の再生をクリックするのに任せてください。

<div id="closing-the-video">
  ### 動画を閉じる
</div>

顧客がホスト型プレーヤーを閉じてアップセルオファーに戻る方法は 3 つあります:

* **Back to offer ボタン** — プレーヤーの下にあるボタンで、タブを閉じてアップセルに戻ります。
* **任意の場所をダブルクリック** — 背景の任意の場所をダブルクリックするとプレーヤーが閉じます。
* **終了時の自動クローズ** — 動画の再生が終了すると、プレーヤーは自動的に閉じます。

動画は新しいタブで開くため、プレーヤーを閉じるとそのタブが閉じられます。アップセルは元のタブに残ります。

<div id="language-and-translations">
  ### 言語と翻訳
</div>

ビデオプレーヤーページの文言(オファーに戻るボタンのラベル、デスクトップとモバイルのヒント、動画が利用できない場合に表示されるタイトルとメッセージ)は、オファーの **Language** 設定に従い、**Settings > Translations** でカスタマイズできます。

***

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

**Testimonials** ウィジェットは、ポストパーチェスオファーに実際の商品レビューを表示し、信頼を築き、顧客がアップセルを承諾する判断を後押しします。

レビューは、接続されたレビューアプリから取得されます。ウィジェットは、オファーエディターのピッカーに星アイコン付きの **「Testimonials」** として表示されます。

このウィジェットを使用するには、**Settings > Product Reviews** でレビューアプリを接続する必要があります。サポートされているアプリには、Judge.me、Klaviyo、Okendo、Yotpo が含まれます。設定手順は[レビューアプリ連携](/ja/aftersell/checkout_widget_types#review-app-integrations)を参照してください。

<div id="selection-modes">
  ### 選択モード
</div>

Testimonials ウィジェットは 2 つのモードをサポートしています:

* **Manual** — 表示するレビューを厳選して選択します。レビューは保存した順に表示されます。
* **Dynamic** — アップセルオファー内の商品に基づいて、レビューアプリの同期済みキャッシュからレビューが自動的に取得されます。レビューは、顧客の元の注文ではなく、オファーの商品に紐づけられます。

<div id="configuration-options">
  ### 設定オプション
</div>

* **Review app** — レビューを取得する接続済みのレビューアプリを選択します。
* **Mode** — Manual または Dynamic を選択します。
* **Minimum rating** — 表示するレビューの最低星評価を設定します(たとえば、星 4 つ以上)。
* **Display toggles** — 個々のレビュー要素の表示/非表示を切り替えます:
  * 星評価
  * レビュータイトル
  * レビュアー名
  * レビュー日
  * 認証済み購入者バッジ
* **Truncate review text** — レビューテキストの最大文字数を設定します。この制限を超えるレビューは省略記号で切り詰められます。
* **Max reviews to show** — 表示するレビューの数を 1 から 3 の間で設定します。
* **Layout** — レビューを **Horizontal**(横並び)または **Vertical**(縦積み)に配置します。
* **Padding** — ウィジェット周囲の間隔を調整します。

<div id="dynamic-mode-and-review-syncing">
  ### Dynamic モードとレビューの同期
</div>

Dynamic モードでは、Aftersell がレビューアプリからレビューをインポートして保存し、オファーに表示できるようにします。最初のインポートは、レビューアプリの接続から 24 時間以内に自動的に行われ、その後は週に 1 回実行されます。

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

<div id="verified-buyer-badge">
  ### 認証済み購入者バッジ
</div>

認証済み購入者バッジが有効な場合、該当するレビューに **「Verified buyer」** ラベルが表示されます。このラベルは、オファーに設定された言語に自動的に翻訳され、32 の言語をサポートしています。

***

<div id="adding-additional-widgets">
  ## 追加ウィジェットの追加
</div>

ウィジェットは **Upsell Product ウィジェットの上または下**に追加でき、商品の前後の情報の流れを制御できます。

追加できるウィジェットには以下が含まれます:

* **Image** - オファーを視覚的に補強する補助画像を表示します。
* **Text** - 重要なメッセージを伝える補足テキストを追加します。
* **Text & Image** - テキストとビジュアルを組み合わせて、価値を強調したりオファーを説明したりします。
* **Extra Buy Button** - オファーの承諾を促す追加のコールトゥアクションを追加します。複数の商品を表示するオファーでは利用できません。
* **Trust Badge** - 保証、セキュリティ、信頼性の指標などのトラストシグナルを表示します。
* **FAQs** - よくある顧客の質問に答え、抵抗感を減らして信頼を高めます。
* **Video** - 商品のデモやブランドストーリーを伝える動画を埋め込みます。[Video](#video) を参照してください。
* **Testimonials** - 接続されたレビューアプリから実際の商品レビューを表示します。V2 オファーで利用できます。[Testimonials](#testimonials) を参照してください。

ウィジェットを追加するには:

1. ウィジェットを Upsell Product ウィジェットの**上と下のどちら**に表示するかを選択します
2. 選択したセクションで **Add widget** をクリックします
3. 含めたいウィジェットを選択して設定します

***

ポストパーチェスオファーとは何か、その仕組み、そして Aftersell での使い始め方について詳しくは、[こちらの記事](/ja/aftersell/post_purchase_overview)をご覧ください。

***

ウィジェットの動作と外観は、エディターで利用可能な設定オプションの範囲に限られます。\
Shopify の制限により、それ以上のカスタマイズはサポートされていません。

***

<div id="need-help">
  ## サポートが必要ですか?
</div>

ポストパーチェスオファーの設定についてご質問やサポートが必要な場合は、サポートチームがお手伝いします。アプリ内チャットまたはメールでいつでもお問い合わせください。
