2.0 Beta

Smootify 2.0 is in public beta. Your 1.x store keeps working. Move when you want.

What changed
Log inStart free
Docs 2.0 · Astro

Astro docs.

5 sections, 424 pages. Build a Shopify store with Astro and Smootify: the project from Smootify Studio, every page of a store, every add-on, and the code you can write on top.

Start with Smootify StudioInstall by hand

Get started

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

14 pages

Build your store

One guide per page of a real store, built with Astro components.

25 pages

Features & add-ons

Boxes, add-ons, configurators, subscriptions, quotes, wishlists, markets, metaobjects, reviews and consent.

30 pages

Developers

The JavaScript API, events and filters, the Shopify AJAX API, options and CSS.

7 pages

Reference

Every element, attribute, condition, event and method of Smootify 2.0, and the HTML of the generic build.

348 pages

Start with Smootify Studio.

The desktop app for Mac and Windows takes a site from a new project to a store online, in this order.

From Studio

  1. Create the project in StudioStudio writes the whole Astro project for your site: the configuration, the content collections from Shopify, a layout and the pages of a store. You choose static pages or pages rendered on demand.
  2. Build the pages with Claude from your Figma fileEach site in Studio has a Claude of its own, opened in the project with the site’s brief. The build skill turns your annotated Figma file into components and pages, and checks them with the Smootify MCP.
  3. Review with IterateOpen the site, leave a note on what is wrong, and send the notes to Claude. It finds the cause, fixes the code and answers in each note.
  4. Deploy to Cloudflare from StudioThe Deploy tab puts the site online on Cloudflare, with Claude and your Cloudflare sign-in: the build, the secrets and the domain.
  5. Turn on automatic updatesWhen a product or a collection changes in Shopify, the site follows: a new build for a static site built from GitHub, a cache refresh for pages rendered on demand. The Deploy tab sets the webhooks it needs.

Prefer doing it by hand?

Smootify for Astro is an Astro integration, so you can add it to a project you already have, or set up each piece yourself. The deploy page lists the same steps the Deploy tab does.

Start here.

From a new project to a store online, then the pages every store has.

Quick start

  1. Create the project with Smootify StudioSmootify 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.
  2. Build with ClaudeTurn 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.
  3. Content from ShopifyRead 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.
  4. Deploy to CloudflarePut 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.
  5. Write components with Smootify elementsBuild .astro components with Smootify's elements and attributes, and the plain-HTML markup that replaces dropdowns, sliders, tabs and form messages.
  6. Build the product pageThe Shopify product on the product page of your Astro site. Covers title, price, gallery, options, add to cart and stock, and says what Smootify needs and what is up to your design.
  7. Build the cartThe cart as a page or as a mini cart that opens over the page. Covers the line template, totals, quantity and remove, the empty state, errors, checkout, and the ways a cart can open.

Popular pages

For developers.

When the components are not enough, there is an API underneath.

JavaScript API

Run your code after Smootify, call its methods, listen to its events.

Read

Filters

Change the cart lines, the checkout url or a draft order before Smootify sends them.

Read

Reference

Every element, attribute, condition, method and event of 2.0, and the HTML of the generic build.

Read

Build it in Studio.
Ship it to Cloudflare.

Studio writes the Astro project, Claude builds the pages from your Figma file, and the Deploy tab puts the store online.

Get Smootify Studio Install by hand
  • One Shopify app with 17 add-ons, on the Shopify bill
  • Free to build, pay only when you go live
  • Works on Basic, Grow and Advanced
  • Project created by Smootify Studio
  • Every component stays yours to change
  • Deployed to Cloudflare

    ↑ ↓ to moveEnter to openEsc to close