In this guide11 sections
Lovable can design and publish the storefront, while Shopify remains the commerce system behind it. Shopify owns products, inventory, checkout, payments, orders, and operational workflows. Lovable gives you a prompt-led way to shape the customer-facing experience around that system.
That division is the key to using the integration well. You are not converting a Lovable project into a conventional Shopify theme, and you are not replacing Shopify's checkout with a generated approximation. You are building a custom storefront that connects to Shopify. The result can be more flexible than a standard theme, but it also deserves more deliberate testing around product URLs, cart state, checkout, analytics, and search visibility.
This guide covers both supported routes: creating a new Shopify development store from Lovable and connecting a store you already operate. It also explains the ownership, collaborator, remixing, and subscription details that are easy to discover only after the build has started.
How Lovable and Shopify divide the work
The native integration combines a Lovable-built frontend with Shopify's commerce backend. Lovable's current Shopify documentation (opens in a new tab) confirms support for both new and existing stores. It also states that Shopify handles payments, inventory, and logistics when the store goes live.
In practical terms, use Lovable to create the homepage, collection experiences, product presentation, navigation, search and filtering interfaces, brand storytelling, campaign pages, and custom interactions. Use Shopify Admin to operate the business: configure payments, taxes, shipping, markets, policies, fulfillment, customer records, and the apps that need direct access to Shopify's data and order lifecycle.
This architecture is a good fit when a brand wants a storefront experience that is difficult to express with an off-the-shelf theme. It is less compelling when the store only needs a familiar catalog, standard product templates, and broad compatibility with theme-based Shopify apps. In that case, a strong Shopify theme may be simpler to maintain.
| Responsibility | Primary system | Verify before launch |
|---|---|---|
| Storefront design and customer-facing interactions | Lovable | Responsive layout, accessibility, loading and empty states |
| Products, variants, prices and inventory | Shopify | Correct source data and synchronization in the storefront |
| Cart presentation | Lovable with Shopify data | Variant, quantity, price and persistence behavior |
| Checkout, payments and orders | Shopify | Redirect, discount, tax, shipping, decline and confirmation flows |
| Publishing and public domain | Lovable project | Custom domain, analytics, canonical URLs and redirects |
| Commerce operations | Shopify Admin | Payments, KYC, fulfillment, policies and staff permissions |
Note
You do not need Hostinger to launch this setup. Lovable publishes the storefront, and Shopify supplies the commerce backend. External hosting is an optional architecture decision, not a requirement.
Choose a new store or connect an existing Shopify store
A new-store build starts in a free Shopify development sandbox created through Lovable. It is useful for product experiments and greenfield brands because you can build before activating a paid commerce account. The sandbox cannot process real payments. Current Lovable documentation says the development store must be claimed within 30 days of creation or Shopify removes it. Claiming starts a separate 120-day Shopify trial, after which a paid Shopify subscription is required to keep selling. Verify the current terms at the moment you claim because trial policy can change.
An existing-store connection is the right route when products, customers, inventory, orders, apps, or operational settings already live in Shopify. You authenticate directly with Shopify, choose a store your account can access, and install the Lovable app. This keeps Shopify as the established source of truth while the new storefront is built and tested.
Do not create a second production catalog merely because it feels cleaner. Duplicating products introduces inventory drift, conflicting handles, and an avoidable cutover. For an existing business, connect the existing store and use a controlled preview or limited collection while validating the new experience.
| Starting point | Best option | Important constraint |
|---|---|---|
| No Shopify store or catalog yet | Create a new development store in Lovable | Claim it before the documented deadline and activate Shopify before real sales |
| Operating Shopify business | Connect the existing store | Use a Shopify account with appropriate access and protect live catalog changes |
| Design experiment only | New sandbox or a safely scoped project | Do not confuse a polished preview with a payment-ready store |
| Existing theme with one custom landing experience | Evaluate a Shopify theme section or separate campaign route first | A full headless-style storefront may be more architecture than the use case needs |
Write the commerce brief before the first prompt
A useful store prompt describes more than visual mood. It defines the catalog, shopper, product decision, primary conversion path, and the Shopify behaviors that must remain authoritative. If those details are missing, the builder may produce attractive mock cards that are disconnected from real variants and checkout.
Start with one representative product that contains the hardest data shape in the catalog: multiple variants, sale pricing, several images, stock status, subscriptions, personalization, or digital delivery. Designing around the hardest product prevents a simple demo item from hiding structural problems.
Define the URL model before generating dozens of pages. Decide how product and collection handles map to routes, what happens when a handle changes, and which pages should be indexed. Product names are editorial content; stable handles and redirects are infrastructure.
- Customer: who buys, what they compare, and what creates trust before purchase.
- Catalog: product types, variants, collections, inventory behavior, price formats, and sold-out rules.
- Pages: home, collections, product, search, cart, policy, contact, account, and campaign routes.
- Conversion: primary CTA, cart behavior, checkout handoff, discounts, bundles, and post-purchase expectation.
- Brand system: typography, colors, image treatment, spacing, interaction style, and accessibility requirements.
- SEO: route conventions, titles, descriptions, canonical logic, product schema, collection copy, and redirects.
- Operations: staff roles, approval for catalog writes, analytics, support, fulfillment, returns, and launch owner.
Build a responsive Shopify storefront for a premium running-accessories brand.
Use Shopify as the source of truth for products, variants, prices, inventory, discounts, cart, checkout and orders. Do not use mock product data after the connection is active.
Create: homepage, collection index, collection detail, product detail, search results, cart, about, contact, shipping and returns pages.
Product pages must support variant selection, stock state, image gallery, delivery information and related products. Disable the purchase action until a valid available variant is selected.
Use stable product-handle URLs, unique page titles and descriptions, canonical URLs, Product structured data, descriptive image alt text, and indexable collection copy.
Before changing Shopify catalog data, tell me exactly which products, variants or fields will change and ask for approval.Connect Shopify to Lovable step by step
The Shopify connector is enabled at workspace level by default, with Ask each time as the documented default permission. That means Lovable should ask before enabling it for a project. Workspace owners can review the preference under Settings, Connectors, Shared connectors, Shopify, and Manage permissions.
For an existing store, the person connecting should first confirm their Shopify role. Lovable sends the user to Shopify to authenticate, select a store, and install the Lovable app. Each collaborator later connects their own Shopify account when they perform a Shopify action, and what they can change follows their Shopify permissions. Shopify sessions can expire, so a reconnect prompt is not necessarily a broken integration.
- 1
Create or open the Lovable project
Start from a blank project or a Shopify template. If you remix a template, explicitly remove all mock products and reconnect every product route to Shopify data.
- 2
Ask for the Shopify integration
State whether you are creating a new store or connecting an existing one. Review the permission prompt before selecting Allow.
- 3
Choose the store path
Create a development store for a new brand, or choose an existing store through Shopify authentication.
- 4
Confirm catalog access
Fetch a small product set and verify titles, handles, variants, prices, images and availability before redesigning the whole storefront.
- 5
Replace mock data
Search every page, component and state for sample products. Cart, wishlist, search and related-product features must all use Shopify identifiers.
- 6
Protect catalog writes
Limit product changes to authorized Shopify users and use explicit approval prompts for bulk edits, price changes and deletions.
Watch out
A connected Shopify project cannot be remixed until the store is disconnected. Disconnecting leaves the store and its data intact in Shopify, but the Lovable project no longer has that connection.
Build around real catalog and cart states
The storefront should be tested as a state machine, not a collection of screenshots. A product can be available, sold out, missing an image, discounted, subscription-only, or split across variants with different prices and stock. The cart can be empty, stale, contain an unavailable variant, fail to update, or cross a discount threshold.
Use Shopify's identifiers and current data at every step. Product detail links should be derived consistently from handles, while cart line items should preserve the exact variant selected. If a template started with mock IDs, replace the logic rather than only changing visible names. Broken product routes after a remix are often a sign that display data changed while URL logic did not.
Keep Shopify checkout authoritative. The Lovable storefront can present and update the cart, but payment, tax, shipping, and order creation should complete in Shopify. Test the handoff on mobile, with accelerated payment methods where relevant, and after returning from an abandoned checkout.
- A product with one variant and a product with several variants.
- Available, low-stock and sold-out behavior.
- Regular price, compare-at price, discount code and invalid discount.
- Cart quantity changes, removal, persistence after refresh, and an empty cart.
- Direct visits to product URLs, including a missing or changed handle.
- Checkout success, decline, cancellation, tax, shipping and order confirmation.
- Inventory changes between adding an item and starting checkout.
Protect SEO in a Lovable Shopify storefront
A custom storefront needs the same search foundations as any commerce site: one crawlable URL per canonical product and collection, useful title tags, unique descriptions, internal links, structured data, image alt text, and redirects when handles change. Do not assume that products appearing in a browser preview means search engines receive a complete page.
Inspect the rendered output of several live URLs with Google Search Console URL Inspection after launch. Confirm that the canonical points to the public storefront domain, not a backend Shopify domain or preview subdomain. Product structured data should match visible price, currency, availability, and variant information. Avoid generating review markup unless the displayed reviews are genuine and eligible under platform and search policies.
Collection pages should help people choose, not merely repeat a product grid. Add a concise explanation of the category, decision criteria, and links to relevant subcollections or guides. Product pages need original copy that resolves purchase questions. Manufacturer text copied across retailers rarely creates a strong reason for the page to rank.
- Stable, readable product and collection routes based on Shopify handles.
- Unique title, meta description, H1 and canonical URL for indexable pages.
- Product, Offer and Breadcrumb structured data that agrees with visible content.
- Descriptive image alt text and optimized responsive images.
- Internal links from navigation, collections, related products, editorial pages and sitemaps.
- Redirects for changed handles and a useful 404 experience for removed products.
- Noindex treatment for thin filters, internal search results, cart, account and duplicate parameter states where appropriate.
Tip
For a wider technical review, use our Lovable SEO guide. Commerce SEO adds product availability, variants, collection architecture, reviews and handle redirects to the standard checklist.
Understand ownership, permissions and store claiming
Before a newly created development store is claimed, project collaborators can use the integration with full read and write access. After claim, the person who claims becomes the Shopify store owner. Other collaborators connect their own Shopify accounts, and their ability to create, update, or delete products, variants, and discount codes follows the roles and permissions configured in Shopify.
People who have not connected a Shopify account can still work on the Lovable storefront, but they cannot assume commerce-writing authority. This separation is useful: designers can improve the interface without automatically gaining permission to change live prices or delete variants.
Claim only when the store is ready to move into operational setup. The owner must complete Shopify configuration and payment activation, including any required identity or business verification. Shopify's subscription is separate from Lovable pricing. Budget both, plus any paid apps, transaction costs, domain, email, and operational services the business actually uses.
Watch out
Current documentation says a Lovable-created Shopify development store must be claimed within 30 days and that claiming starts a 120-day Shopify trial. Confirm the terms in the claim screen because commercial terms can change.
Launch checklist for Lovable and Shopify
Run the final test on the real public domain with production-like products and a payment mode appropriate for launch testing. Assign one person to storefront publishing and one to Shopify operations so a design release cannot silently conflict with a catalog or checkout change.
- The public domain, HTTPS, preferred hostname, redirects and canonical URLs are correct.
- Every mock product, placeholder image, test discount and sample review has been removed.
- Product routes work from collections, search, cart, related products and direct visits.
- Variants, prices, currency, availability and discount behavior match Shopify.
- Checkout success, decline, cancellation, shipping, tax and confirmation have been tested.
- Payments are activated in Shopify and the store owner has completed required verification.
- Analytics records product views, add-to-cart, checkout and purchase without duplicate events.
- Policy, contact, shipping, returns and privacy information is complete for the actual business.
- Search Console can inspect representative product and collection pages with the expected canonical and structured data.
- Shopify staff permissions and Lovable workspace access match each person's responsibilities.
- Monitoring, customer support and a rollback or storefront-disable plan exist for the first release window.
When Lovable plus Shopify is the right choice
Use the combination when storefront differentiation is commercially important and the team wants to iterate on that experience through prompts and code while retaining Shopify's mature commerce operations. It is especially attractive for landing-led brands, curated catalogs, interactive product discovery, custom onboarding, and campaigns that do not fit comfortably inside a rigid theme.
Use a conventional Shopify theme when operational simplicity, theme-app compatibility, and predictable maintenance matter more than a highly custom frontend. Use a specialist headless commerce stack when the catalog, markets, content, personalization, or engineering organization already justifies that complexity. Lovable lowers the cost of creating a custom interface, but it does not eliminate the need to own its behavior.
If you are still evaluating the builder itself, read our Lovable review, Lovable pricing guide, and production-readiness checklist before committing the storefront to a launch date.
Key takeaways
- Lovable builds and publishes the storefront; Shopify remains responsible for catalog, checkout, payments, orders, inventory, and commerce operations.
- Both new development stores and existing Shopify stores are supported.
- Use real Shopify products and variants early so mock data cannot hide broken routes or cart logic.
- A Lovable-created development store must be claimed before its documented deadline and needs a paid Shopify plan after the trial.
- Collaborator commerce permissions follow Shopify roles after connection or claim.
- Test crawlability, canonicals, product data, cart state, checkout, analytics, and operational ownership before launch.
Frequently asked questions
Yes. Lovable's current integration supports both new and existing Shopify stores. For an existing store, sign in through Shopify with an account that has access, choose the store, and authorize the Lovable app.
