
ユースケース
- 実物商品の販売: 洋服、ガジェット、アクセサリー、生活雑貨などを販売
- デジタル商品の販売: 電子書籍、オンライン講座、音楽、ソフトウェアのダウンロードなどを提供
- ニッチブランド: 限定版グッズ、地域特産品、ドロップシッピング、サイドプロジェクト向けのストアをすばやく立ち上げ
- スモールビジネス: ベーカリー、コーヒーショップ、ハンドメイド系ビジネスを紹介し、オンライン注文を受け付け
- 新商品のテスト: 少数の商品を追加し、本格的な量産前に売れ行きを検証
- ビジネス拡大: プロンプトを使って、新しいコレクションや季節キャンペーン、バンドル商品を手軽に追加
はじめに
- 新規 Shopify ストア専用
Lovable + Shopify の連携は、新規の Shopify ストアのみを構築して立ち上げるために設計されています。既存ストアをこの連携経由で接続したり管理したりすることはできません。 - サンドボックスストア - Shopify の費用なし
Lovable は自動的にサンドボックスストアを作成するため、Shopify の費用を一切かけずに安全に構築・検証できます。この環境は設定やテストに最適ですが、実際の決済は処理されません。 - ストアの引き継ぎ(claim)
ストアを公開する準備ができたら、**ストアを引き継ぎ(claim)**する必要があります。これによりストアがあなたの Shopify アカウントに移行され、30 日間の無料 Shopify トライアルが開始します。Shopify 側で決済を有効化し、ストア設定を完了することで、実際の顧客からの支払いを受け付けられるようになります。 - Shopify のサブスクリプションが必要
無料トライアル期間終了後もオンラインで商品の販売を続けるには、有料の Shopify プランが必要です。このサブスクリプションは Shopify で直接管理され、Lovable の料金とは別契約になります。 - Shopify レビューポリシーへの準拠
ストアを公開する前に、すべてのレビューが本物で、偏りがなく、かつShopify のレビューポリシー に準拠していることを必ず確認してください。
Shopify 連携を有効化する
ユーザー設定
- Allow: 現在のプロジェクトで連携を有効にします。
- Decline: 今回のリクエストでは連携を行いません(後で再度確認される場合があります)。
- Adjust preferences: 今後のプロジェクトのデフォルト動作を変更します(現在のプロジェクトには影響しません)。
Shopify 連携フロー
- 新しいプロジェクトを作成する
- 既存のプロジェクトをリミックスする(Lovable + Shopify テンプレート を参照)
1. ストアを作成する
ハンドメイドのアロマキャンドルを販売するための、Shopify を使った EC ストアを作成してください。既存のプロジェクトをリミックスする場合は、Lovable に Shopify を統合し、モックデータを削除するようにプロンプトを入力します。内容が十分に具体的で包括的なプロンプトを使うことが重要です。例えば、次のようにします。
このストア内の商品の情報を自分の商品の情報に置き換え、Shopify ストアを作成したいです。次の作業を進めてください。Lovable から Shopify 接続を有効化するよう求められるので、Allow をクリックするだけです。これでサンドボックスストアの準備が整いました。
- Shopify に接続する。
- ストアからすべてのモック商品のデータを削除し、商品画像付きの新しい商品を X 個作成する。
- 商品カードと商品詳細ページを更新し、新しい商品情報を使用するようにする。
- 商品詳細ページの URL を、新しい商品に合わせたものに更新する。
- 「お気に入りに追加」コンポーネントとロジックを、この変更に合わせて更新する。
- カート、「今すぐ購入」CTA、その他すべてのページにある関連するチェックアウトアクションを更新し、Shopify ストア連携を反映させる。
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. ストアを管理する
- 商品名、説明文、価格を更新する
- 商品を削除する
- すべての商品を表示する
- 商品の絞り込み機能を追加し、さまざまなカテゴリに基づくコレクションを作成する
- 商品レビュー機能を追加し、実際に購入したユーザーからのレビューのみを許可する
- 割引率(%)または固定金額(USD)の割引コードを追加し、有効期間も設定する
- ウィッシュリスト機能と、ウィッシュリストを共有する機能を追加する
Lavender Breeze Candle の価格を $28 に更新してください。
Vanilla Bean Candle の説明文を、木製の芯を強調する内容に変更してください。
商品 Cinnamon Spice Candle を削除してください。
すべての商品を表示してください。
商品レビューシステムを作成し、実際に購入したユーザーからのレビューのみを許可してください。
商品 Lavender Breeze Candle 用に 15% 割引コードを作成してください。コードは LAVANDER15 とし、2025 年 11 月末まで有効にしてください。
私が商品をウィッシュリストに追加し、そのウィッシュリストを共有できるようにしてください。
4. ストアを取得する
- 「Claim the store」と入力します。Lovable がストアの取得を促すプロンプトを表示するので、Claim を押します。すると Shopify が新しいタブで開き、ログインして取得プロセスを完了できます。ストアを取得するためのメール招待が届く場合もあります。
- Shopify からの Claim store リンクをクリックして承認します。これにより Lovable のプロジェクトに戻ります。
- Shopify Admin にアクセスしてストアのセットアップを完了し、決済を有効化して販売を開始できるようにします。詳しくは Shopify payments を参照してください。
5. ストアを公開する
- 商品の作成、更新、削除
- 価格や商品説明の管理
- 新しいコレクション、プロモーション、バンドルの作成・公開
FAQ
リミックスしたプロジェクトに商品を追加しましたが、商品ページへのリンク先が正しく表示されません。どう直せばいいですか?
リミックスしたプロジェクトに商品を追加しましたが、商品ページへのリンク先が正しく表示されません。どう直せばいいですか?
心配ありません。エージェントはまだあなたの新しいストアについて学習しているところなので、これを恒久的に修正するには一度だけプロンプトを送れば大丈夫です。エージェントに次のようにプロンプトしてください:
ストア内のすべての新規および今後追加される商品について、それぞれの商品詳細ページが正しく表示されるように、商品URLのロジックを更新してください。これで今後同じ問題が発生することはなくなるはずです。その他の問題については、「Try to Fix」ボタンをクリックすると、エージェントが問題の解決に取り組みます。
リミックスしたプロジェクトにモック商品がまだ表示されています。どうやって削除できますか?
リミックスしたプロジェクトにモック商品がまだ表示されています。どうやって削除できますか?
これらの商品が表示されているページを、エージェントにプロンプトして更新させてください。例えば:
私がShopifyストアに追加した商品を除き、すべてのページから既存の商品を削除して、ストアを空にしてください。