Get started

Create the project in Smootify Studio, connect Shopify, and deploy.

On this page

Install

Smootify Studio: Smootify Studio, the desktop app for Mac and Windows - what it does for an Astro site, how Claude works in it, and where each step is documented.
Create the project with Smootify Studio: Smootify Studio makes the Astro project for your site, with the loaders, the pages and the Cloudflare set-up, and updates it when the scaffold changes.
Build with Claude: Turn an annotated Figma file into the pages of your Astro project with the build skill, check the result with the Smootify MCP, and fix review notes with Iterate in Smootify Studio.
Install Smootify in Astro by hand: Add the Smootify integration to astro.config, set the options, connect the site id and check that the site runs.

Content from Shopify: Read products, collections, vendors, blogs, articles, pages and metaobjects into Astro content collections, at build time or on every request, with the fields each one has.
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.

Deploy to Cloudflare: Put the site online on Cloudflare, static or on demand, build on your computer or from GitHub, set the secrets and the domain, and keep the site up to date with Shopify's webhooks.
Send Shopify's storefront visitors to your site: Smootify's Redirect theme sends every page of the Shopify online store to the same page on your Astro site, keeps discount links and Collabs links working, and lets the dashboard read your app embeds.
SEO and structured data: How search engines see a Smootify for Astro store. Covers the Seo component, the product structured data it writes, alt texts, canonical addresses and Google Shopping.
The first load: How the build writes each page's products, prices and state into the HTML, so a first visit sends no Storefront query and the page does not move, and what still asks Shopify.
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.

The debugger: Smootify's debugger on your *.workers.dev address and the dev server - 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.