From a template to a live store

The Smootify starter and the other 2.0 templates are Webflow sites with every store page already wired to Shopify: product, collection, cart, search and account. You bring the products and the brand. This guide takes you from the clone to a store that takes orders on your domain. Each step ends with the check that tells you it worked, and links to the docs page with the details.

You work in three places, and each keeps its own part of the store:

1. Clone a 2.0 template

Open the Templates page, pick the Smootify starter or any other 2.0 template, and clone it into your Webflow workspace. The demo stores are complete stores, each built around a way of selling; the starter is a plain base to build your own design on. The 1.x templates on the same page load Smootify 1.x: to start on 2.0, pick one from the 2.0 templates.

The clone comes with the three CMS collections Smootify fills (Products, Collections, Vendors), the script in the head code and the store pages.

It worked when the site opens in your Designer with its pages and its three collections. More in Starter and templates.

2. Install Smootify in Shopify

In the Shopify App Store, install the Smootify app on your store and open it from your Shopify admin. The app takes you to the Smootify dashboard, where you log in or create your account.

Then create a storefront in Shopify’s Headless channel. Its public token goes into the Smootify project: the token the Smootify app creates is a test token, and with it customers get no order confirmation email.

It worked when the dashboard shows your store, and the project holds the Headless token. More in Set up the Shopify store.

3. Connect the cloned site

A clone is a new site for Smootify. In the Smootify dashboard, connect Webflow and pick the cloned site. One project links one Shopify store and one Webflow site.

It worked when you publish to your .webflow.io address and no “Project not Connected” banner shows. More in Connect the Webflow project.

4. Bring in your products

First publish the products and collections you sell to the Headless storefront’s sales channel, in the markets you sell in. A product that is not there does not load on the site.

Then fill the CMS from Shopify, in one of two ways:

Smootify Studio also sets the CMS field settings that Webflow’s API cannot change, such as prices as decimals with two places.

It worked when the Products collection lists your products, each with its Shopify ID, and a product page on .webflow.io shows the live price. More in CMS collections and sync.

5. Make it yours

Restyle the template as you would any Webflow site: classes, colors, fonts, images, texts, layout. The Smootify parts are Custom elements and custom attributes. Keep them on the elements you restyle, and keep each one inside the element it needs, such as the parts of a product inside smootify-product.

To check a page, publish to .webflow.io and press Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac). Smootify’s debugger opens:

When you add something new, start from the docs page of that part: Build your store has one page per part of the store, and Features one per feature. If you build with an agent, the Smootify MCP checks its markup before it goes into Webflow.

It worked when the debugger’s Checks tab shows no error and no warning on the product, collection, cart, search and account pages. More in The debugger.

6. Set up the store side

Shopify runs payments, shipping, taxes and markets: set them up in Shopify, as for any store. Smootify shows prices as Shopify sends them, so your tax settings decide whether the prices on the site include tax.

If customers log in, turn on Shopify’s new customer accounts and give the site their key, newCustomerAccountsPublicKey. Then add the cookie banner, which every site needs: it shows only where the visitor’s region asks for consent.

It worked when a test login works on .webflow.io, and the cookie banner shows when you open the site from a region that asks for consent. More in Customer accounts and Cookie consent.

7. Go live

Three things move the store to your domain.

The domain. Your main domain goes to Webflow only. Shopify gets a sub-domain for the checkout. See Domains and checkout.

A plan. A custom domain needs the Lite plan, or the Server plan for the add-ons that write to Shopify. Add the domain to the project in the Smootify dashboard, exactly as you publish it. See pricing.

A test order. Place an order from the site with Shopify’s test payments.

It worked when the test order arrives in Shopify with the Headless storefront as its sales channel, and its confirmation email reaches you. Then publish to your domain. The full list is in Before you publish.

Where people get stuck