The first load

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.

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:

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