How to Integrate Lovable with Ecwid

Log in to your Ecwid admin at app.ecwid.com. Your store ID is visible in the browser URL when you're in the admin — look for '/store/{number}' in the address bar. Write down this number — it's required for all API calls. To generate an API token, go to Settings in your Ecwid admin left navigation, then click API. Click Generate New Token. Ecwid displays a token configuration screen where you can set the token name and select the permission scopes — check Read orders, Update orders, Read products, Update products, Read customers, and Read store profile. Click Generate. The secret token is displayed once — copy it immediately as Ecwid doesn't show the full value again after this screen. Ecwid's REST API base URL is https://app.ecwid.com/api/v3/{storeId}/ where {storeId} is your numeric store ID. All API calls require two things: the store ID in the URL path and the secret token as a Bearer token in the Authorization header. Ecwid also provides a public token for read-only public catalog data (products visible to non-logged-in visitors) — the secret token in this guide is for operations that require store owner access, including order management and customer data.

In your Lovable project, click the '+' icon next to the Preview panel to open the Cloud tab. Click Secrets in the left sidebar. Click Add Secret to create each credential. Add ECWID_STORE_ID with your numeric store ID as the value (e.g., '12345678'). Add ECWID_SECRET_TOKEN with your Ecwid API secret token as the value. Click Save for each. Note that for embedding the Ecwid JavaScript widget directly in the browser, your store ID is considered public information (it appears in the Ecwid widget's JavaScript initialization code). However, your secret token must never appear in frontend code — it grants write access to your store's orders and products. All REST API calls that use the secret token must go through the Edge Function. The public token (a separate shorter token also available in Settings → API) can be used in frontend code for read-only public product catalog browsing if you don't want to route every product fetch through an Edge Function. Lovable's Cloud Secrets encrypts all values on save. The security system blocks approximately 1,200 hardcoded API keys daily — using Cloud Secrets keeps your Ecwid credentials protected.

Create the Edge Function that proxies Ecwid REST API calls. Type the prompt below into Lovable's chat. Lovable will generate the TypeScript at supabase/functions/ecwid-proxy/index.ts and deploy it to Cloud. The Edge Function constructs the Ecwid API base URL using the store ID from Deno.env.get('ECWID_STORE_ID') and authenticates using the secret token in the Authorization header. It accepts a 'path' query parameter for the specific endpoint to call (e.g., '/products', '/orders', '/customers'), a 'method' parameter (GET, POST, PUT, DELETE), and forwards the request body for write operations. The function also passes through query parameters to the Ecwid API — this is important because Ecwid's list endpoints use query parameters extensively for filtering, sorting, and pagination (e.g., ?sortBy=PRICE_ASC&limit=25&offset=0&categoryId=123). Any query parameters in the incoming request that aren't 'path' or 'method' get forwarded to the Ecwid API URL. CORS headers are included on all responses.

1import { serve } from 'https://deno.land/std@0.168.0/http/server.ts'
2
3const corsHeaders = {
4  'Access-Control-Allow-Origin': '*',
5  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
6}
7
8serve(async (req) => {
9  if (req.method === 'OPTIONS') {
10    return new Response('ok', { headers: corsHeaders })
11  }
12
13  try {
14    const storeId = Deno.env.get('ECWID_STORE_ID')
15    const secretToken = Deno.env.get('ECWID_SECRET_TOKEN')
16
17    if (!storeId || !secretToken) {
18      return new Response(
19        JSON.stringify({ error: 'ECWID_STORE_ID or ECWID_SECRET_TOKEN not configured in Cloud Secrets' }),
20        { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
21      )
22    }
23
24    const ecwidBase = `https://app.ecwid.com/api/v3/${storeId}`
25    const url = new URL(req.url)
26    const apiPath = url.searchParams.get('path') || 'products'
27    const method = url.searchParams.get('method') || 'GET'
28
29    // Forward all non-proxy params to Ecwid
30    const ecwidParams = new URLSearchParams()
31    for (const [key, value] of url.searchParams.entries()) {
32      if (key !== 'path' && key !== 'method') {
33        ecwidParams.append(key, value)
34      }
35    }
36
37    const paramString = ecwidParams.toString()
38    const ecwidUrl = `${ecwidBase}/${apiPath}${paramString ? '?' + paramString : ''}`
39
40    const requestInit: RequestInit = {
41      method,
42      headers: {
43        'Authorization': `Bearer ${secretToken}`,
44        'Content-Type': 'application/json',
45        'Accept': 'application/json',
46      },
47    }
48
49    if (method !== 'GET' && method !== 'HEAD') {
50      requestInit.body = await req.text()
51    }
52
53    const ecwidRes = await fetch(ecwidUrl, requestInit)
54    const data = await ecwidRes.json()
55
56    return new Response(JSON.stringify(data), {
57      status: ecwidRes.status,
58      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59    })
60  } catch (error) {
61    return new Response(
62      JSON.stringify({ error: error.message }),
63      { status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
64    )
65  }
66})

With the Edge Function deployed, build your Ecwid-powered storefront in Lovable. This typically involves two parallel tracks: a custom React product catalog for browsing, and the embedded Ecwid JavaScript widget for checkout. For the custom product catalog, call the Edge Function with path=products to fetch your Ecwid product catalog. Ecwid's product objects include id, name, description, price, compareToPrice (original price for sale items), thumbnailUrl, imageUrl, inStock, quantity, categoryIds, and options (for variants like size and color). Lovable will generate TypeScript interfaces for these types. For the embedded Ecwid checkout widget, Ecwid provides a JavaScript snippet that loads the full store widget into any div. The widget handles cart management, checkout, and payment natively. Add this to your React component using a useEffect hook that loads the Ecwid script and initializes the widget with your store ID. Your store ID is not sensitive — it can appear in the React component code (or as a Vite environment variable with VITE_ prefix) since Ecwid's widget only reads public catalog data using the store ID. For complex configurations involving custom product variants, B2B pricing, or member-only discounts, RapidDev's team can help design the right combination of Ecwid REST API calls and widget customization options for your specific use case.

1// React component for embedding the Ecwid widget
2import { useEffect } from 'react'
3
4const ECWID_STORE_ID = import.meta.env.VITE_ECWID_STORE_ID
5
6export function EcwidStore() {
7  useEffect(() => {
8    // Load Ecwid script if not already loaded
9    if (!window.Ecwid) {
10      const script = document.createElement('script')
11      script.src = `https://app.ecwid.com/script.js?${ECWID_STORE_ID}`
12      script.setAttribute('charset', 'utf-8')
13      script.setAttribute('data-cfasync', 'false')
14      document.head.appendChild(script)
15
16      script.onload = () => {
17        window.Ecwid.init()
18      }
19    } else {
20      window.Ecwid.init()
21    }
22
23    return () => {
24      // Cleanup on unmount if needed
25    }
26  }, [])
27
28  return (
29    <div className="ecwid-store">
30      <div id={`my-store-${ECWID_STORE_ID}`} />
31    </div>
32  )
33}