Skip to content
Search Articles/

2 min read • Updated 5 minutes ago

Build an online store with Lovable AI prompts, Supabase, and Foxy

Use ready-to-go AI prompts to auto generate your products collection, product detail pages, and add to cart forms.

Overview

In this article, we provide a detailed AI prompt that will build an online store (managed with Supabase and connected to Foxy) in minutes. Feel free to modify the prompt to better suit your needs. The prompt will generate the following:

  • Product collection (via Supabase)

  • Demo product data

  • Product detail page

  • General product elements (ie: image, title, price, etc.)

  • Add to cart form (connected to your Foxy store)

  • View cart button

Input Prompt

  1. 1

    In Lovable, copy/paste the prompt from below into the AI prompt field:

    You are building a small e‑commerce starter wired to Foxy. Create the following:

1) A Site setting named FOXY_STORE and ask me for its value (my Foxy subdomain, e.g., mystore).

2) In the end of global <body>, inject the Foxy loader script:
<script src="https://cdn.foxycart.com/{{FOXY_STORE}}/loader.js" async defer></script>

3) If supabase is integrated create a collection named Products with fields:
- title (string, required)
- slug (string, unique, derived from title)
- price (number, required; two decimals)
- image (image/url, required; store absolute URL)
- description (rich text)
- code (string, optional SKU)
- category (string, optional)

Else just create a hardcoded list of products in an array with product objects

4) Create a Products List page at /products:
- Grid of product cards (image, title, price)
- Each card links to its Product Detail route /products/[slug]

5) Create a Product Detail page at /products/[slug] that:
- Shows image, title, price, description
- Renders a quantity input (default 1)
- Includes an Add to Cart HTML form that POSTs to https://{{FOXY_STORE}}.foxycart.com/cart with fields:
- hidden name ← product.title
- hidden price ← product.price
- hidden image ← product.image (absolute URL)
- optional hidden code ← product.code if set
- optional hidden category ← product.category if set
- visible quantity number input (min 1, default 1)
- The form must use method="POST" and target="_top".
- Submit button label: Add to cart

Example form (adapt to your templating syntax):
<form action="https://{{FOXY_STORE}}.foxycart.com/cart" method="POST" target="_top" class="fc-add-to-cart">
<input type="hidden" name="name" value="{{ product.title }}">
<input type="hidden" name="price" value="{{ product.price }}">
<input type="hidden" name="image" value="{{ product.image }}">
{{#if product.code}}<input type="hidden" name="code" value="{{ product.code }}">{{/if}}
{{#if product.category}}<input type="hidden" name="category" value="{{ product.category }}">{{/if}}
<label>
Quantity
<input type="number" name="quantity" value="1" min="1" step="1" required>
</label>
<button type="submit">Add to cart</button>
</form>

6) Add a View Cart button in the site header that links to:
https://{{FOXY_STORE}}.foxycart.com/cart?cart=view

7) Seed the Products collection with 3 demo items with realistic absolute image URLs. Use prices: 9.99, 19.99, 29.99.

Acceptance checks:
- Visiting /products shows the seeded items.
- Visiting a product page shows the Add to Cart form.
- Submitting the form loads the Foxy cart at https://{{FOXY_STORE}}.foxycart.com/cart and shows the correct name, price, quantity, and image.

  2. 2

    Press enter (or click submit button) to execute prompt.

  3. 3

    When prompted, input your Foxy store subdomain (ie: mystore).

Test

Once Lovable AI has generated your data, pages, and elements, publish your site and go to one of your product pages. Click add to cart to ensure the Foxy sidecart slides in and product data is added to cart.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.