How to Integrate Lovable with Shopify

Before connecting Shopify to Lovable, you need a Storefront API access token from your Shopify admin. This is different from the Admin API key — the Storefront API is specifically designed for custom storefronts and only exposes data that customers are allowed to see (products, collections, cart, checkout). Log in to your Shopify admin at your-store.myshopify.com/admin. In the left sidebar, scroll down and click Apps, then look for the Develop apps link near the bottom of that page (you may need to click Develop apps → Allow custom app development first if you have not done this before). Click Create an app, give it a name like Lovable Storefront, and click Create app. Once the app is created, click the Configuration tab at the top of that app page. Scroll down to find the Storefront API integration section and click Configure. Check the boxes for the Storefront API scopes your storefront needs — at minimum select unauthenticated_read_product_listings, unauthenticated_read_product_inventory, and unauthenticated_write_checkouts. Click Save. Now click the API credentials tab. Scroll down to the Storefront API section and click Install app if prompted. You will see your Storefront API access token — click Reveal token once, copy it immediately, and store it somewhere safe. This token is shown only once. You will also need your store's myshopify.com domain (for example, acme-store.myshopify.com). Keep both of these handy for the next step.

Now open your Lovable project. Click the settings gear icon in the top-right corner of the Lovable editor to open Project Settings. In the left sidebar of Settings, look for the Connectors section and click it. You will see a list of available connectors — scroll until you find Shopify (it is one of the 17 shared connectors) and click Connect or the toggle next to it. A configuration panel will open asking for your Shopify credentials. In the Store domain field, enter your myshopify.com address exactly as it appears — for example acme-store.myshopify.com (do not include https:// or any trailing slash). In the Storefront API token field, paste the access token you generated in the previous step. Click Save or Connect. Lovable will verify the credentials by making a test call to your Shopify store. If the credentials are correct, the Shopify connector will show a green connected status. If you see an error, double-check that the store domain has no extra spaces or slashes and that the token was copied completely — they can be long. Once connected, the Shopify connector is active for your entire workspace, meaning every project in your workspace can use it. Lovable's AI now has full awareness of the Shopify Storefront API — it knows the correct GraphQL query shapes, how to handle pagination for large product catalogs, how to manage cart state, and how to redirect to Shopify's hosted checkout. You do not need to explain any of this in your prompts; just describe the UI and behavior you want.

With the Shopify connector active, return to the main Lovable chat interface. You can now describe your storefront in plain English and the AI will generate the correct React components wired to your live Shopify store. Start with the product catalog — this is the page that displays your products from Shopify. Use the lovable_prompt below as a starting point and customize the description to match your brand. Lovable will generate a products page that fetches your live inventory from Shopify using the Storefront API, renders product cards with image, title, price, and an Add to Cart button, handles loading and empty states gracefully, and includes a responsive grid layout that works on mobile and desktop. After sending the prompt, watch the preview panel on the right. Lovable will write the code, deploy it, and show a live preview. If your Shopify store has products, you should see them load in the preview within a few seconds of the build completing. If the preview shows placeholder data, ask Lovable to connect it to real Shopify data and it will adjust. You can also ask for specific layouts — for example, a two-column grid for mobile or filtering by product collection.

A product catalog is only useful if customers can collect items before buying. In this step, ask Lovable to add cart functionality — a cart state that tracks items the customer has added, a cart count badge on a header icon, and a slide-out cart sidebar that shows the cart contents with quantities and a subtotal. Lovable will generate this using React context or a lightweight state management approach — typically a CartContext that wraps your app and provides addToCart, removeFromCart, and updateQuantity functions to any component. The cart sidebar component reads from this context and renders each item with its product image, name, price, quantity controls, and a remove button. A checkout button at the bottom of the cart will be wired in the next step. Send the prompt below, then check the preview. Click an Add to Cart button on the product catalog — the cart count in the header should increment and the sidebar should be accessible. If anything looks off — for example the cart count is not updating or the sidebar does not slide in — ask Lovable to fix the specific issue and it will adjust the code without regenerating the whole page. This entire cart is client-side state — nothing is written to Shopify until the customer clicks Checkout. Shopify only gets involved when a Checkout object is created, which happens in the next step. This keeps things fast and avoids creating abandoned checkouts for every page load.

The final step connects your cart to Shopify's hosted checkout page, where customers enter their payment and shipping details. Shopify handles all payment processing, tax calculation, and order creation — your Lovable app just needs to create a Shopify Checkout object from the cart contents and redirect the customer to it. Send the prompt below to Lovable. The AI will generate code that calls the Shopify Storefront API to create a checkout with the customer's current cart line items, retrieves the Shopify-hosted checkout URL from the response, and redirects the browser to that URL when the customer clicks the Checkout button in the cart sidebar. The customer completes their purchase on Shopify's secure checkout page, which handles credit cards, Shop Pay, Apple Pay, and any other payment methods you have enabled in your Shopify admin. After sending the prompt, test the full flow in the Lovable preview: add a product to cart, open the sidebar, and click Checkout. You should be redirected to a checkout.shopify.com page with your products already in the cart. If you want to test a real purchase, you can use Shopify's test credit card numbers in your store's test mode. Once the checkout flow works in preview, publish your Lovable app using the Publish button in the top-right corner. Your custom Shopify storefront is now live. All orders will appear in your Shopify admin as normal — inventory is decremented, order confirmation emails are sent, and all your existing Shopify workflows (fulfillment, shipping, returns) continue to work exactly as before.