Tema Ayarları — Site, Renk, Yazı ve Genel
Tek tek bileşenleri değil, tüm mağazaya etki eden genel görünüm ayarları. Bir kez ayarlarsınız, mağazanın her sayfasına yansır.
Nerede bulunur: Üst araç çubuğundaki Tema Ayarları (palet ikonu) butonuna basınca sağ panelde açılır Kimler için: Mağazanın renk paletini, yazı tipini, logosunu ve genel görünümünü belirlemek isteyenler Kısaca: Tek tek bileşenleri değil, tüm mağazaya etki eden genel görünüm ayarları. Bir kez ayarlarsınız, mağazanın her sayfasına yansır.
Ne işe yarar?
Tema Ayarları, mağazanızın "marka kimliğini" belirlediğiniz yerdir. Tek bir bileşeni değil, mağazanın bütününü etkiler: ana renginiz ne olsun, yazılar hangi fontla görünsün, logonuz ne olsun, içerik ne kadar geniş alana yayılsın... Bunları burada bir kere ayarlarsınız ve tüm sayfalara otomatik uygulanır.
Paneli açmak için üst araç çubuğundaki Tema Ayarları (palet) butonuna basın. Panelin tepesinde Tema Ayarları başlığı ve Mağazanızın görünümünü özelleştirin açıklaması bulunur.
8 sekme
Tema Ayarları paneli üstte 8 küçük ikon-sekmeden oluşur. Bir ikonun üzerine gelince adı baloncukta çıkar:
| İkon | Sekme | İçeriği | Rehber |
|---|---|---|---|
| Site / Meta | Logo, favicon, SEO bilgileri | bu dosya | |
| Renkler | Renk paleti ve özel renkler | bu dosya | |
| Tipografi | Yazı tipi ve yazı ayarları | bu dosya | |
| Diğer | İçerik genişliği, köşe yuvarlaklığı, aralık | bu dosya | |
| Ürün | Ürün kartı ve ürün sayfası görünümü | Tema Ayarları — Ürün Görünüm Ayarları | |
| Sabit Butonlar | Köşede sabit duran iletişim butonları | Tema Ayarları — Sabit Butonlar, Davranış ve Ödeme | |
| Davranış | Yukarı çık butonu, çerez onayı, ilerleme çubuğu | Tema Ayarları — Sabit Butonlar, Davranış ve Ödeme | |
| Ödeme | Sepet/adres/ödeme sayfası düzenleri | Tema Ayarları — Sabit Butonlar, Davranış ve Ödeme |
Bu dosyada ilk dört sekmeyi (genel görünüm) anlatıyoruz. Diğer sekmeler kendi rehberlerinde detaylıdır.
Dikkat — kaydetme farkı: Bu dosyadaki dört sekmenin (Site, Renkler, Tipografi, Diğer) değişiklikleri, Yayınla'ya bastığınızda mağazaya gider. Ama Ürün ve Ödeme sekmeleri farklıdır — onlar anında kaydedilir (bkz. ilgili rehberler).
1) Site / Meta sekmesi
Mağazanızın markası ve arama motoru (SEO) bilgileri burada.
Marka
| Ayar | Ne işe yarar? |
|---|---|
| Site Logosu | Mağazanızın ana logosu — başlıkta ve genelde kullanılır. Görsel seç ile yükler, Kaldır ile silersiniz. |
| Site İkonu (Favicon) | Tarayıcı sekmesinde görünen küçücük ikon. Açıklamada belirtildiği gibi kare ve en az 64x64 piksel önerilir. |
Meta Bilgileri (SEO)
| Ayar | Ne işe yarar? |
|---|---|
| Site Başlığı | Arama motorlarında ve tarayıcı sekmesinde görünen ana başlık. Örnek: "Mağaza Adı — Kaliteli Ürünler". |
| Başlık Şablonu | Alt sayfalarda başlığın nasıl görüneceğini belirler. %s = sayfa adı, {site} = site başlığı. Örnek: "%s - {site}" → "T-Shirt - Mağaza Adı". Altında canlı bir Önizleme gösterilir. |
| Site Açıklaması | Arama sonuçlarında görünen kısa açıklama (150-160 karakter önerilir). |
| Anahtar Kelimeler | Virgülle ayrılmış anahtar kelimeler. Örnek: "ayakkabı, spor, indirim". |
Paylaşım Görseli
| Ayar | Ne işe yarar? |
|---|---|
| Paylaşım Görseli (OG Image) | Mağazanızın linki sosyal medyada (WhatsApp, Facebook, X) paylaşılınca görünen görsel. 1200x630 piksel önerilir. |
İpucu: İyi bir favicon ve paylaşım görseli, mağazanızın profesyonel görünmesini sağlar. Linkinizi birine WhatsApp'tan attığınızda çıkan görsel, ilk izlenimi belirler.
2) Renkler sekmesi
Mağazanızın renk dünyasını burada belirlersiniz.
Dark Mode (Koyu Mod)
En üstte bir Dark Mode anahtarı vardır. Açarsanız mağazanız koyu (gece) temayla görünür. Kapalıysa açık (gündüz) tema kullanılır.
Renk Paletleri (hazır paletler)
Renk Paletleri başlığı altında, ikişerli kutucuklar halinde 40'tan fazla hazır renk paleti bulunur. Her kutucukta o paletin 4 ana rengi (Birincil, İkincil, Vurgu, Arka Plan) küçük kareler olarak görünür. Bir paletin üzerindeki bilgi (ⓘ) simgesine gelince o paletin kısa açıklaması çıkar (örn. "Doğal yeşil, organik ürünlere ideal").
Bir palete tıklarsanız mağazanızın tüm renkleri o palete göre anında değişir. Seçili palet bir onay işaretiyle () belirir.
İpucu: İşinizin karakterine uygun bir palet seçin — örneğin kozmetik için yumuşak pembe tonlar, organik gıda için yeşil tonlar. Hazır paletle başlamak, sıfırdan renk seçmekten çok daha hızlı ve uyumludur.
Özel Renkler
Özel Renkler başlığı altında renkleri tek tek elle ayarlayabilirsiniz. Her renk satırında, rengin adı (örn. Birincil) ve mevcut renk kodu görünür; üstüne tıklayınca bir renk seçici açılır.
Başlangıçta yalnızca temel renkler gösterilir. Başlığın yanındaki Tümü butonuna basarsanız tüm renkler (25'ten fazla) açılır; Temel ile geri sadece ana renklere dönersiniz.
Dikkat: Renkleri elle değiştirirken aşırıya kaçmayın — yazı ile arka plan arasında yeterli kontrast (fark) olmazsa yazılar okunmaz hale gelir. Hazır bir palet seçip üzerinde küçük dokunuşlar yapmak en güvenli yöntemdir.
3) Tipografi sekmesi
Yazıların görünümünü burada ayarlarsınız.
| Ayar | Ne işe yarar? |
|---|---|
| Yazı Tipi | Mağazanın ana fontu. Butona basınca bir font seçme penceresi açılır; seçtiğiniz font önizlemede hemen görünür. |
| Yazı Boyutu | Genel yazı büyüklüğü (12–24 piksel arası kaydırıcı). |
| Yazı Kalınlığı | Yazıların kalınlığı (300 ince — 800 kalın arası). |
| Satır Yüksekliği | Satırlar arasındaki dikey boşluk (1–2.5 arası). Yüksek değer yazıyı daha "havadar" yapar. |
| Harf Aralığı | Harfler arasındaki yatay boşluk. |
En altta bir Önizleme kutusu vardır; Mağazanızın teması bu fontla görünecek. örnek cümlesini, seçtiğiniz ayarlarla canlı gösterir.
İpucu: Okunabilirlik her şeyden önemlidir. Çok süslü fontları yalnızca başlıklarda kullanmak, gövde yazısını sade tutmak iyi sonuç verir. Önizleme kutusunda yazının rahat okunup okunmadığını kontrol edin.
4) Diğer sekmesi
Sayfanın genel ölçü ve boşluk ayarları burada.
İçerik Genişliği (Container)
İçeriğinizin sayfada ne kadar geniş alana yayılacağını seçersiniz:
| Seçenek | Genişlik |
|---|---|
| Varsayılan | 1400 piksel (çoğu mağaza için ideal) |
| Geniş | 1920 piksel (daha ferah, büyük ekranlar için) |
| Tam Genişlik | %100 (kenardan kenara) |
Kenar Yuvarlağı & Aralık
| Ayar | Ne işe yarar? |
|---|---|
| Border Radius (Köşe Yuvarlaklığı) | Butonların, kartların köşelerinin ne kadar yuvarlak olacağı. Kaydırıcının altında hazır hızlı seçenekler (0 – 1) de vardır. |
| Spacing (Aralık) | Öğeler arasındaki genel boşluk ölçeği. |
İpucu: Köşe Yuvarlaklığı mağazanızın "hissini" belirler: 0 değeri keskin/kurumsal, yüksek değer yumuşak/samimi bir görünüm verir. Tek bir ayarla tüm butonlarınızın ve kartlarınızın stili tutarlı şekilde değişir.
Sık sorulan
S: Renk paletini değiştirdim ama bazı bileşenlerin rengi değişmedi. C: O bileşenlere muhtemelen elle (sabit) renk vermişsinizdir. Tema rengiyle birlikte değişmesini istiyorsanız, bileşenin renk ayarında sabit renk yerine Değişkenler (tema renkleri: Birincil, Vurgu vb.) seçeneğini kullanın.
S: Logomu yükledim ama mağazada görünmüyor. C: Logo değişikliği bir tema ayarıdır; mağazada görünmesi için Yayınla'ya basmanız gerekir. Ayrıca menünüzün (Üst Yapı) logo bloğunun "site logosunu kullan" ayarında olduğundan emin olun.
S: Hangi renk hangisi (Birincil, Vurgu...) emin değilim. C: Genel kural: Birincil ana marka renginizdir (butonlar, vurgular). Vurgu ikincil bir öne çıkarma rengidir. Arka Plan sayfanın zeminidir. Emin değilseniz hazır bir palet seçin; tüm bu renkler uyumlu şekilde otomatik ayarlanır.