--- title: Lovable shortDescription: Build a custom storefront with Lovable's AI website builder and connect it to Fourthwall's backend using the Storefront API. articleType: Tutorial primaryTopic: lovable-storefront-api-integration categories: - Integrations - Developer Tools tags: - lovable-integration - storefront-api - headless-commerce - custom-storefront - api-integration - react-storefront - storefront-token - developer-tools tasks: - Connect a Lovable-built site to Fourthwall - Get a storefront token from Fourthwall - Fetch products using the Storefront API - Set up cart management with the Storefront API - Redirect supporters to Fourthwall checkout - Find a collection handle in the Fourthwall dashboard terms: - Lovable - lovable.dev - AI website builder - Storefront API - storefront token - headless commerce - custom storefront - collection handle - React storefront - Next.js storefront - API integration - cart API - checkout redirect - build a website with AI labels: - integrations - storefront-api - headless-commerce - developer-tools contextString: Requires a Fourthwall store with at least one published product and a collection. Requires a Lovable account. Available on all Fourthwall plans. breadcrumbPath: "Manage my shop > Apps, features, and integrations > How to Integrate Lovable with Fourthwall" path: manage-my-shop/apps-features-and-integrations/integrate-lovable last_updated: '2026-04-01' --- # How to Integrate Lovable with Fourthwall [Lovable](https://lovable.dev) 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. Fourthwall does not have a direct Lovable plugin — the integration works through the Storefront API, which any custom frontend can use to fetch products, manage carts, and redirect supporters to checkout. ## Prerequisites & Requirements - 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. Go to **Settings > For Developers** in your Fourthwall dashboard and copy your **Storefront Token**. Store this token securely — you'll add it to your Lovable project as an environment variable or configuration value. Dashboard path: https://my-shop.fourthwall.com/admin/dashboard/settings/for-developers?redirect ## 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`). 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: - Endpoint: `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: - Endpoint: `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: - Endpoint: `GET https://storefront-api.fourthwall.com/v1/shop?storefront_token=YOUR_TOKEN` 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 at https://github.com/FourthwallHQ/vercel-commerce 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 https://docs.fourthwall.com/storefront/overview.