Skip to main content

Nunjucks Design

Nunjucks only.njk + settings.json + assets/. For React / Visual Builder, open Vite Design. Join Markt does not parse Liquid.

What you design

Import with Code / ZIP, not Visual Builder.

Folder shape


Routes (Nunjucks URLs)

Do not use Vite paths (/privacy, /refunds) or wrong names (privacy.njk, refunds.njk).

Design rules

  1. Extend layouts/base.njk and fill the content block
  2. Build links with the shopUrl filter
  3. Load CSS/JS with the assetUrl filter
  4. Card price = minPrice / maxPrice + formatPrice
  5. Homepage grid = catalogItems (groups first)
  6. On-hold when product.visibility equals on-hold
  7. Policy body from store.policies.privacy / terms / refund
  8. autoescape is off — read Nunjucks Pitfalls before shipping
  9. Cart: lean API lines with productId, variantId, quantity

Policy page example

Footer links (inside templates):
Full policy map: Policy Pages.

Homepage grid example

Tags: markt_component, markt_snippetShortcodes & Tags.

Next