> For the complete documentation index, see [llms.txt](https://support.charlla.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://support.charlla.io/jp/users-guide/widget/create/setup-banner.md).

# \[事前準備] 商品バナーの設定

ウィジェット（フローティング、スライド、マルチショッププレイヤー）を利用するには、あらかじめ動画に「商品バナー」の登録が必要です。\
商品バナーの連携手順は、以下のとおりです。

1. [**ライブラリ画面から事前に設定する**](#ライブラリ画面から事前に設定する)
2. [**ウィジェット作成画面で設定する**](#wijettodesuru)

***

## ライブラリ画面から事前に設定する（おすすめ）

ウィジェットを作る前に、ライブラリで動画の準備を済ませておく基本的な方法です。

{% stepper %}
{% step %}

### 動画を選択する

上部メニューの \[ライブラリ] をクリックし、動画リストの中から商品を連携したい動画をクリックします。
{% endstep %}

{% step %}

### ショッププレイヤータブを開く

画面右側にサイドバー（詳細設定画面）が表示されるので、\[ショッププレイヤー] タブを選択します。

<div align="left"><figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FqfLPM7QnmEkxcyP7ArE0%2F%E5%95%86%E5%93%81%E3%83%90%E3%83%8A%E3%83%BC%E7%99%BB%E9%8C%B2%20(4).png?alt=media&amp;token=388e82a6-72b8-45fa-b34d-776e2c7b98d1" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure></div>
{% endstep %}

{% step %}

### 商品バナーを追加する

[**▶ 商品情報がまだ登録されていない場合はこちらから**](https://support.charlla.io/jp/~/changes/430/library/widget/create-widget/floating#gamadasareteinai)

[**▶ 商品情報が登録されている場合はこちらから**](https://support.charlla.io/jp/~/changes/430/library/widget/create-widget/floating#gasareteiru)

* #### **商品情報がまだ登録されていない場合**

1. \[+新規商品を登録] をクリック
2. ポップアップ表示される画面で以下の商品情報を入力します。
   * 商品名（必須）： バナーに表示される名称
   * 商品詳細ページURL（必須）： バナークリック時の遷移先URL
   * サムネイル画像URL（推奨）： バナーに表示されるサムネイル画像URL
   * 料金（任意）： 割引価格（実際の販売価格）と販売価格（定価）を入力\
     &#x20;<sup>※ 割引がない場合は、どちらも同じ価格を入力してください。</sup>\
     &#x20;<sup>※ 料金が入力されていない場合、商品バナーには料金が表示されません。</sup>
   * 通貨単位： ¥（JPY）、₩（KRW）、$（USD）、€（EUR） の4種類から選択
   * 在庫状況： 現在の在庫状況（在庫あり / 在庫なし）
3. \[保存] ボタンをクリックして登録を完了させます。
4. 登録完了後、自動的に商品リストに表示されます。\
   **続けて以下の「商品情報が登録されている場合」の手順へ進んでください。**

<div align="left"><figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FIkGdGz4bWTgwhKO1geXC%2F%E5%95%86%E5%93%81%E3%83%90%E3%83%8A%E3%83%BC%E7%99%BB%E9%8C%B2%20(1).png?alt=media&amp;token=1545f1f5-ccf1-475c-82ec-fbe7c2474f48" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure></div>

* #### **商品情報が登録されている場合**

  ※新規登録が完了した商品も、この手順で動画に紐づけます

  1. 検索窓から商品名で検索するか、情報リストから対象の商品を見つけます。
  2. 対象の商品の横にある \[ + ]ボタンをクリックし、動画に商品バナーを紐づけます。

  <div align="left"><figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2Fh1tBFyuhdPcCyjKJLiEp%2F%E5%95%86%E5%93%81%E3%83%90%E3%83%8A%E3%83%BC%E7%99%BB%E9%8C%B2%20(2).png?alt=media&amp;token=cb2a1a93-2701-4011-b54a-36f51beb2e84" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure></div>

{% endstep %}

{% step %}

### 設定を保存する

動画に商品バナーが追加されたことを確認したら、画面右下の \[保存] ボタンをクリックしてください。

<div align="left"><figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2F1bZqtB6BEC2V3OdiwRag%2F%E5%95%86%E5%93%81%E3%83%90%E3%83%8A%E3%83%BC%E7%99%BB%E9%8C%B2%20(3).png?alt=media&amp;token=24c4c634-e1ee-4a98-9a4e-4cee40da51c8" alt=""><figcaption><p>画像クリックで拡大</p></figcaption></figure></div>
{% endstep %}
{% endstepper %}

## ウィジェット作成画面で設定する

{% stepper %}
{% step %}

### 警告が出ている動画を選択する

ウィジェットの「動画の並び替え」画面で、リスト内に 「商品バナーを連携してください」 と表示されている動画をクリックします。
{% endstep %}

{% step %}

### 商品バナーを追加して保存する

該当の動画をクリックすると、画面右側にサイドバーが開きます。\
[\[**ライブラリ画面から事前に設定する**\]の手順3〜4](#banwosuru)[\]](#banwosuru)と同様に、商品を新規登録または検索して動画へバナーを追加し、最後に \[保存] ボタンをクリックして完了させます。

<div align="left"><figure><img src="https://3627017617-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FgHfZL4HYwO19vNYjGhjS%2Fuploads%2FOopx04GxydDG4FZOGmBA%2F%E5%95%86%E5%93%81%E3%83%90%E3%83%8A%E3%83%BC%E7%99%BB%E9%8C%B2%20(5).png?alt=media&amp;token=05e64335-b0f6-4547-9f95-1834f01ccdb8" alt=""><figcaption><p>画像クリックで拡大 </p></figcaption></figure></div>

{% endstep %}
{% endstepper %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://support.charlla.io/jp/users-guide/widget/create/setup-banner.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.