Blog · · 7 min

Lovable Shopify, what the integration actually does

Lovable builds the storefront; Shopify keeps payments, inventory, logistics and the admin. That split decides what can go on the page: anything the buyer must confirm happens inside Shopify's checkout, and the mechanics that raise the basket are yours to build before it.

By

Yes, you can build a Shopify store with Lovable, and the thing to understand before you start is that you are building half of one.

Lovable's Shopify integration lets you create a new Shopify store or connect an existing one, then build and launch a storefront by describing it in chat. You can manage products from inside Lovable too — descriptions, prices, images. But Lovable's own documentation is explicit about the other half: Shopify handles payments, inventory and logistics when you go live, and you activate payments in Shopify Admin before you can sell anything.

That is a headless split: a custom front, a commerce backend that stays where it is. What you can build follows from where the line falls.

What sits on which side of the line

LovableShopify
Storefront design and layout
Product pages, collections, cart UI
Product data entry and edits✅ (also in Shopify)
Checkout
Payments
Inventory
Fulfilment and logistics
Orders, customers, admin

Read that table with one question in mind — where does the buyer stop being on my page? — and the constraint appears. Anything you want the buyer to see, choose or confirm has to live on your side of the line. Once they are in Shopify's checkout, the page is not yours to compose.

That is not a limitation of Lovable; it is the shape of every headless build. But it moves where the basket mechanics go, and most people discover this after designing around the wrong assumption.

The operational details worth knowing first

Four things in the documentation are easy to miss and expensive to miss:

The 30-day claim. A store Lovable creates for you starts as a Shopify development store, and Shopify removes development stores left unclaimed for 30 days. Claim it inside the window or it goes away.

A paid Shopify plan, eventually. After claiming, the documentation describes a separate free trial on a Shopify subscription, after which a paid plan is required to keep selling. Two billing relationships, not one.

Payments are off until you turn them on. The storefront can be finished and live and still not take money. Activation happens in Shopify Admin.

Remixing is blocked once Shopify is connected. If your workflow depends on duplicating a project to try a variant, decide before you connect.

And one for teams: what a collaborator can change in Lovable matches their role and permissions in Shopify.

What the generated storefront will not have

Describe a store to Lovable and you get a store: collections, product pages, a cart, a route to checkout. It works and it looks current.

It will not have one of the mechanics that raise the value of an order, because a general-purpose builder has no concept of one. Ask for buy 2, save 15% and you get a quantity stepper — a number input with plus and minus buttons. We ran that prompt against two models with web search enabled and both returned exactly that, because the component actually being requested has no canonical spec on the open web.

Here is where each of the four goes in a headless Shopify front.

1. The quantity break, on the product page

It is a radio group. It is never a number input. A stepper asks how many, which is arithmetic; a set of named tiers asks which package, and one of them is visibly the sensible one.

Three tiers, four at most. Non-linear gaps — 1 / 3 / 6, not 1 / 2 / 3, because even steps read as a price list and uneven ones read as composed offers. Name the tiers rather than numbering them. Show the saving in currency, not only as a percentage. Put the unit price under the total. Preselect the middle tier, and bind the add-to-cart button to the selection so it reads Add 3 — €48.00.

One EU constraint is not stylistic: a struck-through comparison price must be one you actually charged, because EU price-indication rules govern prior-price announcements. Full spec in quantity breaks that raise average order value.

2. The free-shipping bar, in your cart

Show the amount still missing, in money: €6.00 to unlock free shipping. Not a percentage, not a filled rectangle with no figure attached.

The headless detail: the threshold you display and the rule that actually applies live in two different systems — the bar is drawn on your side, the rule is configured in Shopify. If they drift apart, the buyer adds an item to reach a threshold and is charged for delivery anyway, which is worse than never showing the bar. Details in the free shipping threshold bar.

3. The order bump, in your cart, above the totals

This is the one the split relocates. In a classic Shopify build people reach for a checkout upsell; here, checkout is Shopify's page. Your last composable moment is the cart, immediately before the handoff.

One named item, one price, one sentence saying why it goes with what is in the basket, and a checkbox that starts unchecked. In Europe that last point is law: Article 22 of Directive 2011/83/EU requires express consent to any payment beyond the main obligation, and where consent was inferred from a default the consumer had to reject, the consumer is entitled to reimbursement. Never a carousel, never a screen the buyer has to clear. See order bump that is legal in Europe.

4. The sticky add-to-cart, on mobile

It appears only once the inline button has scrolled out of view, never alongside it, and carries the selected tier's total so one glance replaces scrolling back up. Respect env(safe-area-inset-bottom), and hide it above 768px. See sticky add to cart on mobile.

Build them, or install an app

On a Shopify theme, apps do some of this. On a Lovable storefront, most Shopify upsell apps have nothing to attach to — they extend the theme, and you replaced the theme. The two routes are compared in upsell apps for Shopify, or build it.

The four components, with their rules and their EU constraints, are specified in the commerce kit. Hand that spec to whatever writes your storefront and it builds a radio group instead of a stepper.

FAQ

Can you build a Shopify store with Lovable?

You can build the storefront. Lovable's integration lets you create a new Shopify store or connect an existing one, generate its pages from a description, and manage products from inside Lovable. Shopify keeps payments, inventory and logistics, and you activate payments in Shopify Admin before you can sell.

Does the Lovable Shopify integration handle checkout?

No. Checkout stays on Shopify, along with payments, inventory and fulfilment. The practical consequence is that anything you want the buyer to see or confirm — an order bump in particular — has to sit in your own cart, before the handoff, because Shopify's checkout page is not yours to compose.

Do I still need a paid Shopify plan?

Yes, to keep selling. Lovable's documentation describes a development store that must be claimed within 30 days, then a separate free trial on a Shopify subscription, after which a paid plan is required. Lovable's own plan is billed separately.

Will the generated storefront include upsells or bundles?

No. A described storefront comes back with collections, product pages, a cart and a route to checkout, and none of the four mechanics that raise a basket. Ask for a bundle discount and you will most likely get a quantity stepper.