Başlarken

Hoş geldiniz. Bu sayfa vitrin temalarının kurulumunu, ayarlanmasını ve özelleştirilmesini anlatır. Baştan sona okumanız gerekmez; gezinme listesinden aradığınız bölüme geçebilirsiniz.

Vitrin, mağazanızın müşteriye görünen yüzüdür. Panel tarafı (/admin) temadan bağımsızdır: hangi temayı seçerseniz seçin yönetim ekranları değişmez. Bu bilinçli bir sınırdır — bir tema, mağaza sahibinin kendi panelini yeniden yazamaz.

Kurulu tema33

Ayarlanabilir jeton12

Gerekli JavaScriptYok

Temalar: canlı demolar · tema pazarı

Sistem gereksinimleri

Vitrinin çalışması için sunucunuzun karşılaması gerekenler:

PHP 8.2 veya üzeri
Laravel 11 çalıştırabilen bir web sunucusu (nginx ya da Apache)
MySQL 8 veya MariaDB 10.6 ve üzeri
HTTPS (SSL) sertifikası — ödeme adımı için zorunlu
storage/ ve bootstrap/cache/ dizinlerine yazma izni
php artisan storage:link ile kurulmuş depo bağlantısı

Önemli not

Vitrin sayfaları tema önbelleğini kullanır. Sunucuda config:cache açıksa yeni bir tema ekledikten sonra önbelleği tazelemeniz gerekir; aksi hâlde tema listede görünmez. Bu, bu depoda birkaç kez yaşanmış bir tuzaktır.

php artisan config:clear
php artisan view:clear
php artisan tema:vitrin-esitle

Pakette neler var

Bir tema tek bir dosya değildir. Kurulu her tema üç parçadan oluşur ve üçü de bulunmak zorundadır:

resources/themes/<anahtar>.php — tema tanımı: ad, açıklama, 12 jeton, yazı tipi çifti.
public/css/themes/<anahtar>.css — temanın tam stil dosyası. shop.css yüklenmez; bu dosya her şeyi kendisi çizer.
resources/views/themes/<anahtar>/shop/ — temanın kendi Blade iskeleti.

Blade iskeletinin en az kapsaması gerekenler

layouts/app.blade.php
partials/header.blade.php
partials/footer.blade.php
partials/product-card.blade.php
home.blade.php, category.blade.php, product.blade.php

Bunların dışındaki her görünüm çekirdeğe düşer — temanın çekirdekteki her dosyayı kopyalaması gerekmez.

Tema kurulumu

Üç parçayı yerine koyduktan sonra temayı katalogla eşitleyin:

php artisan tema:vitrin-esitle

Komut, resources/themes/ içindeki tanımları okur ve tema mağazası kataloğunu günceller. Ne yazacağını önce görmek isterseniz:

php artisan tema:vitrin-esitle --kuru-calisma

Sıralama önemli

Önce dosyalar, sonra eşitleme. Ters sırada çalıştırılırsa katalogda anahtarı olan ama dosyası olmayan bir kayıt kalır ve önizleme 500 döner.
Yayına almadan önce ?tema=<anahtar> ile mutlaka bakın.

Temayı önizleme

Herhangi bir vitrin adresine ?tema=<anahtar> eklediğinizde sayfa o temayla çizilir:

https://docs.cea.net.tr/?tema=ufuk

Önizleme yalnız o istek için geçerlidir; canlı mağazanın teması değişmez.
Oturum gerektirmez — bağlantıyı müşterinize ya da tasarımcınıza gönderebilirsiniz.
Sayfanın en üstünde turuncu bir önizleme şeridi çıkar; gerçek ziyaretçi bunu görmez.

Tema jetonları

Her temanın 12 ayarlanabilir jetonu vardır. Panelden değiştirdiğiniz değer temanın :root bloğunu ezer; böylece temanın kodunu açmadan renk, yarıçap ve genişlik ayarlayabilirsiniz.

Jeton	Ne yapar	Örnek
`--primary`	Ana marka rengi: düğme zemini, etkin bağlantı	`#1565c0`
`--accent`	Vurgu: indirim rozeti, uyarı, "yeni" etiketi	`#b3261e`
`--title`	Başlık metni rengi	`#1b1b1f`
`--text`	Gövde metni rengi	`#222222`
`--page-bg`	Sayfa zemini	`#f0f1f2`
`--card-bg`	Kart zemini	`#ffffff`
`--border`	Çizgi ve çerçeve rengi	`#e3e5e7`
`--radius`	Genel köşe yarıçapı	`20px`
`--card-radius`	Kart köşe yarıçapı	`20px`
`--btn-radius`	Düğme köşe yarıçapı	`20px`
`--font-scale`	Tüm yazı boylarının çarpanı	`1`
`--container`	İçerik kapsayıcısının en büyük genişliği	`1400px`

