> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopifyを接続する

> ShopifyをAgentに接続して、Replit内からShopifyストアのプロビジョニング、カスタムストアフロントのビルド、商品と在庫の管理ができます。

export const WistiaEmbed = ({videoId, title = "Wistia video", playerColor = "FF0000", controlsVisibleOnLoad = false}) => {
  if (!videoId) {
    return null;
  }
  const url = "https://fast.wistia.net/embed/iframe/" + videoId + "?seo=false&playerColor=" + playerColor + "&controlsVisibleOnLoad=" + controlsVisibleOnLoad;
  return <Frame>
      <iframe src={url} title={title} allow="autoplay; fullscreen" allowFullScreen></iframe>
    </Frame>;
};

<WistiaEmbed videoId="d3o9gwwtiw" title="Connect Shopify and build a storefront with Agent" />

Shopifyコネクタを使用すると、AgentがShopifyストアをプロビジョニングし、それに対してカスタムストアフロントをビルドし、商品と在庫を管理します。APIキーなしで、すべて一つの会話の中で完結します。Agentは物理的な商品を販売すると説明するたびにShopifyを推奨します。ライブに公開する時だけShopifyにアクセスするだけです。最初のプロンプトから実際の注文まで約10分です。

<Note>
  ステップバイステップのウォークスルーは [Shopifyストアフロントをビルドする](/build/ecommerce-store) を参照してください。
</Note>

## 何をビルドできるか

* 物理的な商品向けのカスタムデザインストアフロント
* ブランデッドのグッズやアパレルショップ
* カートとチェックアウト付きのDirect-to-Consumerショップ
* Shopifyストアを基盤としたカタログと在庫管理ツール
* 単一のヒーロー商品を販売する商品ランディングページ

## 例

<Frame caption="Ember & Oak：チュートリアルでビルドされた手作りソイキャンドルストア">
  <img src="https://mintcdn.com/replit/HIUZSogml1gclscE/images/build-examples/ember-and-oak-candles.png?fit=max&auto=format&n=HIUZSogml1gclscE&q=85&s=f22b2300c152ac6555dd5edb8dfbcc1f" alt="Ember & Oakのキャンドルストアフロント：温かいクリームとアンバーのデザイン、点灯したキャンドルのヒーローと「Light that feels like home」というヘッドライン" width="3452" height="1978" data-path="images/build-examples/ember-and-oak-candles.png" />
</Frame>

<Frame caption="Petals & Purl：手編みのヤーンフラワーストア">
  <img src="https://mintcdn.com/replit/HIUZSogml1gclscE/images/build-examples/petals-and-purl.png?fit=max&auto=format&n=HIUZSogml1gclscE&q=85&s=8c704f8af42e1d0c010445cdf2eaee36" alt="Petals & Purlのストアフロント：居心地の良い手編みのヤーンフラワーショップ、「Blooms that last a lifetime」というヘッドライン" width="1291" height="740" data-path="images/build-examples/petals-and-purl.png" />
</Frame>

## 仕組み

<Steps>
  <Step title="ストアについて説明する">
    Agentに何を販売したいかを伝えます。名前を挙げなくても、物理的な商品に対してShopifyを推奨します。

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/describe-your-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=b25c3bc8ff45c1bc509a10f60be294bd" alt="Replitのプロンプトボックスにキャンドルストアのプロンプトが入力されている" width="1440" height="900" data-path="images/replitai/shopify/describe-your-store.png" />
    </Frame>
  </Step>

  <Step title="Agentがストアをプロビジョニングする">
    ReplitのShopifyパートナーアカウントの下に開発ストアが作成され（約10秒）、Replit Sales Channelアプリがインストールされてストアが接続されます。APIキーなし、アプリごとに1ストア、クレームするまでパスワード保護。

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/connect-shopify-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=f10b41182863d7cb7afb5611d79bace1" alt="Replit AgentがShopifyスキルに引き渡しており、「Connect Shopify」ボタン付きの「Connect to Shopify」カードが表示されている" width="3452" height="1984" data-path="images/replitai/shopify/connect-shopify-store.png" />
    </Frame>
  </Step>

  <Step title="Agentがビルドして管理する">
    Agentはヘッドレスストアフロントをデザインし、商品、バリアント、在庫、コレクション、割引を管理します。

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/add-product.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=5f7a254e82ae13c1770632a9db916005" alt="名前と価格が表示されたキャンドル商品のストアフロント商品グリッド" width="3452" height="1978" data-path="images/replitai/shopify/add-product.png" />
    </Frame>
  </Step>

  <Step title="Shopifyでライブに公開する">
    ストアをクレームし、プランを選択し、支払いを設定して、販売の準備ができたら公開します。

    <Frame>
      <img src="https://mintcdn.com/replit/pRYYKFsTVxh8-e6X/images/replitai/shopify/claim-store.png?fit=max&auto=format&n=pRYYKFsTVxh8-e6X&q=85&s=317bdb5509beb15270c694087e3279fe" alt="「Claim store」ボタン付きのReplit「Claim your store」画面" width="3452" height="1978" data-path="images/replitai/shopify/claim-store.png" />
    </Frame>
  </Step>
</Steps>

## Agentが管理するもの

ストアフロントとカタログのすべてはチャットで編集できます。

