Get started
Install Smootify 2.0, connect Shopify and Webflow, publish, and move a 1.x site.
On this page
Install
- Quick start: The whole path from a Shopify store to a published Webflow store with Smootify 2.0, one step at a time, with a link to the page that covers each step.
- Install Smootify 2.0: The one line that loads Smootify 2.0 on every page of your Webflow site, the release channels, the stylesheet, in-app browsers on iPhone and the options.
- Starter and templates: The Smootify starter project and the demo stores built on 2.0, starting from a blank site, and what to do with a site made from a 1.x template.
- Smootify Studio: Smootify Studio, the desktop app for Mac and Windows - the tabs of each site (Setup, Build, Sync, Iterate, Check), the Claude of each site and what it knows, and how review notes reach Claude.
Connect
- 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.
- Connect the Webflow project: Prepare the Webflow site, connect it to a project in the Smootify dashboard, and add the domains the Smootify licence covers.
- CMS collections and sync: The Products, Collections and Vendors collections, what the sync copies from Shopify and why variants and stock stay out, when to sync, metafields copied into CMS fields, the import and the automatic sync, and the URLs of the template pages.
Publish
- Before you publish: The checks to make before a Smootify store goes live on its custom domain, in Shopify, in the Smootify dashboard and in Webflow, and how to test the store on your .webflow.io address first.
- 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.
- Hand a project to a client: How to give a finished store to your client, in Shopify, in Webflow and in the Smootify dashboard, in the right order and without losing the connection between them.
- SEO and structured data: How search engines see a Smootify store. Covers the text and SEO settings that come from the CMS, the product structured data Smootify adds to product pages, alt texts, and Google Shopping.
- Performance: What Smootify loads on a page and when, what it does by itself to make pages feel fast, and what you control as a designer, from image sizes to loading placeholders.
- Accessibility: What Smootify tells screen readers about the parts it renders, such as the chosen option, a value that cannot be bought or a form error, and what stays with your design, from real buttons and labels to contrast and focus styles.
Move from 1.x
- Move a site from 1.x: The steps to move a Webflow site from Smootify 1.x to 2.0 - customer accounts, the new script on your .webflow.io address, the options and markup to update, your own scripts, going live and going back.
- What changes for your site: What Smootify 2.0 removed and what replaces it, the new URL defaults, what is deprecated but still works, and what behaves differently on the page, for designers moving a 1.x site.
- What 2.0 fixes: The Smootify 1.x bugs that 2.0 corrects - cart totals and discounts, unit prices, dates, weights, countdowns, subscriptions, large products, interactions, add-ons, analytics and in-app browsers on iPhone.
Debug
- The debugger: Smootify's debugger on your .webflow.io address - how to turn it on, what its panel shows, what the status of each element means and what its checks point out.
- Troubleshooting: The usual reasons why something does not show or does not work on a Smootify site, grouped by area, each with the page that fixes it.