A store split in two: the back end keeps the products, the orders and the checkout, and the storefront customers see is built with any tool and reads the back end through an API.
In a classic online store, one system does everything: it keeps the products and the orders, and it also draws the pages customers see, from a theme. Headless commerce takes the pages away from it. The back end still keeps the catalog, the stock, the customers, the payments and the orders. The storefront is a separate site, built with whatever tool the team prefers, and it asks the back end for products, prices and carts through an API.
What it gives:
- The design is free. The storefront is not limited to what a theme can do.
- The commerce stays standard. Payments, taxes, shipping and orders are the back end’s, as in any store.
- One back end, several storefronts. The same store can sell on a website, an app and other channels.
In Webflow terms
A classic Shopify store is like a Webflow site whose pages Shopify draws from a theme. Headless keeps Shopify for the store and lets Webflow draw the pages: you design in the Designer as for any site, and Smootify brings the store into it.
In Smootify
Shopify is the back end, and your Webflow site is the storefront. Smootify connects the two: it fills your Webflow elements with products, prices, variants and stock from Shopify’s Storefront API, and keeps the cart in Shopify. Customers pay in Shopify’s checkout, and orders land in your Shopify admin.
In Shopify, a headless storefront lives in the Headless sales channel. Its public token is the one your Smootify project uses, and a product loads on the site only when it is published to that channel:
Published to the Headless channel
- On the site
- The product loads.
- In the CMS
- The sync imports it.
Not published there
- On the site
- The product does not load.
- In the CMS
- The sync does not import it. The import finds collections through their products, so a collection without published products is not imported either.
More in Set up the Shopify store and Why Smootify.