> ## Documentation Index
> Fetch the complete documentation index at: https://lovable.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Shopify で EC ストアを構築する
> Lovable と Shopify を使って、ゼロから簡単に新しいオンラインストアを構築して公開しましょう
物理商品からデジタルコンテンツまで、Lovable を使えば自然な言葉で新しいストアを構築・カスタマイズ・改善でき、公開時には Shopify が決済・在庫・物流を担当します。
## ユースケース
Lovable と Shopify を組み合わせることで、次のような本格的なオンラインストアを構築・公開できます。
* **実物商品の販売**: 洋服、ガジェット、アクセサリー、生活雑貨などを販売
* **デジタル商品の販売**: 電子書籍、オンライン講座、音楽、ソフトウェアのダウンロードなどを提供
* **ニッチブランド**: 限定版グッズ、地域特産品、ドロップシッピング、サイドプロジェクト向けのストアをすばやく立ち上げ
* **スモールビジネス**: ベーカリー、コーヒーショップ、ハンドメイド系ビジネスを紹介し、オンライン注文を受け付け
* **新商品のテスト**: 少数の商品を追加し、本格的な量産前に売れ行きを検証
* **ビジネス拡大**: プロンプトを使って、新しいコレクションや季節キャンペーン、バンドル商品を手軽に追加
## はじめに
**Lovable + Shopify** でネットショップを作り始める前に、いくつか重要なポイントを確認しておきましょう。
* **新規 Shopify ストア専用**\
Lovable + Shopify の連携は、**新規の Shopify ストアのみ**を構築して立ち上げるために設計されています。既存ストアをこの連携経由で接続したり管理したりすることはできません。
* **サンドボックスストア - Shopify の費用なし**\
Lovable は自動的にサンドボックスストアを作成するため、Shopify の費用を一切かけずに安全に構築・検証できます。この環境は設定やテストに最適ですが、**実際の決済は処理されません**。
* **ストアの引き継ぎ（claim）**\
ストアを公開する準備ができたら、\*\*ストアを引き継ぎ（claim）\*\*する必要があります。これによりストアがあなたの Shopify アカウントに移行され、**30 日間の無料 Shopify トライアル**が開始します。Shopify 側で決済を有効化し、ストア設定を完了することで、実際の顧客からの支払いを受け付けられるようになります。
* **Shopify のサブスクリプションが必要**\
無料トライアル期間終了後もオンラインで商品の販売を続けるには、**有料の Shopify プラン**が必要です。このサブスクリプションは **Shopify で直接管理**され、**Lovable の料金とは別契約**になります。
* **Shopify レビューポリシーへの準拠**\
ストアを公開する前に、すべてのレビューが**本物で、偏りがなく、かつ**[**Shopify のレビューポリシー**](https://help.shopify.com/en/partners/help-support/faq/reviews) **に準拠している**ことを必ず確認してください。
## Shopify 連携を有効化する
デフォルトで、Shopify 連携はワークスペースで有効になっています。ユーザー設定の **Settings → Integrations → Shopify → User preferences** から、各プロジェクトの Shopify 連携の挙動や関連する Shopify 設定を管理できます。
### ユーザー設定
Shopify 連携のデフォルト設定は **毎回確認する** で、各プロジェクトごとに Shopify 連携を有効にするかどうかを自分で選択できます。この設定は、いつでも **Settings → Integrations → Shopify → User preferences** から変更できます。
Shopify 連携が必要になったタイミングで、Lovable から確認が表示されます。選択肢は次の 3 つです:
* **Allow**: 現在のプロジェクトで連携を有効にします。
* **Decline**: 今回のリクエストでは連携を行いません（後で再度確認される場合があります）。
* **Adjust preferences**: 今後のプロジェクトのデフォルト動作を変更します（現在のプロジェクトには影響しません）。
## Shopify 連携フロー
次のいずれかの方法で開始できます:
* 新しいプロジェクトを作成する
* 既存のプロジェクトをリミックスする（[Lovable + Shopify テンプレート](https://lovable.dev/shopify) を参照）
### 1. ストアを作成する
**新しいプロジェクトをゼロから作成する場合**は、Lovable に作成したいストアの種類を伝え、**Shopify を指定**します。
> ハンドメイドのアロマキャンドルを販売するための、**Shopify を使った** EC ストアを作成してください。
**既存のプロジェクトをリミックスする場合**は、Lovable に Shopify を統合し、モックデータを削除するようにプロンプトを入力します。内容が十分に具体的で包括的なプロンプトを使うことが重要です。例えば、次のようにします。
> このストア内の商品の情報を自分の商品の情報に置き換え、Shopify ストアを作成したいです。次の作業を進めてください。
>
> 1. Shopify に接続する。
> 2. ストアからすべてのモック商品のデータを削除し、商品画像付きの新しい商品を X 個作成する。
> 3. 商品カードと商品詳細ページを更新し、新しい商品情報を使用するようにする。
> 4. 商品詳細ページの URL を、新しい商品に合わせたものに更新する。
> 5. 「お気に入りに追加」コンポーネントとロジックを、この変更に合わせて更新する。
> 6. カート、「今すぐ購入」CTA、その他すべてのページにある関連するチェックアウトアクションを更新し、Shopify ストア連携を反映させる。
Lovable から **Shopify 接続を有効化**するよう求められるので、**Allow** をクリックするだけです。これでサンドボックスストアの準備が整いました。
### 2. 商品と商品画像を追加する
まずは **名前、説明、価格** を指定して商品を追加します。例えば次のようにします:
> *Lavender Breeze Candle* という名前の商品を追加し、説明を「ラベンダー精油を配合した、心を落ち着かせる手作りソイキャンドル」、価格を \$25 に設定します。
詳細は後から編集できます。商品が表示されない場合は、次のようにプロンプトを入力します:
> Display the products on the website.
次に、以下のいずれかの方法で画像を追加して、商品一覧をわかりやすくしましょう。必ず商品を適切に表している画像を使用してください。
**AI 画像を生成する**
> Add an AI-generated image to the product *Lavender Breeze Candle*.
**自分で用意した画像をアップロードまたは添付する**
> Add the attached image to the product *Lavender Breeze Candle*.
**URL から画像を追加する**
> Add image from URL to the product *Lavender Breeze Candle*.
### 3. ストアを管理する
Lovable から離れることなく、商品を管理したりストアを改善したりできます。たとえば、Lovable に次のように指示できます:
* 商品名、説明文、価格を更新する
* 商品を削除する
* すべての商品を表示する
* 商品の絞り込み機能を追加し、さまざまなカテゴリに基づくコレクションを作成する
* 商品レビュー機能を追加し、実際に購入したユーザーからのレビューのみを許可する
* 割引率（%）または固定金額（USD）の割引コードを追加し、有効期間も設定する
* ウィッシュリスト機能と、ウィッシュリストを共有する機能を追加する
> *Lavender Breeze Candle* の価格を *\$28* に更新してください。\
> *Vanilla Bean Candle* の説明文を、木製の芯を強調する内容に変更してください。\
> 商品 *Cinnamon Spice Candle* を削除してください。\
> すべての商品を表示してください。\
> 商品レビューシステムを作成し、実際に購入したユーザーからのレビューのみを許可してください。\
> 商品 *Lavender Breeze Candle* 用に 15% 割引コードを作成してください。コードは LAVANDER15 とし、2025 年 11 月末まで有効にしてください。\
> 私が商品をウィッシュリストに追加し、そのウィッシュリストを共有できるようにしてください。
### 4. ストアを取得する
ストアを取得して公開する準備ができたら、ストアのロック解除と決済の設定・有効化のために、KYC（本人確認）プロセスを完了する必要があります。これには時間がかかる場合があります。
1. 「Claim the store」と入力します。Lovable がストアの取得を促すプロンプトを表示するので、**Claim** を押します。すると Shopify が新しいタブで開き、ログインして取得プロセスを完了できます。ストアを取得するためのメール招待が届く場合もあります。
2. Shopify からの **Claim store** リンクをクリックして承認します。これにより Lovable のプロジェクトに戻ります。
3. Shopify Admin にアクセスしてストアのセットアップを完了し、決済を有効化して販売を開始できるようにします。詳しくは [Shopify payments](https://help.shopify.com/en/manual/payments/shopify-payments/onboarding) を参照してください。
ストアを取得すると、Shopify があなたのショップ用に固定のドメインを割り当てますが、心配はいりません。それはあくまでバックエンド用です。**あなたの実際のストア URL は lovable.app か、あなたの独自ドメインになります。**
ストアを本番公開する準備が完全に整ってから取得してください。30 日間の無料トライアル終了後もオンラインで商品販売を続けるには、有料の Shopify サブスクリプションが必要になります。
### 5. ストアを公開する
ストアの所有権を確定し、セットアップが完了したら、Lovable のプロジェクトを公開して、あなたのストアを世界に向けて発信しましょう。
Lovable から直接、いつでも次の操作ができます：
* 商品の作成、更新、削除
* 価格や商品説明の管理
* 新しいコレクション、プロモーション、バンドルの作成・公開
## FAQ
心配ありません。エージェントはまだあなたの新しいストアについて学習しているところなので、これを恒久的に修正するには一度だけプロンプトを送れば大丈夫です。エージェントに次のようにプロンプトしてください:
> ストア内のすべての新規および今後追加される商品について、それぞれの商品詳細ページが正しく表示されるように、商品URLのロジックを更新してください。
これで今後同じ問題が発生することはなくなるはずです。その他の問題については、「Try to Fix」ボタンをクリックすると、エージェントが問題の解決に取り組みます。
これらの商品が表示されているページを、エージェントにプロンプトして更新させてください。例えば:
> 私がShopifyストアに追加した商品を除き、すべてのページから既存の商品を削除して、ストアを空にしてください。