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:

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. Mağazanızda iki ayrı yazı tipi kullanabilirsiniz: biri başlıklar, biri gövde metni için.

Yazı tipi çiftleri

Sekmenin en üstünde hazır yazı tipi çiftleri vardır. Her kart, üstte başlık fontunu, altında gövde fontunu kendi yazı tipiyle gösterir; en altındaki gri yazı da çiftin adıdır (Zarif, Editoryal, Kontrast, Klasik, Teknik, Sıcak, Kurumsal, Canlı, Yumuşak, Sade). Bir karta tıkladığınızda başlık ve gövde fontu birlikte değişir. Seçili çiftin sağ üstünde işareti belirir.

Hazır çiftler bir başlangıç noktasıdır; tıkladıktan sonra alttaki iki alandan istediğinizi tek tek değiştirebilirsiniz.

Başlık ve gövde fontu

Ayar	Ne işe yarar?
Başlık Yazı Tipi	Sayfa ve bölüm başlıklarının fontu. Boş bırakırsanız kutuda "(gövde fontu) · gövde ile aynı" yazar ve başlıklar gövde fontuyla görünür. Bir font seçtiğinizde etiketin yanında Gövdeye eşitle düğmesi çıkar; ona basmak başlığı yeniden gövde fontuna döndürür.
Gövde Yazı Tipi	Paragraflar, açıklamalar, butonlar — kısaca başlık olmayan her yerin fontu.
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; üstte Başlıklar böyle görünür satırını başlık fontuyla, altta Mağazanızın teması bu fontla görünecek. satırını gövde fontuyla canlı gösterir.

Gelişmiş yazı tipi jetonları

Gelişmiş yazı tipi jetonları başlığına basınca Serif Font ve Monospace Font alanları açılır. Bunlar mağazanın genel görünümünü doğrudan değiştirmez; yalnızca bir bloğun Tipografi ayarında Serif veya Monospace seçtiğinizde o blokta kullanılırlar.

Blok ayarı mı, tema ayarı mı öncelikli?

Bir bloğun kendi Tipografi → Font ayarı, tema ayarını ezer:

Blokta Özel Font seçiliyse → o font kullanılır.
Blokta Serif / Monospace / Başlık Fontu / Gövde Fontu seçiliyse → o seçim kullanılır.
Blokta Tema (otomatik) seçiliyse (varsayılan) → alanın Etiket ayarı h1–h6 ise başlık fontu, değilse gövde fontu kullanılır.

İpucu: Bir bloğun başlığının tema başlık fontunu almasını istiyorsanız o alanın Etiket ayarının h1–h6 olduğundan emin olun. Etiketi span veya p olan alanlar bilinçli olarak gövde fontunu kullanır.

İpucu: Okunabilirlik her şeyden önemlidir. Süslü bir fontu başlıkta, sade bir fontu gövdede kullanmak en güvenli seçimdir — hazır çiftler zaten bu mantıkla hazırlanmıştır. Önizleme kutusunda yazının rahat okunup okunmadığını kontrol edin.

Not: Başlık için gövdeden farklı bir font seçtiğinizde mağazanız ikinci bir yazı tipi dosyası indirir. Tek bir font ailesi kullanmak sayfanın biraz daha hızlı açılmasını sağlar.

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.

Tema Ayarları — Site, Renk, Yazı ve Genel

Bu sayfada