Skip to main content

​
Liquid Theme Development

A Shoppex hosted theme is now a Liquid source package rendered by Shoppex. That means a theme is mostly:
  • .liquid layout, section, and snippet files
  • CSS and static assets
  • theme-package.json, schema.json, and settings.json
  • small markup hooks for the platform commerce runtime
Hosted storefronts use this Liquid package model end to end.

​
Theme vs SDK

Liquid theme = hosted Shoppex storefront UI. Storefront SDK = browser/headless custom storefront helper. Simple examples:
  • Use Liquid when you edit the storefront served by Shoppex on your-shop.shoppex.io or a custom domain.
  • Use the Storefront SDK when you build your own Next.js, React Native, Astro, or plain HTML storefront outside the Shoppex hosted theme runtime.

​
Runtime Shape

1

Liquid source is validated

Shoppex validates theme-package.json, declared templates, safe tags, safe URLs, and package size before publish.
2

Shoppex renders HTML

Shoppex renders pages from the validated Liquid package and the storefront data prepared for the current request.
3

The storefront is served at the edge

Shoppex routes domains, serves assets, caches live pages, and refreshes rendered HTML when needed.
4

Commerce stays platform-owned

Cart, coupons, checkout handoff, and product-form behavior run through the platform commerce runtime.

​
Start Here

Quickstart

Pull a Liquid theme locally and understand the file shape.

Hosted Theme Sync

Pull a real hosted theme, run shoppex theme dev, push a validated draft, then preview and publish.

Package Format

Required Liquid files, manifest entries, sections, snippets, assets, and block registry.

Cart & Checkout

Markup hooks for product forms, cart drawer, coupons, and hosted checkout handoff.

​
What Liquid Templates May Do

Liquid templates own presentation:
  • markup
  • CSS classes and hooks
  • Builder markers
  • light conditions such as showing or hiding a block
  • static render calls to declared snippets
Liquid templates must not own business logic:
  • no stock calculation
  • no price calculation
  • no product sorting
  • no checkout rule decisions
  • no fallback data for missing platform contracts
Simple example: 
{% if product.price_variants.size > 0 %}
  {% for variant in product.price_variants %}
    <button data-variant-id="{{ variant.id }}">{{ variant.title }}</button>
  {% endfor %}
{% endif %}
That is fine: the template displays variants already prepared by Shoppex. This is wrong: 
{% assign computed_stock = product.stock | plus: cart.reserved %}
Stock is platform data. If it is missing or wrong, fix the producer contract.