​

Build a Custom Theme

​

Choose a runtime

​

What you control vs Join Markt

• Homepage, product list, product detail, legal pages
• Navbar, footer, hero, product cards
• CSS / design tokens
• How and where products are listed (grids, carousels, featured IDs)

• Product data, stock, pricing, variants
• Checkout (/checkout/{orderId})
• Payments, delivery keys, customer portal, tickets
• Public APIs under /api/stores/by-subdomain/… and /api/v1/…

​

Quick start (Vite)

cp -r templates/markt-vite-storefront templates/my-theme
cd templates/my-theme
npm install
npm run dev

• / — homepage
• /products — catalog
• /product/:slug — product detail
• /privacy, /terms, /refunds — policies

​

Quick start (Nunjucks)

layouts/base.njk
templates/home.njk
snippets/
macros/
assets/
settings.json

{% for item in catalogItems.slice(0, 12) %}
  {% if item.kind == 'group' %}
    <a href="{{ ('/group/' ~ item.group.id) | shopUrl }}">{{ item.group.name }}</a>
  {% else %}
    {% set product = item.product %}
    <a href="{{ ('/product/' ~ product.slug) | shopUrl }}">
      <img src="{{ product.image | imageUrl }}" alt="{{ product.name }}" />
      <h3>{{ product.name }}</h3>
      {% if product.visibility == 'on-hold' %}<span>On hold</span>{% endif %}
      <span>{{ product.minPrice | formatPrice(currency) }}</span>
    </a>
  {% endif %}
{% endfor %}

{% set featured = helpers.components.products.getItemsByIds(products, ['slug-or-id-1', 'slug-or-id-2']) %}
{% for product in featured %}
  {# card markup #}
{% endfor %}

{% markt_component "navbar" %}
{% markt_snippet "meta-tags.njk" %}

​

Homepage checklist

1. Show store name / hero from store (or Visual Builder hero settings on Vite).
2. List catalog via catalogItems (groups + standalone) — not raw products alone.
3. Link product cards to /product/{slug}; group cards to /group/{id}.
4. Add to cart → platform checkout — never invent your own payment form.
5. Respect visibility (on-hold = listed, not purchasable) and stock (-1 = unlimited).
6. Wire policy pages from seller Configure — Policy & Legal Pages (Vite /privacy… vs Nunjucks /privacy-policy…).

​

Publish pipeline

1. Seller edits in Visual Builder (Vite) or Code mode / ZIP import (Nunjucks).
2. Publish builds artifacts.
3. Live site serves /markt-theme-assets/live/{revision}/….
4. Preview uses a real iframe URL + dist files — never flatten React to a static HTML snapshot.

​

Next steps

• Shortcodes & Tags
• Products & Catalog
• Policy & Legal Pages
• Nunjucks Theme Pitfalls
• Homepage & Sections
• Theme Builder