Stil ve script
tema.css ve tema.js sayfaya kendiliğinden gelir. Renkler, yazı tipleri ve köşeler satıcının tema ayarlarından.
Kendiliğinden yüklenen dosyalar
varliklar/tema.csstemanın bir bölümü olan her sayfada<link rel="stylesheet">olarak gelir.varliklar/tema.jsaynı sayfalarda<script type="module" async>olarak gelir. Yalnız tarayıcıda çalışır.
Başka bir dosyayı (varliklar/desen.svg, varliklar/veri.json) adresiyle çağır:
<img src="{{ 'desen.svg' | asset_url }}" alt="">varliklar/'a yalnız .css, .js, .svg, .json konabilir. Fotoğraflar satıcının medya kitaplığından gelir.
Mağazanın tasarım değişkenleri
Satıcı panelde renklerini, yazı tiplerini ve köşe yuvarlaklığını seçer; bunlar sayfada CSS değişkeni olarak durur. Temanı bu değişkenlerle yazarsan satıcının seçimleri senin temana da geçer.
| Değişken | Ne |
|---|---|
--mk-primary, --mk-on-primary | Ana renk ve üstündeki yazı rengi (düğmeler) |
--mk-secondary, --mk-on-secondary | İkinci renk |
--mk-accent, --mk-on-accent | Vurgu rengi |
--mk-text, --mk-text-subtle | Yazı ve soluk yazı |
--mk-background, --mk-surface, --mk-border | Sayfa zemini, kart zemini, çizgiler |
--mk-danger, --mk-campaign, --mk-topbar | Hata, kampanya, üst şerit renkleri |
--mk-font-heading, --mk-font-body | Başlık ve metin yazı tipi |
--mk-radius-button, --mk-radius-input, --mk-radius-card, --mk-radius-image | Köşe yuvarlaklıkları |
--mk-container | İçerik genişliği |
--mk-space-xs … --mk-space-3xl | Boşluk ölçeği |
--mk-text-xs … --mk-text-5xl | Yazı boyutu ölçeği |
.kart { background: var(--mk-surface); border: 1px solid var(--mk-border); border-radius: var(--mk-radius-card); }
.kart h3 { font-family: var(--mk-font-heading); color: var(--mk-text); }Bölüm ayarından stil
Satıcının seçtiği rengi stile yazarken | renk süzgecinden geçir: yalnız geçerli renk değeri çıkar, başka CSS sızmaz.
<section style="background: {{ section.settings.zemin | renk | default: 'var(--mk-surface)' }}">Tailwind ya da başka araçlar
Derleme adımı senin bilgisayarında olur: Tailwind, Sass ya da istediğin aracı kullan, çıktısını tema.css ve
tema.js olarak pakete koy. Sunucu yalnız paketteki dosyaları sunar.