# Domains and checkout

> Which domain goes to Webflow and which to Shopify, why the checkout needs its own sub-domain, the Headless storefront, and the Shopify theme that sends visitors of the Shopify store to your Webflow site.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/getting-started/publish/domains  
URL: https://www.smootify.io/docs/start/domains  
Updated: 2026-10-07

A Smootify store uses two hosts. Webflow serves your pages, and Shopify serves the checkout. Each needs its own address: your main domain for Webflow, and a sub-domain for Shopify. This page sets up both, and says what to do with Shopify’s own storefront, which you no longer use.

> [!NOTE]
> Where you add DNS records depends on your domain provider. Webflow's and Shopify's help pages on connecting a domain give the records to add.

## How the addresses fit together

| Address | Connected to | Serves |
|---|---|---|
| `www.example.com` | Webflow only | every page, the cart, the account pages |
| `store.example.com` | Shopify, as the primary domain | the checkout |
| `example.myshopify.com` | Shopify, always | nothing you use: the Redirect theme sends visitors to your site |

## 1. Connect the main domain to Webflow

Connect your main domain, such as `www.example.com`, to the Webflow site, and to Webflow only.

- **Use `www` as the default domain in Webflow.** Many domain providers cannot point a bare domain, such as `example.com`, with the records Webflow needs. With `www` as the default, the bare domain redirects to it.
- **Add the domain to the Smootify project.** In the project settings in the Smootify dashboard, write the domain exactly as the site is published, `www` included. See [Connect the Webflow project](https://www.smootify.io/docs/start/webflow-project).

## 2. Remove the main domain from Shopify

If your main domain was connected to Shopify before, for example because the store had an Online Store, remove it from Shopify. Otherwise the checkout does not work: its address is answered by Webflow’s hosting instead of Shopify.

## 3. Give the checkout a sub-domain

The checkout works on the `.myshopify.com` address too. Customers trust a checkout on your own domain more, so connect a sub-domain to Shopify:

1. In Shopify, go to **Settings → Domains** and connect a sub-domain, such as `store.example.com`.
2. Make it the store’s primary domain. The checkout opens on the primary domain.

The checkout is Shopify’s page, not a Webflow page. You cannot design it in Webflow: its logo, colours and a few other settings are in Shopify’s checkout settings.

## 4. Use the Headless storefront’s token

The token the Smootify app creates at install is for building and testing only: orders placed with it get no order confirmation email. Before launch, create a storefront in Shopify’s **Headless** channel and paste its public token in the project settings. The storefront’s name then shows as the sales channel of your orders. The steps are in [Set up the Shopify store](https://www.smootify.io/docs/start/shopify-store).

## 5. Send Shopify’s storefront visitors to Webflow

Shopify keeps its own storefront, the **Online Store**, at `example.myshopify.com`. Visitors can still reach it, from an old link or a search result. If you do not use the Online Store, Smootify’s **Redirect theme** sends them to your Webflow site.

What the theme does:

- it sends every page of the Online Store to the same page on your Webflow site, except the cart page;
- product and collection pages go to your template pages, using the URLs you set in the theme, with no extra redirects in Webflow;
- Shopify’s bot check and discount links keep working. A discount link sends the visitor to your site with the code, and Smootify applies it to the cart.

To set it up:

1. Download the [Redirect theme](https://deliverables.smootify.io/Smootify%20-%20Redirect%20theme-1.1.1.zip).
2. In Shopify, go to **Online Store → Themes** and upload the file.
3. Click **Customize**, then open **Theme settings → Storefront** and fill in:
   - **Hostname**: the domain of your Webflow site, with `www` when it has one, such as `www.example.com`. Without `www`, visitors are redirected twice.
   - **Products Base**: the Collection URL of your Products collection, such as `products`.
   - **Collections Base**: the Collection URL of your Collections collection, such as `collections`.
4. Publish the theme.

The Redirect theme also lets the Smootify dashboard read your app embeds, such as the Shopify Inbox chat, straight from the store: see [Shopify Inbox](https://www.smootify.io/docs/features/shopify-inbox).

Already using an older version? Upload the new file the same way and publish it. A theme uploaded from a file starts with the default settings, so fill in **Theme settings → Storefront** again.

## Where people get stuck

> [!STUCK]
> - **The checkout does not open.** Your main domain is still connected to Shopify. Remove it there and use a sub-domain for Shopify.
> - **The checkout opens on the `.myshopify.com` address.** The sub-domain is not the store's primary domain in Shopify.
> - **The banner "To connect your custom domain … you need an active Smootify Plan".** The domain in the project settings is missing or differs from the published one, often by `www`.
> - **Customers get no order confirmation email.** The project still uses the test token. Use the Headless storefront's public token.
> - **Visitors of the Shopify store land on a 404 page.** The theme's Products Base or Collections Base differs from your Collection URLs.