ネットショップをAIで作る
販売する商品とショップの見せ方を説明すると、Supacodeが商品ページ、カテゴリ、カートを本物のコードで作り、ライブプレビューで確認できます。実際に決済を受け付けるには、ご自身の決済サービスのアカウントをコードに接続する必要があります。
このプロンプトが入力された状態で作成画面が開きます。作成前に自由に編集でき、実行前に必要なクレジットが表示されます。
作成の流れ
ショップについて説明する
商品の種類、価格、ショップのテイストを伝えます。商品写真があれば添付してください。
必要な機能を足す
絞り込み、サイズ選択、お気に入り、配送情報などを頼めます。Supabaseを接続すれば、商品や注文をご自身のデータベースで管理できます。
公開する
ショップ画面を公開すると公開リンクができます。サーバーが必要なアプリは、ご自身のVercelアカウントにデプロイできます。
依頼できること
- 商品一覧と商品ページ
- カテゴリと絞り込み
- カート
- 決済サービスにつなげられる購入手続きページ
- レスポンシブなレイアウト
プロンプト例:益子焼の器を販売するネットショップ:おすすめ商品を並べたトップページ、写真と価格のある商品ページ、カテゴリ、カート、購入手続きページを作ってください。
ギャラリーの作品例
すべて見るよくある質問
決済を受け付けられますか?
Stripeなどの決済サービス向けに購入手続きのコードを書けますが、そのサービスのご自身のアカウントとキー、そして動かすためのサーバーが必要です。
商品データはどこに保存されますか?
商品が少なければコードの中に置けます。多い場合は「バックエンド」タブでご自身のSupabaseデータベースを接続してください。
作品例から始められますか?
はい。ギャラリーでショップのプロジェクトやテンプレートを開き、リミックスして自分用のコピーにできます。