Build storefront
themes with code.

{
    "id": "developer-starter",
    "name": "Developer Starter",
    "engine": "nunjucks",
    "engine_version": "1.0",
    "context_version": "1",
    "pages": {
        "home": "templates/home.njk",
        "product": "templates/product.njk"
    },
    "page_settings": {
        "home": {
            "section_order": [
                "Header",
                "Hero",
                "Products",
                "Footer"
            ]
        },
        "product": {
            "section_order": [
                "Header",
                "Product detail",
                "Footer"
            ]
        }
    },
    "sections": {
        "Header": {
            "path": "sections/header.njk"
        },
        "Hero": {
            "path": "sections/hero.njk",
            "settings": {
                "eyebrow": "THE COLLECTION"
            }
        },
        "Products": {
            "path": "sections/products.njk",
            "settings": {
                "block_order": [
                    "Product list"
                ]
            }
        },
        "Product detail": {
            "path": "sections/product-detail.njk"
        },
        "Footer": {
            "path": "sections/footer.njk"
        }
    },
    "blocks": {
        "Product list": {
            "path": "blocks/product-list.njk",
            "settings": {
                "show_stock": true
            }
        }
    },
    "snippets": {
        "Product card": {
            "path": "snippets/product-card.njk"
        }
    },
    "settings_schema": [
        {
            "id": "accent",
            "type": "color",
            "label": "Accent color",
            "default": "#6E56CF"
        },
        {
            "id": "surface",
            "type": "color",
            "label": "Background",
            "default": "#11121A"
        },
        {
            "id": "text",
            "type": "color",
            "label": "Text color",
            "default": "#F4F4FA"
        },
        {
            "id": "hero_title",
            "type": "text",
            "label": "Hero title",
            "default": "Something worth discovering."
        },
        {
            "id": "hero_copy",
            "type": "text",
            "label": "Hero description",
            "default": "Explore our collection and find your next essential."
        },
        {
            "id": "show_description",
            "type": "checkbox",
            "label": "Show product summaries",
            "default": true
        },
        {
            "id": "card_style",
            "type": "select",
            "label": "Card style",
            "default": "bordered",
            "options": [
                {
                    "value": "bordered",
                    "label": "Bordered"
                },
                {
                    "value": "minimal",
                    "label": "Minimal"
                }
            ]
        }
    ]
}

