# あらゆるウェブサイトに Shoprocket を埋め込む
> 今あるウェブサイトで販売できます。埋め込みで埋め込みを作成し、コードを取得をクリックして、WordPress、Squarespace、Wix、Webflow、通常の HTML のページに貼り付けます。あとから保存した変更は、貼り直さなくてもすべてのページに反映されます。
ヘルプセンター / 埋め込み - 2026年10月28日 更新
埋め込みを使うと、ショップの一部を、どんなウェブサイトにも表示できます。購入ボタン付きの 1 つの商品、商品カタログ全体、カテゴリ、検索ボックスなどです。**埋め込み** で作成し、**コードを取得** をクリックして、コードをページに貼り付けます。カートとチェックアウトはそのページ上で開くので、お客様はサイトを離れません。
コードを貼り付けるのは 1 回だけです。あとから埋め込みを変更したときは、別のレイアウトに切り替えた場合でも、保存した時点で、その埋め込みがあるすべてのページが更新されます。
## はじめる前に
- 有効な商品を 1 つ以上追加します。1 つの商品の埋め込みには、販売する商品が必要です。
- ウェブサイトを編集して、ページにコードまたは HTML のブロックを追加できる必要があります。サイトビルダーごとの手順は、このあとに載せています。
## ステップ 1（任意、おすすめ）: サイトのすべてのページに Shoprocket を追加する
**埋め込み** の上部に、**サイトのすべてのページに Shoprocket を追加** というカードがあります。サイトのヘッダーに入れるコードが 1 行だけ書かれています。これを入れておくと、フローティングカートとライブチャットが、埋め込みのあるページだけでなくサイトのすべてのページで動作し、あとから追加する埋め込みも、そのまま動きます。
1. ダッシュボードで **埋め込み** を開きます。
2. **サイトのすべてのページに Shoprocket を追加** カードで、**コピー** をクリックします。
3. コードの下のタブ（**HTML**、**WordPress**、**Squarespace**、**Wix**、**Webflow**）からサイトビルダーを選び、2 つの手順に従って、その 1 行をサイトのヘッダーに貼り付けます。
4. サイトの任意のページを開きます。カードの状態が **未検出** から **接続済み** に変わります。
このステップは省略してもかまいません。どの埋め込みのコードにも同じ 1 行が含まれているので、埋め込みは単体でも、どのページでも動作します。
## ステップ 2: 埋め込みを作成する
1. **埋め込み** で、**新しい埋め込み** をクリックします。
2. **表示内容** で、**1 つの商品**、**商品カタログ**、**カテゴリ**、**検索** のいずれかを選びます。
3. レイアウトを選びます。
- **1 つの商品**: **ボタン**、**コンパクト**、**カード**、**フィーチャー**、**詳細表示**。続いて **どの商品？** で商品を選びます。
- **商品カタログ**: **グリッド**、**カルーセル**、**リスト**。**どの商品？** では、**すべての商品**、**カテゴリー**、**厳選** のいずれかを選びます。
- **カテゴリ**: **タイル**。
- **検索**: **検索ボックス** または **検索アイコン**。
4. **続ける** をクリックします。
どのレイアウトも、設定が違うだけの同じ埋め込みです。あとからエディタでレイアウトを切り替えても、貼り付けたコードはそのままで構いません。
## ステップ 3: カスタマイズする
エディタには、購入者として操作できるライブプレビューが表示されます。カートへの追加、商品を開く、チェックアウトまで試せます。埋め込みの表示内容は **この埋め込み** タブで変更します。**ストアデザイン** タブでは、ストア全体の色とフォントを設定するので、すべての埋め込みとフローティングカートが統一されます。
埋め込みには、最初に「Products · Grid」のような名前が付きます。名前はいつでも変更できます。
内容に問題がなければ、**保存してコードを取得** をクリックします。
## ステップ 4: コードをコピーしてサイトに貼り付ける
保存すると、**コードを取得** パネルが開きます。次のような内容です。
```html
```
コードは、必ずボタンでご自身のものをコピーしてください。手で入力し直さないでください。1 行目は埋め込みの名前、script はストア用に Shoprocket を読み込む行、最後の行が埋め込みの表示される場所です。
1. **コードをコピー** をクリックします。
2. パネルのタブからサイトビルダーを選び、埋め込みを表示したい場所にコードを貼り付けます。
- **HTML**: 埋め込みを表示したい場所にコードを貼り付けます。script の行は、埋め込みがいくつあっても、ページに 1 回あれば十分です。
- **WordPress**: ブロックエディタで、埋め込みを置きたい場所に **カスタム HTML** ブロックを追加します。コードを貼り付けて、ページを更新します。WordPress.com では、スクリプトの利用にプラグインを許可するプランが必要です。
- **Squarespace**: ページを編集して、埋め込みを置きたい場所に **コード** ブロックを追加します。コードを貼り付け、表示を HTML のままにして、保存します。
- **Wix**: エディタで **追加**、**埋め込みコード**、**HTML を埋め込む** の順に選びます。ボックスにコードを貼り付け、収まるようにサイズを調整します。Wix ではフレーム内に表示されるため、カートが入る余白を確保してください。
- **Webflow**: 埋め込みを置きたい場所に **Code Embed** 要素をドラッグします。コードを貼り付けて保存し、サイトを公開します。
ステップ 1 でサイトのヘッダーにすでに Shoprocket を追加している場合、ページに必要なのはコードの最後の行（`