Store data

Scope

Global	Availability
`storefront`	Every render. The store config, below.
`theme.settings`	Every render. Theme-wide settings merged over the schema defaults.
`platform`	Every render. Runtime asset URLs. See Platform assets.
`page_seo`	Every render. `{}` or `{title, description, social_image, noindex}`.
`params`	Pages with a bracket route.
`<param>`	The same values, at the top level.
`section`	Section templates.
`block`	Block templates.

page_seo is always present, so ${ page_seo.title ?? theme.settings.title } resolves without an undefined. Components and layouts receive everything above except the page’s {sections}. In a block template, block.settings holds the block’s values and section resolves outward to the enclosing section.

`storefront`

The complete object. It contains no products, cart or user.

Field	Type	Notes
`id`	uuid
`slug`	string
`name`	string
`description`	string, null
`currency`	string	The store’s accounting currency. All prices are in it.
`presentment_rates`	object	Store currency to display currency. A currency with no live rate is absent.
`presentment_rates_json`	string	The same table pre-serialised.
`logo_url`	string
`auth_app_id`	uuid, null
`auth_service_url`	string
`theme_rev`	int, null
`remove_branding`	bool
`oauth_providers`	string[]	Enabled social logins.
`oauth_google`	bool
`oauth_github`	bool

Two fields duplicate information held elsewhere in the object:

presentment_rates_json carries the rate table pre-serialised, since Slurp has no json filter. Embed it with | js and parse it with JSON.parse.
oauth_google and oauth_github are flat booleans, since {if} cannot test array membership. oauth_providers remains the canonical list.

{if storefront.oauth_google}
  <button>Continue with Google</button>
{/if}

Fetching products

Products are not in the render context.

Server, at render
Browser

{fetch} runs during the render pass, so the HTML arrives complete. Use it for content that must be in the initial markup or indexed by a crawler.

{fetch products from "/api/products?limit=8"}
  {each product in products.items}
    <a href="/products/${ product.slug }">${ product.title }</a>
  {/each}
{/fetch}

Not available in a block template. See Sections and blocks.

The SDK is served by the platform. Calls are relative to the page.

<script>
  const { items } = await ByteSellSDK.products.list({ limit: 8 })
</script>

Use it for interactive content, for blocks, and for anything behind a buyer’s session.

Money

Prices arrive as strings, since they are decimals on the server. .toFixed() on one throws.

Context	Helper
Static Slurp	`${ price \| currency(storefront.currency) }`
Alpine, a product price	`$price(value)`
Alpine, a total	`$ccy(value)`
Alpine, a value carrying its own currency	`$ccy(value, currency)`

$ccy(value) converts from the store currency into the buyer’s display currency. $ccy(value, currency) renders as-is. Use the two-argument form for store credit, gift cards and affiliate payouts, which are already denominated. The one-argument form converts an already-converted value, and the result is silently wrong.

These helpers are defined by the theme, not the platform. See JavaScript.

Get started

Build

Ship

Reference

Scope

`storefront`

Fetching products

Money

​Scope

​storefront

​Fetching products

​Money

Scope

`storefront`

Fetching products

Money