Create the project with Smootify Studio

Smootify Studio is the desktop app for Mac and Windows. For an Astro site it creates the whole project: configuration, content collections, a layout and the pages of a store. You build on it with Claude, or by hand. This page lists what Studio writes and the two ways to serve the site.

1. Create the project

In Studio, open the site and create its Astro project. Studio asks how the pages are served.

• Static (SSG) is the default: the fastest and cheapest. Every page is made ahead, at each build. A change in the store needs a new build, which automatic updates can start for you.
• On demand (ISR) is for large catalogues, or ones that change often. The product, collection and vendor pages are rendered when a visitor asks for them, and cached. With automatic updates on, they follow the store without a build.

Both run on Cloudflare. The choice sets what Studio writes into astro.config.mjs and which pages it writes: you can read the difference in Content from Shopify.

2. What Studio writes

astro.config.mjs        site, trailingSlash "always", the cloudflare adapter, smootify({ siteId })
smootify.config.mjs     siteId, country, language, metafields and routes
package.json            astro, @smootify/astro, @astrojs/cloudflare; scripts dev, build, preview, check
src/content.config.ts   products, collections (with their products) and vendors
src/live.config.ts      only in On demand: the same collections, read per request
src/layouts/Base.astro  the page shell: head slot, Smootify options, lightbox
src/pages/              home, 404, products/[slug], collections/[slug], vendors/[slug]
src/components/         your components; smootify/ holds Options, Lightbox and Slider
src/styles/             tokens.css and global.css
public/                 favicon and robots.txt

Three files carry most of the set-up:

• smootify.config.mjs is the one place with the site id, the country, the language, the list of metafields to load and the routes. The config, the collections and the layout all read it. Change a value here and nothing else.
• routes is { products: "products", collections: "collections", vendors: "vendors" }. The folders of src/pages have the same names. To use other addresses, rename the folders and the values together. The layout passes them to Smootify in the browser as productsBase, collectionsBase and vendorsBase; also pass them in the userOptions of smootify() in astro.config.mjs, so that the links drawn at build time and the sitemap use them too: see Install Smootify in Astro by hand.
• The layout passes a page’s <Seo> into the head slot. Every page has one <Seo> and nothing else writes the title, description, canonical address or JSON-LD.

The Smootify script is not in your project. The integration adds it to every page from Smootify’s CDN. It also writes sitemap.xml at build time. Your public/robots.txt is kept as it is: add the line Sitemap: https://your-domain/sitemap.xml to it, or delete the file and the integration writes one with the line. See SEO and structured data.

3. Run it

1. Install the packages. Studio uses pnpm when it is installed, and npm otherwise. From then on the lockfile decides: use the same one, and never both.
2. Run pnpm dev. The site opens at http://localhost:4321.
3. pnpm build makes dist/, pnpm preview serves it and pnpm check runs astro check.

Until the site has a domain, site is http://localhost:4321. Change it when you add the domain.

4. Update the project

When Smootify changes what Studio writes, a project made earlier is behind. Studio shows Update project. Claude does the update in a terminal, one step at a time, and each step checks the project before it changes anything. Your own pages and design stay as they are.

Updates have covered: plural page addresses, live data for On demand sites, the trailing slash, <Seo> on every page, and Cloudflare readiness (wrangler in the project, a typed worker). The number of the version the project is at is one line of smootify.config.mjs.

Before you publish