# 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.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/getting-started/quick-start/shopify-store  
URL: https://www.smootify.io/docs/start/shopify-store  
Updated: 2026-10-01

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.** Sign up on shopify.com and follow the set-up. Shopify gives a free trial before you choose a plan.
- **A development store**, if you build the store for a client. You create it from a free Shopify Partner account. It has no time limit, but it cannot take real payments. When the store is ready, you transfer it to the client: see [Hand a project to a client](https://www.smootify.io/docs/start/hand-off).

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](https://www.smootify.io/docs/start/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 | The Headless storefront's public token |
|---|---|---|
| Created | by the Smootify app, when it connects | by you, in a Headless storefront |
| For | building and testing: the site reads the products right away | the live store |
| Orders | get no order confirmation email | customers get the order confirmation email, and 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 storefront's sales channel:** the product loads on the site, and the CMS sync imports it.
- **Not published there:** the product does not load on the site, and the CMS 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](https://www.smootify.io/docs/features/markets).

## 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](https://www.smootify.io/docs/build/account).

## 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](https://www.smootify.io/docs/build/metafields). To copy a metafield into a CMS field, see [CMS collections and sync](https://www.smootify.io/docs/start/cms).

## Where people get stuck

> [!STUCK]
> - **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](https://www.smootify.io/docs/build/account).
> - **A metafield stays empty.** Its definition needs Storefront access.