Before you publish

A store works on your .webflow.io address long before it is ready for customers. This page lists what to check before you publish to your custom domain: in Shopify, in the Smootify dashboard and in Webflow. Then it says how to test the whole store on .webflow.io, where Smootify’s debugger helps you.

1. Shopify

• The Headless token. The project uses the public token of your Headless storefront, not the test token the Smootify app created. With the test token, customers get no order confirmation email. See Set up the Shopify store.
• Sales channel and markets. Every product and collection you sell is published to the Headless storefront’s sales channel, and available in the markets you sell in. A product that is not there does not load on the site.
• Payments, shipping and taxes. They are set up in Shopify. Smootify shows prices as Shopify sends them, so your tax settings in Shopify decide whether the prices on the site include tax.
• No store password. The store’s password protection is removed.
• The checkout domain. Your main domain is removed from Shopify, and a sub-domain such as store.example.com is connected there for the checkout. See Domains and checkout.
• Customer accounts, if customers log in on the site. In the Headless storefront’s Customer Account API settings, the live address of your site is in the JavaScript origins and in the callback URIs, as your .webflow.io address already is. Without it, login works on .webflow.io and fails on the live site. See Customer accounts.

2. The Smootify dashboard

• A paid plan. A custom domain needs the Lite or the Server plan. The Free plan runs only on .webflow.io.
• The live domain. The project settings hold the domain the site is published on, written exactly as published, www included when it has one.
• Add-ons. Magic Box, if you use it, is turned on in the dashboard. Server add-ons, such as file uploads, need the Server plan and must be activated for the project. On the live site they run only on the domain in the project settings. See Connect the Webflow project.

3. Webflow

• The script. The loader is in the site’s head code, and SmootifyUserOptions, if you use it, comes before it. See Install Smootify 2.0.
• The template page URLs. If a Collection URL is not products, collections or vendors, the matching option (productsBase, collectionsBase, vendorsBase) is set. Otherwise links in the cart and in search results lead to a 404 page. See CMS collections and sync.
• The custom domain. It is connected to the Webflow site, and only to Webflow.
• Cookie consent, on every site. Smootify does not add Shopify’s cookie banner: design one with smootify-consent and put it in a Component every page uses, such as the footer. Add it even if you do not sell in Europe: it shows only to visitors of the regions where Shopify says consent is needed, and stays hidden for everyone else. See Cookie consent.
• Analytics. The tracking pixels are set in SmootifyUserOptions.analytics, and removed from Webflow’s integrations and from your custom code, so each pixel loads once and waits for consent. See Analytics and pixels.
• Search engines, speed and accessibility. The SEO settings of the template pages are bound to CMS fields, and the images Smootify fills have a size. See SEO and structured data, Performance and Accessibility.

4. Test the store on .webflow.io

Publish to your .webflow.io address. Press Alt+⇧ Shift+D (⌥ Option+⇧ Shift+D on a Mac) to turn on Smootify’s debugger. On a phone, add ?smootify-debug to the address. Its Checks tab lists markup Smootify cannot use, keys that are missing, pixels loaded twice, and a trial that is about to end. Work through it until it is clean. See The debugger.

Then go through the store as a customer:

• A product page: options, prices, add to cart, buy now.
• A collection or search page: filters, sorting, pagination.
• The cart: quantities, discount codes, the checkout button.
• Login and the account pages, if the store has them.
• Pages with your own scripts: no errors in the browser console.
• Social media: if you sell through them, open a product link from Instagram on an iPhone.

5. Place a test order

Use Shopify’s test payments to place an order from the site. Then check two things:

• the order confirmation email arrives;
• in Shopify, the order shows the name of your Headless storefront as its sales channel.

Both prove that the project uses the Headless token.

6. Publish to the custom domain

Publish the site to your custom domain and open it:

• no Smootify banner shows;
• the cart opens, and the checkout opens on your checkout sub-domain;
• login works, if the store has accounts.

The debugger does not run on the custom domain, so fix what you find on .webflow.io and publish again. After a change in the Smootify dashboard, publish the site again and reload the page twice: the browser keeps the previous project settings for one visit.

Where people get stuck