Genel ayarlar, hazır görünümler ve diller
Temanın bütün sayfalarını etkileyen ayarlar (renk, yazı tipi…), tek tıkla uygulanan hazır görünümler ve çevrilebilir tema metinleri.
ayarlar.json
Bölümün ayarı o bölümü, genel ayar bütün temayı yönetir. ayarlar.json gruplardan oluşur; ayar
türleri bölüm ayarlarıyla aynıdır, ek olarak font_picker (yazı tipi kataloğundan seçim).
[
{
"name": "Renkler",
"settings": [
{ "type": "color", "id": "vurgu", "label": "Vurgu rengi", "default": "#b8925a" }
]
},
{
"name": "Yazı",
"settings": [
{ "type": "font_picker", "id": "baslik_yazi", "label": "Başlık yazı tipi", "default": "Outfit" },
{ "type": "checkbox", "id": "golge", "label": "Kartlarda gölge", "default": true }
]
}
]Satıcı bu ayarları düzenleyicinin Tema sekmesinde görür. Şablonlarda settings.<id> olarak okunur:
{%- if settings.golge -%}<div class="kart kart--golgeli">{%- endif -%}Renk ve yazı tipi ayarları ayrıca CSS değişkeni olur — tema CSS'inde sabit renk yazma, değişkeni kullan:
| Ayar | Değişken |
|---|---|
vurgu (color) | --mk-tema-vurgu |
baslik_yazi (font_picker) | --mk-tema-baslik-yazi (ailenin CSS adı; yazı tipi sayfaya kendiliğinden yüklenir) |
.dugme { background: var(--mk-tema-vurgu); }
h1, h2 { font-family: var(--mk-tema-baslik-yazi); }Platformun renkleri (--mk-primary, --mk-text, --mk-background…) satıcının Tema ayarlarındaki ana
renklerdir; temanın kendi paletine ek olarak her zaman kullanılabilir.
Hazır görünümler
Aynı temanın renk / yazı tipi çeşitleri ayrı tema değil, hazır görünümdür. tema.jsonda en çok 5:
{
"ad": "liman", "surum": "1.0.0", "baslik": "Liman",
"hazirlar": [
{ "ad": "Gece", "ayarlar": { "vurgu": "#d4a64a", "golge": false } },
{ "ad": "Deniz", "ayarlar": { "vurgu": "#1f6f8b" } }
]
}Değerler ayarlar.jsondaki kimliklerle yazılır; olmayan kimlik yüklemede reddedilir.
Diller ve t
Temanın kendi metinleri (düğme yazıları, boş durum mesajları) şablona sabit yazılmaz: diller/<kod>.json
dosyalarından t süzgeciyle gelir. Satıcıya özel içerik (başlıklar, kampanya yazıları) ise bölüm ayarıdır.
{
"sepet": {
"bos": "Sepetiniz boş",
"adet": { "one": "{{ sayi }} ürün", "other": "{{ sayi }} ürün" }
}
}<p>{{ 'sepet.bos' | t }}</p>
<span>{{ 'sepet.adet' | t: sayi: sepet.adet }}</span>- Anahtar noktalı yoldur; bulunamazsa anahtarın kendisi basılır.
{{ ad }}yer tutucuları süzgece verilen adlı değerlerle dolar.- Değer
{ one, other }gibi bir nesneysesayiile dilin çoğul kuralı seçilir. - Dil: satıcının sitedeki etkin dili (
dil.kod), o dilde dosya yoksa temanın dili (tema.jsondil, varsayılantr). Şablondadil.kodvedil.kaynak(mağazanın kaynak dili) okunabilir.