Jeton değerleri süzülür

Panelden gelen değer doğrudan CSS'e yazılmaz. Beyaz liste dışındaki jetonlar atılır, --radius: 9999 gibi birimsiz sayılara px eklenir, virgüllü ondalık noktaya çevrilir ve red; } body { display: none gibi kaçış denemeleri reddedilir. Bu davranış testle ölçülür.

Görünüm ezmesi

Tema, çekirdek vitrin görünümlerini birebir aynı yolu taklit ederek ezer:

resources/views/shop/home.blade.php                 ← çekirdek
resources/views/themes/ufuk/shop/home.blade.php     ← ufuk teması bunu basar

Dosya varsa temanınki basılır, yoksa çekirdeğe düşülür. Yedek otomatiktir.

Ezilemeyen kökler

Ad kökü	Durum
`shop.*`	Ezilebilir — tek desteklenen kök
`admin.`, `crm.`, `panel.*`	Asla ezilemez
diğerleri (`errors.`, `mail::`)	Ezilemez

Koruma ad başına değil, çizim başına işler: panel ekranı çizilirken tema hiçbir vitrin parçasını ezemez. Yani tema shop/partials/icon.blade.php gibi panelin de kullandığı bir parçayı ezebilir — ama ezme yalnız vitrinde geçerlidir.

Modül bağlantı noktaları

En sık yapılan hata. Görünüm ezmesi tam yer değiştirmedir: temanın dosyası çekirdeğin yerine geçer, içindeki @includeIf satırları da gitmiş olur. Modül sessizce kaybolur — hata çıkmaz, ekranda hiçbir şey görünmez.

Bir çekirdek görünümü ezerken içindeki bütün @includeIf satırlarını kopyalayın. Sık unutulanlar:

Görünüm	Bağlantı noktası	Kaybolan
`shop/product`	`product-addons`	Ücretli ek hizmet formu
`shop/product`	`product-sticky-bar`	Yapışkan satın alma çubuğu
`shop/product`	`product-subscription`	Abonelik kutusu
`shop/product`	`product-kombin`	Kombin / koleksiyon bölümü
`shop/product`	`product-freshness`	Parti / SKT tazelik bilgisi
`shop/cart`	`cart-item-addons`	Sepet satırının ek hizmet dökümü
`shop/cart`	`exit-offer`	Çıkış teklifi
`shop/checkout`	`delivery-slot`	Teslimat slotu seçimi
`shop/checkout`	`gift-fields`	Hediye notu alanları
`shop/order-success`	`digital-downloads`	Satın alınan dosyanın indirme bağlantısı

Son satır özellikle önemlidir: kaybolduğunda müşteri parasını öder ama dosyasını indiremez.

Yazı tipleri

Yazı tipleri yereldir: Google'a hiçbir istek gitmez. Her aile resources/fonts/<slug>/ altında durur ve resources/fonts/yazi-tipleri.json künyesinde kayıtlıdır (sha256, bayt sayısı, unicode-range, stil).

Tema tanımındaki fonts dizisinde sıra bağlayıcıdır:

'fonts' => ['Sora', 'Inter'],
//            ↑ başlık   ↑ gövde

Yeni bir aile ekledikten sonra yayınlayın:

php artisan cea:varlik-yayinla

Komut kaynak dosyaları public/fonts/ altına kopyalar. Ön yükleme <slug>-400-<altküme>.woff2 adını arar; dosyanız bu kalıba uymuyorsa ön yükleme sessizce atlanır ve ilk boyamada yedek yazı tipi görünür.

Görseller ve sürümleme

Tema Blade dosyalarında görsel adresini elle yazmayın. İki yardımcı var ve ikisi de dosyanın değişiklik zamanını ?v= olarak ekler:

Yardımcı	Nerede
`Varlik::surumlu('css/…')`	`public/` altındaki dosyalar
`Varlik::depo('urunler/…')`	`storage/app/public` altındaki yüklenenler

Sürümsüz asset() çağrısı Cloudflare'in eski dosyayı sunmasına yol açar. Ürün fotoğrafını değiştiren mağaza sahibi günlerce eski görseli görür.

Biçim ve boyut

Vitrin görselleri WebP olarak saklanır. Aynı çekimin kart ve telefon türevleri tek komutta üretilir — ayrı betiklerde tutulursa biri geride kalır; bu depoda dokuz tema boyunca görselsiz kalan bir sayfa bu yüzden oluşmuştu.

