Build a Liquid theme

A Liquid theme writes each section as an index.liquid file, in Shopify-style syntax. No JavaScript needed.

Real example: Noir in templates/themes/noir/.

The folder

my-theme/
├── theme.json              # "runtime": "liquid"
├── index.html
├── config/  groups/  templates/  public/
├── snippets/
│   └── icon.liquid         # reused with {% render 'icon' %}
└── src/
    └── sections/
        └── cta-banner/
            ├── index.liquid  # the design
            ├── index.ts      # optional script
            └── schema.json

Steps

Write theme.json

theme.json

{
  "engine": "join-markt/v2",
  "id": "my-theme",
  "name": "My Theme",
  "version": "1.0.0",
  "runtime": "liquid"
}

Write index.html

The same file as in React. It must load /src/platform/entry.tsx.

Add a section

schema.json is the same as in React. The design:

src/sections/cta-banner/index.liquid

<div class="cta">
  {%- if settings.heading != blank -%}
    <h2>{{ settings.heading }}</h2>
  {%- endif -%}
  {%- if settings.text != blank -%}
    <p>{{ settings.text }}</p>
  {%- endif -%}
  {%- if settings.button_label != blank and settings.button_url != blank -%}
    <a href="{{ settings.button_url | url }}" class="btn">{{ settings.button_label }}</a>
  {%- endif -%}
</div>

This is a cut-down copy of Noir’s real CTA banner.

Zip, upload, publish

See Upload rules.

Objects

Object	What it is
`settings`	this section’s settings
`blocks`	this section’s blocks, in order
`theme`	the theme settings (colors, fonts)
`products`	the store’s public products
`cart`	the cart
`shop`	store name, logo, links

Filters

Filter	What it does	Example
`money`	price in the store currency	`{{ product.price \| money }}`
`money_without_currency`	price, 2 decimals, no sign	`19.99`
`url`	store link that works live and in the preview	`{{ '/products' \| url }}`
`image_url`	full link to an image	`{{ settings.image \| image_url }}`
`asset_url`	link to a file in `public/`	`{{ 'logo.png' \| asset_url }}`
`handleize`	text to `a-slug-like-this`	`{{ title \| handleize }}`
`json`	value as safe JSON	`{{ product \| json }}`
`stars`	rating as ★★★★☆	`{{ 4 \| stars }}`

All standard Liquid filters work too: upcase, default, size, date and the rest.

Always pass store links through url. A bare /products link breaks inside the builder preview.

Tag	Use
`{% if %}` `{% for %}` `{% assign %}`	standard Liquid
`{% render 'name' %}`	include `snippets/name.liquid`

Add a script

Put an index.ts next to index.liquid, exporting mount(el, ctx). It runs after every render. Use it for sliders or menus.

Cart and checkout

No API calls needed. Add data-jm-* attributes, or call window.JoinMarkt:

<button data-jm-add="{{ product.id }}">Add to cart</button>
<button data-jm-add="{{ product.id }}" data-jm-buy-now>Buy now</button>
<button data-jm-cart-open>Cart</button>
<button data-jm-checkout>Checkout</button>

`window.JoinMarkt`	What it does
`cart.add(idOrSlug, { variant, quantity })`	add to cart
`cart.items`, `cart.count`, `cart.total`	read the cart
`cart.remove(lineId)`, `cart.setQuantity(lineId, n)`	change the cart
`cart.applyCoupon(code)`, `cart.removeCoupon()`	coupons
`cart.checkout()`	go to checkout
`formatPrice(amount)`	price in the buyer’s currency
`navigate(path)`	go to another page

Events on document: jm:cart when the cart changes, jm:checkout-error when checkout can’t start. All attributes: Commerce attributes.

Upload rules

What gets kept, and every error.

Commerce attributes

Add to cart from plain markup.

Start here

Build a theme

Builder

Storefront features

Help

Old Nunjucks themes

The folder

Steps

Objects

Filters

Tags

Add a script

Cart and checkout

Next

Upload rules

Commerce attributes

​The folder

​Steps

​Objects

​Filters

​Tags

​Add a script

​Cart and checkout

​Next

Upload rules

Commerce attributes

The folder

Steps

Objects

Filters

Tags

Add a script

Cart and checkout

Next