2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed
Log inStart free

Set up the Shopify store

The Shopify side of a Smootify store. Covers the store, the Smootify app, the Headless channel and its token, the sales channel your products must be on, markets and customer accounts.

v2.0 beta
Open .md1.x page ↗
On this page
  1. 1. Create the store
  2. 2. Install the Smootify app
  3. 3. Create a Headless storefront and use its token
  4. 4. Publish your products to the Headless channel
  5. 5. Markets
  6. 6. Customer accounts
  7. 7. Metafields
  8. Where people get stuck

Shopify is where your products, stock, orders and customers live, and where the checkout happens. Webflow only shows them. This page sets up the Shopify side: the store, the Smootify app, and the Headless channel that gives your Webflow site access to the products.

Note

The store needs the Shopify Basic plan or higher. The Starter plan cannot use the Headless channel.

1. Create the store

There are two kinds of store:

A store for your own business

Created
With a sign-up on shopify.com.
Then
A free trial, before you choose a plan.

A development store, for a client

Created
From a free Shopify Partner account.
Then
No time limit, but no real payments. When the store is ready, you transfer it to the client: see Hand a project to a client.

Add a few products with their variants and images early. You need them to see your pages come alive.

2. Install the Smootify app

  1. Install Smootify from the Shopify App Store, on the store you just created.
  2. Open the app from your Shopify admin. It takes you to the Smootify dashboard.
  3. Log in, or create a Smootify account.
  4. Connect your Webflow site to the project: see Connect the Webflow project.

When it connects, the app creates a Storefront token for the project, so your Webflow site can read the products right away. The next step replaces it.

3. Create a Headless storefront and use its token

Shopify’s Headless channel gives a Webflow site its own storefront in Shopify. Its token is the one a live store uses:

The Smootify app's token

Created
By the Smootify app, when it connects.
For
Building and testing only.
Orders
Get no order confirmation email.

The Headless storefront's public token

Created
By you, in a Headless storefront.
For
The live store.
Orders
Customers get the order confirmation email. The orders show the storefront's name as their sales channel, apart from other channels such as the Online Store or social media.
  1. Install Headless from the Shopify App Store, on the same store.
  2. Create a storefront. Its name is the sales channel name you will see on your orders.
  3. Open the storefront’s Storefront API settings and turn on all the permissions. Smootify needs all of them, the one for stock levels included.
  4. Copy the public access token.
  5. In the Smootify dashboard, open the project’s settings and paste it as the Storefront token, in place of the test token.

You can do this at the start or just before launch, but always before real customers order.

Warning

Copy the public access token, not the private one. The dashboard refuses a private token, which is never meant for a website.

4. Publish your products to the Headless channel

A product reaches your Webflow site only if it is published to the Headless storefront’s sales channel. In Shopify, add that channel to every product and collection you sell, next to the Online Store if you keep it.

What it changes:

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.

5. Markets

Shopify Markets decides where you sell, in which currency and at which price. Smootify shows each visitor the prices and the availability of their market.

  • A product must be available in the markets you sell in. A product that is not sold in the visitor’s market leaves its product block empty on the page.
  • The CMS sync reads your products in the market of each Webflow language, so a product missing from a market is also missing from the CMS.

Country switchers, languages and currencies on the site: see Markets, currencies and languages.

6. Customer accounts

This step is only for stores where customers log in on the Webflow site. Shopify has deprecated its classic customer accounts and will remove them soon, so Smootify 2.0 works with the new customer accounts.

  1. In Shopify, go to Settings → Customer accounts and use the new customer accounts.
  2. The Headless storefront gives the public key of the Customer Account API.
  3. That key goes in Smootify’s options as newCustomerAccountsPublicKey.

The whole set-up, with the login and account pages: Customer accounts.

7. Metafields

Metafields add your own data to products, such as a material or care instructions. To show a metafield on the site, its definition in Shopify needs Storefront access turned on: see Metafields on the page. To copy a metafield into a CMS field, see CMS collections and sync.

Where people get stuck

Check these first

  • Customers get no order confirmation email. The project still uses the test token the Smootify app created. Paste the public token of a Headless storefront in the project’s settings.
  • The dashboard refuses the token. It is the private access token. Copy the public one.
  • A product never shows on the site or in the CMS. It is not published to the Headless storefront’s sales channel, or not available in your markets.
  • A collection is missing from the CMS. It has no products published to the Headless channel.
  • Login does not work. Most often the Callback URIs or the JavaScript origins in the Customer Account API settings of the Headless channel do not match the site: each address you use (your .webflow.io address and your own domain) must be in both, written as https://www.example.com. Also check that newCustomerAccountsPublicKey is set and that the store uses the new customer accounts. See Customer accounts.
  • A metafield stays empty. Its definition needs Storefront access.

    ↑ ↓ to moveEnter to openEsc to close