Skip to main content

How to Integrate Lovable with Fourthwall

Connect a Lovable-built storefront to Fourthwall's backend using the Storefront API

Lovable is an AI-powered website builder that generates full-stack React applications from text prompts. Because Lovable produces standard React code, it can connect to any API, including Fourthwall's Storefront API. This lets you design a fully custom storefront in Lovable while Fourthwall handles your products, payments, fulfillment, and checkout.

note

Fourthwall does not have a direct Lovable plugin. The integration works through Fourthwall's Storefront API, which any custom frontend can use to fetch products, manage carts, and redirect supporters to checkout.

Prerequisites​

Before you start, make sure you have:

  • A Fourthwall store with at least one published product
  • A collection containing the products you want to display (Fourthwall creates a default "All" collection automatically)
  • A Lovable account at lovable.dev

How the integration works​

Lovable handles the frontend (your website's design and layout), while Fourthwall handles the backend (products, inventory, payments, and fulfillment). The two connect through the Storefront API:

  • Lovable generates your React website, including product pages, navigation, and styling
  • Fourthwall's Storefront API provides product data, collection listings, and cart management
  • Fourthwall's hosted checkout processes payments and manages order fulfillment

Your supporters browse products on the Lovable-built site, add items to a cart managed by the API, and complete their purchase on Fourthwall's secure checkout page.

Step 1: Get your storefront token​

The storefront token authenticates your Lovable site with the Storefront API.

  1. Go to Settings > For Developers in your Fourthwall dashboard.
  2. Copy your Storefront Token.
  3. Store this token securely. You'll add it to your Lovable project as an environment variable or configuration value.

Step 2: Find your collection handle​

Each collection in Fourthwall has a unique handle (slug) used to fetch its products through the API.

  1. Go to Collections in your Fourthwall dashboard.
  2. Click the collection you want to display.
  3. Copy the URL. The collection handle is the last part of the URL (for example, best-sellers from https://yourshop.fourthwall.com/collections/best-sellers).
tip

Use the handle all to fetch every public product in your store. This is the default collection Fourthwall creates for all shops.

Step 3: Build your Lovable storefront​

When prompting Lovable to generate your site, include instructions to fetch product data from Fourthwall's Storefront API. Here are the key endpoints your site needs:

Fetch collections​

Retrieve a list of all your collections:

GET https://storefront-api.fourthwall.com/v1/collections?storefront_token=YOUR_TOKEN

Fetch products in a collection​

Retrieve products from a specific collection using its handle:

GET https://storefront-api.fourthwall.com/v1/collections/{handle}/products?storefront_token=YOUR_TOKEN

Replace {handle} with your collection handle (for example, all for all products).

Get shop details​

Retrieve your shop's name, domain, and other public information:

GET https://storefront-api.fourthwall.com/v1/shop?storefront_token=YOUR_TOKEN
tip

Sample prompt for Lovable: "Build a Next.js storefront that fetches products from the Fourthwall Storefront API. Use GET requests to https://storefront-api.fourthwall.com/v1/collections/all/products?storefront_token=YOUR_TOKEN to display products in a grid layout with images, names, and prices."

Step 4: Set up cart and checkout​

Fourthwall's Storefront API provides cart management endpoints. Your Lovable-built site creates and updates carts through the API, then redirects supporters to Fourthwall's hosted checkout to complete their purchase.

Cart management​

Use the Storefront API's cart endpoints to:

  • Create a new cart when a supporter adds their first item
  • Add, update, or remove items from the cart
  • Retrieve the current cart contents for display

Checkout redirect​

When a supporter is ready to check out, redirect them to Fourthwall's hosted checkout page:

https://{your_checkout_domain}/checkout/?cartCurrency={currency_code}&cartId={cart_id}
  • {your_checkout_domain} is your Fourthwall shop domain (or custom domain if connected)
  • {currency_code} is the three-letter currency code (for example, USD)
  • {cart_id} is the cart ID returned by the Storefront API

Fourthwall handles the entire checkout process, including payment processing, tax calculation, and order confirmation emails.

Style the checkout experience​

Your supporters leave your Lovable-built site and complete their purchase on Fourthwall's hosted checkout page. To keep the experience consistent:

  1. Go to Site Design in your Fourthwall dashboard.
  2. Select a simple theme like Clean Frame that matches your Lovable site's style.
  3. Adjust colors and typography to match your Lovable site.
  4. If you use a custom domain, connect it in Settings > Domains so the checkout URL matches your brand.

Reference: Vercel Commerce template​

Fourthwall maintains an open-source Vercel Commerce template that shows how a custom Next.js storefront connects to Fourthwall's backend. Review this template for working examples of:

  • Product fetching and display
  • Cart management with the Storefront API
  • Checkout redirect implementation

You can reference this template when prompting Lovable or use it as a starting point for your custom code.

Frequently asked questions​

Does Fourthwall have a native Lovable integration?​

No. Fourthwall does not have a direct plugin for Lovable. The integration works through the Storefront API, which Lovable-generated React apps can call like any other API.

Do I need coding experience to set this up?​

Lovable generates the code for you based on text prompts, so you don't need to write code from scratch. Some familiarity with API concepts (tokens, endpoints, requests) helps when describing what you want Lovable to build.

What does Fourthwall handle vs. what does Lovable handle?​

Lovable handles your website's design, layout, and frontend functionality. Fourthwall handles product management, inventory, payment processing, tax calculation, fulfillment, and shipping. Checkout always happens on Fourthwall's secure hosted page.

Can I use any hosting provider for my Lovable site?​

Yes. Lovable generates standard React applications that can be deployed to Vercel, Netlify, or any hosting provider that supports Node.js applications.

Where can I find the full Storefront API documentation?​

The complete Storefront API reference is available at docs.fourthwall.com/storefront/overview.

If you have any questions, do not hesitate to contact us at support@fourthwall.com.