Marka Teması

Marka ekranı iki şeyi tek yerden belirler. Birincisi görünüm: Selwise'in sitenizde gösterdiği her yüzeyin — kampanya, öneri kartı, arama sonucu, ürün zenginleştirme bloğu — renkleri, köşeleri ve yazı tipleri. On soru cevaplarsınız, Selwise bunlardan yirmi iki CSS değişkeni türetir. Soru sayısı sabittir: türetilen değişkenlerin bir kısmı, siz hiçbir şey yazmadan, verdiğiniz cevapların okunabilir karşılığıdır — indirim renginin üzerindeki yazı rengi ya da ikincil rengin hover hâli gibi.

İkincisi kimlik ve ses: marka adı, logo ve markanızın nasıl konuştuğu. Bunlar mağaza yüzeylerine gitmez; yapay zekâ üretimleri ve e-posta başlığı kullanır.

Panelde nerede

Sol menüde Tasarım → Marka (Design → Brand) (/dashboard/theme). Marka seçili kanala aittir: kanal seçili değilse ekran "Select a site first." (Önce bir site seçin.) der. Ekranı görmek için kanal görüntüleme, kaydetmek ve yayınlamak için kanal güncelleme yetkisi (admin) gerekir.

Ekran üç sekmeden oluşur ve sağdaki önizleme hangi sekmede olursanız olun görünür kalır:

• Colours (Renkler) — hazır başlangıç paletleri ve renk soruları, rol rol gruplanmış: ana renk, ikincil ve indirim, zemin ve metin. Her grubun altında rengin kendi örneği ve kontrast değeri durur.
• Shape & type (Biçim ve yazı tipi) — köşe stili ve iki yazı tipi.
• Identity & voice (Kimlik ve ses) — marka adı, logo ve marka sesi.

Önizleme küçük bir mağaza sayfasıdır: duyuru çubuğu, logo, arama kutusu, bir kampanya açılır penceresi, öneri şeridindeki ürün kartları, arama sonuçları ve buton durumları. Editing / Live (Düzenlenen / Yayındaki) seçimiyle yaptığınız değişikliği mağazanızın şu anki görünümüyle karşılaştırabilir, Dark storefront (Koyu mağaza) ile koyu zeminli bir mağazada nasıl göründüğüne bakabilirsiniz.

On alan

Alan	Ne yapar	Boş bırakılırsa
Brand colour (Marka rengi)	Ana marka rengi: butonlar, bağlantılar, vurgular	Tema uygulanmaz
Text on brand (Marka üzerindeki yazı)	Marka renginin üzerindeki yazı rengi	Kontrasta göre otomatik türetilir
Brand hover (Marka hover rengi)	Marka renginin üzerine gelince	Marka renginden otomatik türetilir
Secondary colour (İkincil renk)	İkincil buton rengi	Türetilmez — boş kalır
Discount colour (İndirim rengi)	İndirim rozeti ve etiketleri	Markaya yakın bir kırmızıya düşer
Text colour (Metin rengi)	Gövde metni rengi	Varsayılan
Card background (Kart zemini)	Kart, açılır pencere ve panel arka planı	Varsayılan
Corners (Köşeler)	Köşe yuvarlaklığı: Sharp / Soft / Round (Keskin / Yumuşak / Yuvarlak)	Varsayılan
Body font (Gövde yazı tipi)	Gövde yazı tipi	Sitenizin yazı tipi kullanılır
Heading font (Başlık yazı tipi)	Başlık yazı tipi	Gövde yazı tipine düşer

Boş bıraktığınız bir renk alanının yanında automatic (otomatik) yazar ve kutuda türetilen değer görünür; boş bırakmak görünür bir seçimdir.

Start from a preset (Hazır bir başlangıçtan devam edin) altındaki paletler — Monochrome (Monokrom), Warm (Sıcak), Fresh (Ferah), Bold (Çarpıcı) — yalnızca renkleri ve köşe stilini değiştirir; yazdığınız yazı tipleri ve kimlik bilgileri korunur. Bir paleti uyguladıktan hemen sonra Undo (Geri al) ile önceki renklerinize dönebilirsiniz.

Renk alanları

Colours sekmesi renkleri üç grupta toplar: Primary colour (marka rengi, üzerindeki yazı, hover), Secondary & sale (ikincil ve indirim) ve Surface & text (kart zemini ve metin; kenarlık, gölge ve soluk metin bunlardan türetilir).

