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

# プログレスバーと商品バッジ

> この記事では、プログレスバーと商品バッジの機能の仕組みを説明します。

これらの機能は、**1-click アップセルエディター**の左サイドバーにある **Funnel-wide widgets** グループ(プログレスバーと Badge ウィジェットが含まれます)にあります:

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-upsell-editor-sidebar-funnel.gif?s=d42039add0fe9339dc962050863a57de" alt="Funnel-wide widgets のプログレスバーと新しい Badge ウィジェットをハイライトしたアップセルエディターのサイドバー" width="628" height="1080" data-path="images/aftersell/progress-bars-badges-upsell-editor-sidebar-funnel.gif" />

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

**Funnel-Level** ウィジェットを使うと、1 つのアップセルにプログレスバーを追加するだけで、同じファネル内のすべてのアップセルに自動的に適用されます。これにより、オファー全体で一貫した体験を実現しながら、マーチャントの手動設定の手間を減らせます。

* このウィジェットは常に利用可能ですが、既存のオファーとファネルでは非表示に設定されています。
* 新しく作成されたファネルでは、デフォルトで有効になっています。
* カスタムデザインなどを希望する場合、マーチャントは **Image** ウィジェットを使ってカスタムのプログレスバーをアップロードすることもできます。

  * 現在、これらのウィジェットは翻訳できないため、必要な翻訳を反映したカスタム画像をアップロードする必要があります。翻訳機能とその他のオプションは近日提供予定です!

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

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-edit-bar-widget-panel.gif?s=7a5dc519652c75d2f4e777638fc69f5c" alt="オファープレビューの横にスタイル、外観、パディングのコントロールを表示した Edit Progress Bar Widget パネル" width="3016" height="1080" data-path="images/aftersell/progress-bars-badges-edit-bar-widget-panel.gif" />

<div id="style">
  ### スタイル
</div>

Minimal

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-minimal-style-milestones.gif?s=19441a6c6391cfd9a2a191e6507c1303" alt="ラベルなしでカート、ドル、ギフト、チェックマークのアイコンを表示する Minimal スタイルのプログレスバー" width="3840" height="632" data-path="images/aftersell/progress-bars-badges-minimal-style-milestones.gif" />

Minimal with labels

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-minimal-with-labels.gif?s=ee539f91e8f8bad682ec8f152e2bfc6e" alt="Cart、Order placed、Done のマイルストーンを表示する Minimal with labels のプログレスバー" width="3840" height="632" data-path="images/aftersell/progress-bars-badges-minimal-with-labels.gif" />

Maximal

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-maximal-style-milestones.gif?s=c480f2cb09be0ca53092012ef4e46357" alt="カート、ドル、ギフト、チェックマークのマイルストーンアイコンを表示する Maximal スタイルのプログレスバー" width="3840" height="632" data-path="images/aftersell/progress-bars-badges-maximal-style-milestones.gif" />

<div id="appearance">
  ### 外観
</div>

Black

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-black-appearance-preview.gif?s=a0e842d84eac6215cfb7846a08123309" alt="アップセルオファーのプレビュー上部に表示された Black 外観のプログレスバー" width="3840" height="788" data-path="images/aftersell/progress-bars-badges-black-appearance-preview.gif" />

White

<img src="https://mintcdn.com/aftersell/SnVX3h-PpMMxQMDU/images/aftersell/progress-bars-badges-white-appearance-preview.gif?s=d46a16dc9b27572e3542674cd4ed8983" alt="アップセルオファーのプレビュー上部に表示された White 外観のプログレスバー" width="3840" height="788" data-path="images/aftersell/progress-bars-badges-white-appearance-preview.gif" />

***

<div id="product-badges">
  ## 商品バッジ
</div>

**商品バッジ**を使うと、マーチャントはオファー上で商品の重要な情報を直接ハイライトできます。これらのバッジは、重要な機能やオファーに注目を集めるのに役立ち、視認性と購入者の信頼感を高めます。

* 各商品のオプションとして利用できます。
* マーチャントは独自のカスタムバッジをアップロードできます。
* 現在、色、テキスト、アイコンは編集できませんが、カスタマイズ可能なテンプレートが近日提供予定です。

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

<div id="badge-labels-options">
  ## バッジラベルのオプション:
</div>

* **Bestseller** - 売上が最も高い商品やパフォーマンスの高い商品をハイライトし、信頼とソーシャルプルーフを高めるのに最適です。
* **Trending** - 現在注目を集めている、あるいはエンゲージメントの高い商品を紹介するのに適しています。
* **New** - 新しく発売された商品やオファーに注目を集めるのに最適です。
* **Lowest Price** - 割引商品やお買い得商品のプロモーションに便利で、素早いコンバージョンを促します。
* **Ships Free** - 送料無料のオファーを強調するのに最適で、購入のためらいを軽減します。

<div id="appearance-options">
  ## 外観のオプション
</div>

バッジには、さまざまなファネルデザインやブランドの美観に合わせられる 4 つの外観スタイルがあります:

* **Vibrant** - 明るく目を引くスタイルで、重要なオファーに即座に注目を集めるのに最適です。
* **Vibrant Inverse** - Vibrant の色を反転させたバリエーションで、より大胆なコントラストを実現します。
* **Classic Dark** - クリーンでプロフェッショナルなスタイルで、明るい背景に最適です。
* **Classic Light** - 控えめでミニマルなスタイルで、暗い背景やソフトな印象向けにデザインされています。

<div id="position-in-offer">
  ## オファー内の配置位置
</div>

バッジは、デザインに合わせて、最も効果的な場所に注目を集められるよう、オファーレイアウト内のさまざまな位置に配置できます:

* **Above Product Title** - 購入者が商品の詳細を読む前に、すぐに目に入る配置です。
* **Adjacent to Product Price** - 価格の近くで緊急性や価値を強調するのに最適です。
* **Below Product Price** - 気を散らさずに購入の判断を後押しする、控えめなメッセージングに最適です。

***

<div id="why-it-matters">
  ## 重要な理由
</div>

プログレスバーは、Smart Funnels を使用しているマーチャントを含む多くのマーチャントにおいて、訪問者あたりの収益(RPV)とコンバージョン率の両方の改善に一貫して良い結果を示しています。

同様に、**商品バッジ**も信頼性と購入者の認知を高める効果が実証されており、ファネル全体のパフォーマンスに測定可能な改善をもたらしています。