Domains and checkout

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.

How the addresses fit together

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.

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.

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

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