Vitrin ayarları

Tema kodunda sabit metin ve sabit sayı yazmayın. Vitrinin gösterdiği vaatler ayarlardan okunur; böylece mağaza sahibi panelden değiştirdiğinde tema da değişir.

Ayar	Nerede görünür
`store_name`	Logo, sekme başlığı, alt bilgi
`store_phone`	Başlık, iletişim, WhatsApp bağlantısı
`free_shipping_over`	Duyuru şeridi, sepet ilerleme çubuğu

Para ve büyük harf

Fiyatı Money::vitrin() ile basın — biçim, ayraç ve simge tek yerden gelir.
Büyük harf için Metin::buyuk() kullanın. CSS text-transform: uppercase Türkçe "i" harfini yanlış çevirir: "ipek" → "IPEK" olur, "İPEK" olmaz.

Başlık ve alt bilgi

Başlık ve alt bilgi temanın partials/header.blade.php ve partials/footer.blade.php dosyalarındadır. Her tema kendi düzenini getirir; kurulu 33 tema 33 farklı başlık düzeni demektir.

Kendi düzeninizi yazarken korumanız gerekenler:

<meta name="csrf-token"> — modüller okuyor
shop.partials.seo-head — kanonik adres, Open Graph, yapısal veri
@stack('head') ve @stack('scripts')
shop.partials.theme-preview — önizleme şeridi
Çerez rıza bandı — KVKK gereği

Bunlardan biri düşerse sayfa çalışmaya devam eder ama SEO, ölçüm ya da yasal uyum sessizce kaybolur.

Blog

Blog listesi ve yazı sayfası da shop.* kökündedir, yani tema tarafından ezilebilir:

resources/views/themes/<anahtar>/shop/blog.blade.php
resources/views/themes/<anahtar>/shop/post.blade.php

Yazı gövdesi .prose sınıfıyla çizilir. Temanız shop.css yüklemediği için bu sınıfı kendi stil dosyasında yeniden tanımlamak zorundadır — aksi hâlde blog yazısı başlıksız, listesiz, boşluksuz düz metin olarak çıkar.

Aynı kural düğme, form alanı, uyarı kutusu, sepet satırı, ödeme adımı, sayfalama ve veri tablosu için de geçerlidir. Temanın çizmediği her ortak sınıf, temanın ezmediği sayfalarda stilsiz görünür.

Erişilebilirlik ve hız

Metin/zemin karşıtlığı en az 4,5:1 olmalı (WCAG 1.4.3).
Odak halkası görünür kalmalı; outline: none yazıyorsanız yerine başka bir gösterge koyun.
Yapışkan başlık, çapa hedefini örtmemeli (WCAG 2.4.11).
prefers-reduced-motion altında hareketi durdurun.
Kartın tamamını tek bir <a> yapmayın: bağlantının erişilebilir adı yüzlerce karakter olur ve ekran okuyucuda okunamaz. Başlığa gerilmiş bağlantı uygulayın.
İlk ekrandaki görsele fetchpriority="high", alttakilere loading="lazy" verin.

Sorun giderme

Belirti	Sebep	Çözüm
Tema listede yok	Katalog eşitlenmemiş ya da config önbelleği eski	`config:clear` + `tema:vitrin-esitle`
Sayfa stilsiz	Tema CSS dosyası ortak sınıfları çizmiyor	Düğme, form, uyarı, prose bloklarını ekleyin
Modül kayboldu	Ezilen görünümdeki `@includeIf` kopyalanmamış	Çekirdek dosyayla satır satır karşılaştırın
Eski görsel görünüyor	Sürümsüz `asset()`	`Varlik::depo()` / `Varlik::surumlu()`
Yazı tipi geç geliyor	Ön yükleme adı kalıba uymuyor	Dosyayı `<slug>-400-<altküme>.woff2` olarak adlandırın
Sayfa yana kayıyor	Yatay kaydırıcıda `position: relative` yok	Kaydırıcıya `position: relative` verin
Başlık istenen boya ulaşmıyor	`clamp()` orta değeri hedef genişlikte küçük kalıyor	Orta değeri hedef genişlikte hesaplayın
Türkçe büyük harf bozuk	CSS `text-transform`	`Metin::buyuk()`

Yardım gerekiyor mu?

Aradığınızı bulamadıysanız ya da temayı markanıza uyarlamak istiyorsanız yazın; kurulumu, tasarımı ve hız iyileştirmesini birlikte planlayalım.

İletişim sayfası · Sık sorulan sorular · Tema demoları