• Renkler hex olarak yazılır: #e45a80 ya da kısa #e5a. Geçersiz bir değer yazarsanız "Enter a valid hex colour" der ve kaydetmeyi durdurur; yapıştırılan geçersiz bir değer atılır ve önceki değer korunur.
• Her alanın yanında renk seçici, ekrandan renk alan damlalık (Pick a colour from the screen) ve alanı temizleyen simge (Clear this field) vardır.
• Her renk çifti (zemin ve üzerindeki yazı) için Contrast değeri gösterilir (Contrast 4.8:1 — readable). WCAG AA için 4,5:1 gerekir; 3:1 ile 4,5:1 arası "readable at large sizes only", altı "this will be hard to read" der. Bu bir uyarıdır, kaydetmeyi engellemez.
• Kaydetmeyi yalnızca iki şey engeller: geçersiz bir yazı tipi adı ve geçersiz bir logo adresi. Bu durumda düğmelerin altında Fix this before saving (Kaydetmeden önce düzeltin) satırı ve ilgili sekmeye Go to the field bağlantısı çıkar.
• Sayfanın altındaki Derived values (Türetilen değerler) kutusu, yukarıdaki cevapların hangi 22 değişkene çözüldüğünü (marka, marka hover, marka üstü yazı, ikincil, metin, soluk metin, zemin, kenarlık, fiyat, indirim, köşe yarıçapı, gölge, yazı tipleri, boşluk, katman…) gösterir. Listede olmayan her değişken boş bırakılır; onu okuyacak yüzey kendi yerleşik görünümünü korur.

Marka diğer ekranlarda

Markayı yayınladıktan sonra kampanya, widget, öneri ve ürün kartı ekranlarındaki renk alanları markayı izler: alanın yanında from brand (markadan) yazar. Brand palette (Marka paleti) simgesinden bir renk seçerseniz alan markaya bağlı kalır — markayı değiştirdiğinizde o alan da değişir. Alanı elle değiştirirseniz bağ kopar; back to brand (markaya dön) bağı geri kurar. Marka yayınlanmadıysa palet boştur ("Publish a brand theme to use the palette").

Yazı tipini boş bırakmak bir özelliktir

Body font alanını boş bırakırsanız (örnek metin: "Same as my storefront") Selwise hiçbir yazı tipi dayatmaz ve widgetlar sitenizin kendi yazı tipini miras alır. Kendi marka yazı tipini kullanan mağazalar için doğru seçim budur.

Köşe stili neden piksel değil

Üç seçenek vardır ve bilinçli olarak kabadır:

Seçenek	Büyük yarıçap	Küçük yarıçap
Sharp (square)	0px	0px
Soft (soft)	8px	4px
Round (round)	16px	9999px (tam yuvarlak)

Marka bir his seçer, piksel değil. Tek tek yarıçap ayarlamak, yüzeyler arasında tutarsızlık üretmenin en kolay yoludur.

Kimlik ve ses

Alan	Ne yapar
Brand name (Marka adı)	Müşterinin bildiği ad (en fazla 80 karakter). Yapay zekâ markayı anarken tam olarak bunu yazar.
Logo	E-postaların başında varsayılan logo olur. Yapay zekâ bir açılır pencere ya da hero tasarlarken kullanabilir. Logonun hem zemin (On the surface) hem marka rengi (On the brand colour) üzerinde nasıl durduğu ekranda gösterilir. Adres http:// ya da https:// ile başlamalı, boşluk ve " ' < > içermemeli, en fazla 500 karakter olmalıdır; açılamayan bir görsel için "The image at that address could not be loaded" uyarısı çıkar.
Tone (Ton)	Friendly, Premium, Playful, Professional, Bold ya da Minimal (Samimi, Premium, Eğlenceli, Profesyonel, Cesur, Sade).
Form of address (Hitap)	Informal (sen) ya da Formal (siz). Bir kampanyanın içinde ikisinin karışması çeviri hatası gibi okunur.
Describe the brand (Markayı kısaca anlatın)	Kim olduğunuzu ve nasıl konuştuğunuzu bir iki cümleyle (en fazla 400 karakter).
Words to avoid (Kaçınılacak ifadeler)	Markanızın asla kullanmadığı kelimeler, iddialar ya da üslup (en fazla 200 karakter).
Emoji	No preference (Tercih yok), Sparingly (Ölçülü kullan) ya da Never (Hiç kullanma).

Bu bilgiler mağaza yüzeylerine CSS değişkeni olarak gitmez; widget'larınızın görünümünü değiştirmez.

Yapay zekâ markanızı nasıl kullanır