| 領域      | Agentの機能                                                                                                                                                                                                   |
| ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| デザイン    | あなたのガイダンスからヘッドレスフロントエンドを生成します（Liquidテーマなし、テンプレートライブラリなし）。コピー、レイアウト、ナビゲーション、モーション、商品ページはチャットで編集でき、[Canvas](/references/design/canvas) バリアントで方向性を探ることができます。本物のReplitプロジェクトなので、ブログ、ウィッシュリスト、ランディングページで拡張できます。 |
| 商品      | 商品とバリアントの作成、更新、削除。フィールド：タイトル、説明、タイプ、ベンダー、タグ、SKU、価格、重量、オプション（サイズ、色）、画像、可用性。                                                                                                                                 |
| 在庫      | バリアントごとの在庫を設定・調整します。                                                                                                                                                                                       |
| コレクション  | 商品をコレクションにグループ化します。                                                                                                                                                                                        |
| 割引      | 価格ルールと引き換えコードを作成します。                                                                                                                                                                                       |
| 公開 & 同期 | 新しい商品は自動的にストアフロントに公開されます。同期は双方向で機能します：Shopify管理画面での変更がReplitプレビューに表示され、Agentの変更がShopify管理画面に表示されます。                                                                                                        |

## ReplitとShopifyの役割分担

| Replitが担当               | Shopifyが担当          |
| ----------------------- | ------------------- |
| ストアフロントのデザインとビルド        | ホスト型チェックアウト         |
| チャットによるカタログ管理（商品、在庫、割引） | 商品、在庫、カート、注文の記録システム |
| ストアフロントのホスティングとデプロイ     | 決済、本人確認（KYC）、支払い    |
| Canvasデザインバリアント         | 税金、送料、フルフィルメント      |
| アプリの拡張（ブログ、ランディングページなど） | マルチチャネル販売           |

注文、返金、支払い、フルフィルメントはAgentではなくShopify管理画面で処理されます。

## 接続のスコープ

* すべてのプランのすべてのビルダーが利用可能。Connectorsパネルの設定もクレデンシャルも不要で、会話内で接続されます。
* アプリにスコープされます：各アプリが独自のShopifyストアを持ちます。
* ストアはクレームするまでReplit所有の開発ストアです。後でクレームできるよう、メールアドレスがShopifyと共有されます。
* Shopify管理画面からいつでもReplitアプリをアンインストールできます。

## Shopifyでライブに公開する

公開はReplitではなくShopifyで行います。AgentにGo Liveフローを開始するよう依頼し、Shopify管理画面でこれらのマーチャント所有のステップを完了してください：

* **ストアをクレームする** — チャットのリンクまたはShopifyが送るメールから。リンクは7日後に期限切れになります。クレームすると無料トライアルが始まります。
* **プランを選択する**: ライブ注文を処理するには [有料プラン](https://www.shopify.com/pricing) が必要です。
* **支払いを設定する**: [Shopify Payments](https://help.shopify.com/en/manual/payments/shopify-payments) または別のプロバイダーを有効化して本人確認（KYC）を完了します。クレームアカウントがKYCを完了するとライブキャプチャが動作します。
* **[配送](https://help.shopify.com/en/manual/shipping)と[税金](https://help.shopify.com/en/manual/taxes)を設定する。**
* **[カスタムドメインを接続する](/build/add-custom-domain)**（オプション）して、ストアフロントのパスワードを解除して購入者にオープンにします。

チェックアウトは常にShopifyホスト型チェックアウトにリダイレクトされるため、購入者はShopifyで支払います。

<Note>
  決済、本人確認、税金、送料、不正チェックはShopifyが担当します。Replitはマーチャントの銀行情報、納税者ID、その他の機密情報を収集しません。
</Note>

## トラブルシューティング

<AccordionGroup>
  <Accordion title="Shopifyストアの設定に時間がかかる">
    プロビジョニングはいくつかのShopify APIを呼び出すため、少し時間がかかる場合があります。ストアフロントのビルドを依頼する前にAgentがセットアップを完了するまで待ってください。
  </Accordion>

  <Accordion title="開発中にチェックアウトがパスワードページを表示する">
    開発ストアはライブになるまでパスワード保護されているため、チェックアウトのプレビューがパスワードページに移動する場合があります。これは想定される動作ですが、カートは機能します。パスワードはローンチ時にのみShopifyで解除してください。
  </Accordion>

  <Accordion title="チェックアウトで実際の支払いが完了しない">
    ライブキャプチャにはクレームShopifyアカウントが支払い設定とKYCを完了する必要があります。それまではチェックアウトはShopifyにリダイレクトしますが、支払いをキャプチャできません。KYCを完了するか、すでに支払い設定済みのアカウントを使用してください。
  </Accordion>

  <Accordion title="このアプリではShopifyが接続されていないとAgentが言う">
    各ストアは1つのアプリにスコープされています。別のアプリでShopifyを接続した場合は、現在のアプリ用にShopifyストアを設定するようAgentに依頼してください。
  </Accordion>

  <Accordion title="商品がストアフロントに表示されない">
    商品はアクティブで公開されている場合にのみ表示されます。Agentは作成した商品を自動公開します。表示されない場合は、Agentに公開を依頼してプレビューを更新してください。
  </Accordion>

  <Accordion title="転送後に接続の再接続が必要になる">
    ストアをクレームまたは転送した後、Shopifyが接続の再認可を求める場合があります。AgentにShopifyの再接続を依頼すると、ストアを失わずにアクセスが復元されます。
  </Accordion>
</AccordionGroup>

## 関連ドキュメント

* [Shopifyストアフロントをビルドする](/build/ecommerce-store)：プロンプトから公開済みストアフロントまでのステップバイステップガイド
* [カスタムドメインを追加する](/build/add-custom-domain)：ストアフロントにブランドURLを設定します
* [Agent インテグレーション](/references/integrations/overview)：Replit管理のインテグレーションとAgentサービス
* [コネクタの管理](/replitai/managing-connectors)：コネクタの設定と管理
* [Shopifyヘルプセンター](https://help.shopify.com/)：ストアの設定、支払い、アカウント管理