Write your first theme
This guide builds the smallest working Zone theme: one layout, one JSON template, one section, one snippet, one setting and one locale file. The files below and the output at the bottom are generated from the example theme in the Stokzone repository; the output is the HTML the engine actually renders from these files.
1. Write the layout
The layout wraps every page. The body is placed with content_for_layout; the stylesheet is linked with asset_url and stylesheet_tag; settings reads a theme setting and the t filter reads a translation.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>{{ page_title }}</title>
{{ 'tema.css' | asset_url | stylesheet_tag }}
</head>
<body style="--vurgu: {{ settings.vurgu_rengi }}">
<main>{{ content_for_layout }}</main>
<footer>{{ 'genel.telif' | t: magaza: shop.name }}</footer>
</body>
</html>
2. Define the home page template
The JSON template says which section is rendered on the home page, with which settings and blocks. The visual editor edits exactly this file.
{
"sections": {
"karsilama-1": {
"type": "karsilama",
"settings": { "baslik": "İlk Zone temam" },
"blocks": {
"madde-1": { "type": "madde", "settings": { "metin": "Hızlı kargo" } },
"madde-2": { "type": "madde", "settings": { "metin": "Güvenli ödeme" } }
},
"block_order": ["madde-1", "madde-2"]
}
},
"order": ["karsilama-1"]
}
3. Write the section
The section reads its settings through section.settings and its blocks through section.blocks. The schema at the end of the file defines the settings and block type shown in the editor; the preset puts the section into the Add section list.
<section class="karsilama">
<h1>{{ section.settings.baslik }}</h1>
{% if section.settings.alt_yazi_goster %}
<p>{{ 'karsilama.alt_yazi' | t }}</p>
{% endif %}
<ul>
{% for block in section.blocks %}
{% render 'madde', metin: block.settings.metin %}
{% endfor %}
</ul>
</section>
{% schema %}
{
"name": "Karşılama",
"max_blocks": 6,
"settings": [
{ "type": "text", "id": "baslik", "label": "Başlık", "default": "Hoş geldiniz" },
{ "type": "checkbox", "id": "alt_yazi_goster", "label": "Alt yazıyı göster", "default": true }
],
"blocks": [
{
"type": "madde",
"name": "Madde",
"settings": [
{ "type": "text", "id": "metin", "label": "Metin", "default": "Yeni madde" }
]
}
],
"presets": [
{ "name": "Karşılama" }
]
}
{% endschema %}
4. Write the snippet
A snippet is called with the render tag and only sees the variables passed to it.
<li class="madde">{{ metin | escape }}</li>
5. Add the theme setting
The settings schema defines an accent colour the merchant can change in the editor; its default is used when nothing has been chosen.
[
{ "name": "theme_info", "theme_name": "İlk Tema", "theme_version": "1.0.0" },
{
"name": "Renkler",
"settings": [
{ "type": "color", "id": "vurgu_rengi", "label": "Vurgu rengi", "default": "#00fdc7" }
]
}
]
6. Add the translations
The base locale file ends in .default.json. A variable is written in double curly braces.
{
"genel": { "telif": "© {{ magaza }} — Zone ile çizildi" },
"karsilama": { "alt_yazi": "Bu sayfa en küçük örnek temadan çiziliyor." }
}
7. Add the stylesheet
The stylesheet lives in the assets/ folder.
.karsilama { max-width: 40rem; margin: 3rem auto; font-family: system-ui, sans-serif; }
.karsilama h1 { border-bottom: 3px solid var(--vurgu); padding-bottom: .5rem; }
.madde { line-height: 1.8; }
Result
With the store named Örnek Mağaza, the engine renders the home page like this. The wrapper carrying the section id is added by the engine.
<!doctype html>
<html lang="tr">
<head>
<meta charset="utf-8">
<title>Örnek Mağaza</title>
<link href="/assets/tema.css" rel="stylesheet" type="text/css">
</head>
<body style="--vurgu: #00fdc7">
<main><div id="stokzone-section-karsilama-1" class="stokzone-section"><section class="karsilama">
<h1>İlk Zone temam</h1>
<p>Bu sayfa en küçük örnek temadan çiziliyor.</p>
<ul>
<li class="madde">Hızlı kargo</li>
<li class="madde">Güvenli ödeme</li>
</ul>
</section>
</div></main>
<footer>© Örnek Mağaza — Zone ile çizildi</footer>
</body>
</html>
Create the files in the panel's theme code editor, on a theme copy that is not published; you will see them in the preview as you save. For the next step, continue to the Theme Architecture and Section & Block Schema pages.