Panelin bütün yapay zekâ kapıları — Yapay Zeka Stüdyosu, kampanya formu, ürün kartı ve içerik bloğu kod düzenleyicisi, mesaj editörü ve senaryo üretimi — isteği seçili kanalın yayındaki markasıyla birlikte gönderir:

• Tasarımlarda renkler, köşeler ve yazı tipleri temel alınır; ana çağrı butonu marka rengiyle çizilir. Üretilen CSS renkleri marka değişkenleriyle ve yanlarında markanızın değeriyle yazar, örneğin var(--selwise-brand, #c93a63). Böylece markanızı sonradan değiştirdiğinizde üretilmiş tasarım da onu izler.
• Metinlerde seçtiğiniz ton ve hitap kullanılır, marka adınız yazdığınız gibi geçer; kaçınılacak ifadeler kullanılmaz.
• E-postada renkler sabit değer olarak yazılır (e-posta istemcileri CSS değişkeni okuyamaz) ve logo başlığa otomatik eklenir. SMS ve bildirimlerde yalnızca marka sesi kullanılır.
• Marka bağlayıcı ama kilitli değildir: sezona ya da kampanyaya uygun tonlar, nötrler ve vurgular eklenebilir; sonuç ise markanızın tasarımı gibi görünmelidir. İsteğinizde başka renk, yazı tipi ya da stil yazarsanız isteğiniz kazanır.
• Var olan bir tasarımı düzenletirken mevcut renkler ve yazı tipleri korunur; yeni eklenen parçalar önce mevcut koda, sonra markaya uyar.

Her yapay zekâ penceresinde markanın uygulanıp uygulanmayacağını gösteren bir satır vardır. Buradaki anahtarla markayı kapatabilirsiniz — örneğin başka bir markanın renkleriyle yapılacak ortak bir kampanya için. Seçiminiz bütün yapay zekâ pencerelerinde geçerlidir.

Taslak ve yayınlama

Tema, panelde taslağı olan tek varlıktır. Sebebi: bir tema değişikliği aynı anda her yüzeyi etkiler, dolayısıyla kaydetmekle yayınlamak ayrılmıştır. Kimlik ve ses de aynı taslağın parçasıdır.

1. Değişiklik yaparsınız — başlıkta Unsaved changes (Kaydedilmemiş değişiklik) yazar.
2. Save as draft (Taslak olarak kaydet) ile saklarsınız; başlıkta Draft — not live (Taslak — yayında değil) yazar, mağazanız değişmez.
3. Publish (Yayınla) ile canlıya alırsınız; başlıkta Live (Yayında) yazar. Yeni görünüm mağazanıza birkaç dakika içinde ulaşır.

Henüz hiç tema yoksa başlık No brand yet (Henüz marka yok) der; yayınlanacak bir değişiklik yokken Publish gri durur ("Nothing to publish").

Başlıktaki More actions (Diğer işlemler) menüsünde Discard draft (Taslağı at), Revert changes (Değişiklikleri geri al) ve Remove theme (Temayı kaldır) bulunur. Remove theme renkleri, köşeleri ve yazı tiplerini siler; marka adı, logo ve marka sesi korunur. Kaydedilmemiş değişiklikle sayfadan ayrılmaya çalışırsanız tarayıcı sizi uyarır.

Önizleme, canlıda çalışan hesaplamanın aynısını kullanır; önizlemede gördüğünüz ile yayınlanan sonuç ayrışamaz.

Tema uygulanmazsa ne olur

Her yüzey, tema değerini bir yedekle birlikte okur. Tema tanımlı değilse, bozuksa ya da desteklenmeyen bir değer içeriyorsa yüzey temalar var olmadan önceki görünümüne düşer. Yani tema uygulamak geri alınabilir bir işlemdir; hiçbir zaman bozuk bir görünüme yol açmaz.

Tema nerede geçerli değil

Üç tür alan bilinçli olarak temaya bağlanmamıştır:

• Tablo ile çözülen değerler — gölge yoğunluğu, yazı kalınlığı, hazır yarıçap seçenekleri. Bunlar bir listeden seçilir, CSS değişkeni bir liste anahtarı olamaz.
• Program tarafından işlenen renkler — örneğin arama kutusunun odak halkası, marka renginin şeffaflaştırılmış halidir; değişken üzerinden hesaplanamaz.
• Anlam taşıyan renkler — arama teriminin vurgusu, "trend" etiketinin amber rengi. Bunlar marka rengi değil, durum rengidir; markaya bağlanırsa anlamlarını kaybederler.

Sırada ne var

• Widget Stil Özelleştirme — widget bazlı geçersiz kılma.
• Ürün Kartı Stili