.starter-product { padding: 40px 0 64px; }
.starter-product-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; margin: 28px 0; }
.starter-product-image { width: 100%; max-height: 440px; object-fit: contain; border-radius: 12px; }
.starter-purchase { align-self: start; border: 1px solid #ffffff25; border-radius: 12px; padding: 24px; }
.starter-purchase form { display: grid; gap: 18px; margin-bottom: 20px; }
.starter-purchase label { display: grid; gap: 6px; }
.starter-purchase select, .starter-purchase input { max-width: 100%; width: 100%; padding: 10px; color: var(--sx-text); background: var(--sx-surface); border: 1px solid #ffffff45; border-radius: 6px; }
.starter-purchase button:disabled { opacity: .5; cursor: not-allowed; }
.starter-description img { max-width: 100%; height: auto; }
@media (max-width: 700px) { .starter-product-grid { grid-template-columns: 1fr; gap: 24px; } }

.starter-theme { min-height: 100vh; background: var(--sx-surface); color: var(--sx-text); font-family: system-ui, sans-serif; line-height: 1.65; }
.starter-theme * { box-sizing: border-box; }
.starter-theme a { color: inherit; text-decoration: none; }
.starter-theme button, .starter-theme input, .starter-theme select { font: inherit; }
.starter-shell { max-width: 1120px; margin: auto; padding: 0 24px; }
.starter-header, .starter-brand, .starter-header nav, .starter-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }
.starter-header { justify-content: space-between; padding: 28px 0; border-bottom: 1px solid #ffffff20; }
.starter-brand { font-size: 20px; font-weight: 750; gap: 10px; }
.starter-header nav button { color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
.starter-hero { padding: 88px 0; max-width: 760px; }
.starter-eyebrow { color: var(--sx-accent); font-size: 12px; font-weight: 700; letter-spacing: .15em; }
.starter-hero h1 { font-size: clamp(36px, 6vw, 68px); line-height: 1.08; letter-spacing: -.045em; margin: 16px 0 24px; }
.starter-hero > p:not(.starter-eyebrow) { opacity: .8; max-width: 560px; font-size: 18px; }
.starter-button { display: inline-block; background: var(--sx-accent); color: #fff !important; padding: 12px 22px; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.starter-products { padding: 16px 0 64px; scroll-margin-top: 24px; }
.starter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.starter-card { padding: 20px; min-width: 0; border-radius: 12px; }
.starter-card--bordered { border: 1px solid #ffffff25; }
.starter-card img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.starter-card h3 { font-size: 18px; margin-bottom: 6px; overflow-wrap: anywhere; }
.starter-card p, .starter-card small { opacity: .75; }
.starter-footer { border-top: 1px solid #ffffff20; padding: 28px 0; font-size: 14px; }
.starter-footer span { margin-right: auto; }
.starter-theme a:focus-visible, .starter-theme button:focus-visible { outline: 3px solid var(--sx-accent); outline-offset: 4px; }
@media (max-width: 760px) { .starter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .starter-grid { grid-template-columns: 1fr; } .starter-shell { padding: 0 18px; } .starter-hero { padding: 52px 0; } .starter-header nav { gap: 16px; font-size: 14px; } }

<div class="starter-grid">
  {% for product in products %}
    {% render_snippet "Product card", product=product, show_stock=properties.show_stock %}
  {% else %}
    <p>No products are available yet.</p>
  {% endfor %}
</div>

<div class="sx-theme starter-theme">
  <div class="starter-shell">
    {% block content %}{% endblock %}
  </div>
</div>

{
  "catalog": {
    "title": "Explore the collection",
    "count": "{count} products"
  }
}

<footer class="starter-footer">
  <span>{{ shop.name }}</span>
  <a href="{{ routes.terms }}">Terms</a>
  {% if shop.contact_url %}<a href="{{ shop.contact_url }}">Contact</a>{% endif %}
</footer>

<header class="starter-header">
  <a class="starter-brand" href="{{ routes.home }}">
    {% if shop.logo_url %}<img src="{{ shop.logo_url }}" alt="{{ shop.name }}" width="36" height="36">{% endif %}
    <span>{{ shop.name }}</span>
  </a>
  <nav aria-label="Store navigation">
    <a href="{{ routes.home }}#products">Products</a>
    {% if shop.contact_url %}<a href="{{ shop.contact_url }}">Contact</a>{% endif %}
    <button type="button" data-sx-track-order>Track order</button>
  </nav>
</header>

<section class="starter-hero">
  <p class="starter-eyebrow">{{ settings.eyebrow }}</p>
  <h1>{{ themeProperties.hero_title }}</h1>
  <p>{{ themeProperties.hero_copy }}</p>
  <a class="starter-button" href="#products">Explore products</a>
</section>

<main class="starter-product">
  <a href="{{ routes.home }}">Back to {{ shop.name }}</a>
  <div class="starter-product-grid">
    <div>
      {% if product.image_url %}<img class="starter-product-image" src="{{ product.image_url }}" alt="{{ product.name }}" data-sx-product-image>{% endif %}
      <h1>{{ product.name }}</h1>
      <div class="starter-description">{{ product.description_html | default(product.description) }}</div>
      {% for tab in product.description_tabs %}
        <section><h2>{{ tab.title }}</h2><div>{{ tab.content_html | default(tab.content) }}</div></section>
      {% endfor %}
    </div>
    <aside class="starter-purchase">
      <h2>Make it yours</h2>
      <form data-sx-product-form data-sx-variants="{{ product.variants | dump }}">
        <label>Option
          <select name="variant" data-sx-variant>
            {% for variant in product.variants %}
              <option value="{{ variant.index }}">{{ variant.name }} - {{ variant.price_display }}</option>
            {% endfor %}
          </select>
        </label>
        <label>Quantity <input type="number" name="quantity" value="1" min="1" max="25" data-sx-quantity></label>
        <strong data-sx-total>{{ product.display_price }}</strong>
        <p data-sx-availability>{{ product.stock_label }}</p>
        <button class="starter-button" type="submit" data-sx-checkout-button>Continue to checkout</button>
      </form>
      <a href="{{ product.checkout_url }}">Open checkout directly</a>
    </aside>
  </div>
  {% if product.terms_html or product.terms %}<section><h2>Terms</h2><div>{{ product.terms_html | default(product.terms) }}</div></section>{% endif %}
  {% if product.review_count %}
    <section><h2>Customer reviews</h2>
      {% for review in product.reviews %}<article><strong>{{ review.rating }} / 5</strong><p>{{ review.comment }}</p></article>{% endfor %}
    </section>
  {% endif %}
</main>

<section id="products" class="starter-products">
  <h2>Explore the collection</h2>
  {% for block_name in settings.block_order %}
    {% render_block block_name %}
  {% endfor %}
</section>

<article class="starter-card starter-card--{{ themeProperties.card_style }}">
  <a href="{{ product.url }}">
    {% if product.image_url %}<img src="{{ product.image_url }}" alt="{{ product.name }}" loading="lazy">{% endif %}
    <h3>{{ product.name }}</h3>
    <strong>{{ product.display_price }}</strong>
  </a>
  {% if themeProperties.show_description %}<p>{{ product.description }}</p>{% endif %}
  {% if show_stock %}<small>{{ product.stock_label }}</small>{% endif %}
</article>

{% extends "layouts/base.njk" %}
{% block content %}
  {% for section_name in settings.section_order %}
    {% render_section section_name %}
  {% endfor %}
{% endblock %}

{% extends "layouts/base.njk" %}
{% block content %}
  {% for section_name in settings.section_order %}
    {% render_section section_name %}
  {% endfor %}
{% endblock %}