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

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

After `astro build`, Smootify opens every page that was made ahead and writes into it what the page needs on its first load. The first visit then sends no Storefront query for the products on the home page, a product page or a collection page, and the page does not move when Smootify starts. This page says what is written, for which market, and what still asks Shopify.

> [!NOTE]
> This is on by default. It uses the `seed` option of `smootify()`. Pages rendered on demand are not seeded.

## 1. What the build writes

Two things, in each page:

- **The seed.** The Storefront answers for the products on the page, as JSON in two script tags: `data-smootify-products` and `data-smootify-seed`. Smootify reads them instead of asking Shopify.
- **The drawn state.** The page as Smootify would draw it at load: prices in the store’s money format, state classes such as `is-available`, variant pickers, the gallery, the quantity and the add to cart form. At load, Smootify takes over what is drawn and does not render it again.

The licence is not written into the page: Smootify always reads it from its CDN.

The build log says what it did:

```text
seed: 17 page(s) seeded, market US (primary), 3 Storefront request(s), 40 product(s), prerendered 17 page(s) (products 40, searches 6, variants 12)
```

## 2. Which products the build finds

The build reads each page’s HTML and takes the product ids from `smootify-product data-id`. So every card must carry the right id, usually `data-id={p.shopifyId}`. A card with a wrong id gets no seed.

Do not write the drawn values yourself, such as prices or a stock message. A value written by hand is a second source that drifts away from the real one.

## 3. Which market

The build seeds the store’s **primary market**: that is where a first-time visitor is. The visitor’s country is not known at build time, so the seed marks itself with `data-primary-market`, and Smootify uses it for a visitor with no country chosen.

- A visitor who chose another country goes to Shopify.
- A page with a regional language, such as `<html lang="fr-CH">`, is a page for that country: it is seeded for it.
- With `locales`, each language and market has its own page, seeded in its own market and currency.

`seed: { country, language }` sets the market by hand, but an explicit country that is not the primary serves only visitors of that country.

## 4. What still asks Shopify

- state that comes from the address: `?q=`, filters, the sort and `?page=`;
- search and discovery with `data-wait` or `selected-value` set;
- the cart and everything after a click;
- the customer: account pages, wishlist, last viewed;
- predictive search, store availability, gift rules, B2B and another country.

These are the visitor’s, so no build can know them.

## 5. Keep the seed right

- **The seed must match the runtime.** The builder comes from the same release as the script the page loads. If you set `channel`, both follow it.
- **Order of a collection.** Render the cards in the collection’s own order, which `smootifyCollections({ withProducts: true })` gives. A sort widget with `selected-value` changes it: then fetch the products with that sort.
- **Do not minify the comments.** The drawn HTML holds `<!--smootify …-->` comments. A step that removes comments after the build breaks it.
- **If the builder cannot load**, the build warns and goes on: pages are not seeded and Smootify asks Shopify at load. A Storefront error while seeding a page stops the build and names the page.

## Before you publish

> [!STUCK]
> - **A page has no `data-smootify-products`.** It renders on demand, it has no `smootify-product` with a `data-id`, or the `seed` option is `false`.
> - **A visitor still sends Storefront queries on a product page.** They picked another country, or the page is not in their market. The seed fits the primary market.
> - **The price jumps at load.** A price is written by hand. Remove the hand-written value and let the build draw it.
> - **Cards reshuffle after load.** The cards are not in the collection's order, or the page has a different `limit` than its list.
> - **The build warns that a page could not be prerendered.** The page is written with the seed only and Smootify draws it at load. Read the first message for the page.