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

Status: Ready (Smootify 2.0)  
URL: https://www.smootify.io/docs/astro/start/studio-scaffold  
Updated: 2026-10-21

[Smootify Studio](https://www.smootify.io/desktop-app) 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.

> [!NOTE]
> Studio uses your own Claude Code, on your Claude account. Creating the project does not need it. Building the pages from your design, and updating the project, do.

## 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](https://www.smootify.io/docs/astro/start/content).

## 2. What Studio writes

```text
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](https://www.smootify.io/docs/astro/start/install#4-options).
- **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](https://www.smootify.io/docs/astro/start/seo).

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

> [!STUCK]
> - **The site does not start.** Install the packages first, with the package manager of the lockfile. A project with both `pnpm-lock.yaml` and `package-lock.json` is out of step: keep one.
> - **A page is not found at `/product/…`.** The default folders are plural. Rename the folder, or change `routes` and the folder together.
> - **Canonical links point to `localhost`.** `site` is still the placeholder. Set the real address.
> - **A metafield is empty.** The loader loads only the metafields listed in `smootify.config.mjs`, and Shopify must give the definition Storefront access.
> - **Studio offers Update project on a project that works.** It is behind by one or more steps. Run it: each step is safe to repeat.