Test Shopify Butik Sitesi
Aylin K. tarafından önerildi
Müşteri (Test Shopify Müşterisi), güzellik/kozmetik kategorisindeki TouchBeauty referans temasının tasarım diline — hero banner yapısı (çift medya slot, blurred reflection, overlay desteği), product-card kart düzeni (quick-add, variant swatches, gap-style sistemi), mega-menu destekli sticky header, collection grid ve product-list section'ları — birebir yakın bir Shopify taslak teması istiyor. Referans proje incelemesinde şu kritik bileşenler tespit edildi: 1. **Header**: İki satırlı (top/bottom row), mega-menu, sticky + transparent modu, logo/arama/sepet/hesap aksiyonları — sections/header.liquid (48KB) ve snippets/header-drawer.liquid (57KB) ile kurgulanmış. 2. **Hero Banner**: Çift medya slotlu (image+video), blurred reflection, gradient overlay, mobil özel medya desteği — sections/hero.liquid (44KB). 3. **Ürün Kartı**: product-card.liquid + product-grid.liquid + quick-add snippet zinciriyle çalışıyor; quick-add modal, variant swatches, price snippet entegrasyonu var. 4. **Koleksiyon/Ürün Listesi**: sections/collection-list.liquid ve sections/product-list.liquid (27KB) ile section-list düzeni. 5. **Footer**: sections/footer.liquid + sections/footer-group.json. 6. **Mağazada Mevcut Ürünler**: 2 aktif ürün var (Klasik Keten Gömlek, ÜRÜN TEST); tema kurulduktan sonra bu ürünler hero/koleksiyon bölümlerine bağlanacak. Plan 5 somut, uzmanlığa göre ayrılmış görevden oluşmaktadır: Shopify tema kurulumu ve yapılandırması, header/navigasyon Liquid geliştirme, hero banner Liquid geliştirme, ürün kartı ve koleksiyon grid Liquid geliştirme, ve son olarak görsel tasarım/içerik entegrasyonu (placeholder görseller, renk şeması, tipografi).
Deniz Şen tarafından 09.07.2026 17:06:04 tarihinde incelendi
Önerilen Görevler
Shopify tema kurulumu ve taslak tema yapılandırması
Müşterinin Shopify mağazasında yeni bir taslak (unpublished) tema oluştur. TouchBeauty referans temasının config/settings_schema.json ve config/settings_data.json yapısını baz alarak renk şemaları (scheme-1 → scheme-5), tipografi (font-primary, font-accent, font-subheading), buton stili ve global spacing değişkenlerini tanımla. Mevcut 2 ürünü (Klasik Keten Gömlek, ÜRÜN TEST) koleksiyona bağla. Tema dosya iskeleti (layout/, templates/, sections/, snippets/, assets/, config/) dizinlerini referanstaki yapıyı yansıtacak biçimde oluştur. Taslak tema Shopify admin > Temalar > Tema Kütüphanesi'nde görünür olmalı.
Shopify Liquid header ve navigasyon bölümü geliştirme
TouchBeauty referansındaki sections/header.liquid ve snippets/header-drawer.liquid, snippets/header-actions.liquid, snippets/mega-menu-list.liquid, snippets/header-row.liquid dosyalarını model alarak müşteri temasına uyarla. Sticky header (always/scroll-up modu), logo merkezi konumlandırma, arama modalı (predictive-search entegrasyonu), cart-bubble, hesap ikonu ve mobil drawer menüsünü kur. İki satırlı header (top row + bottom navigation bar) yapısını uygula. Header'ın şeffaf (transparent) modu anasayfada aktif olacak şekilde ayarla.
Shopify Liquid hero banner bölümü geliştirme
TouchBeauty referansındaki sections/hero.liquid dosyasını esas alarak anasayfaya tam ekran hero banner section'ı ekle. Çift medya slotu (image_1 + image_2), gradient overlay, blurred reflection efekti, mobil özel medya desteği (custom_mobile_media) ve section yükseklik ayarlarını (small/medium/large/full-screen/custom) içeren yapıyı uygula. Hero içine başlık (h1/h2 text block), alt metin ve 'Alışverişe Başla' CTA butonu ekle; buton mevcut koleksiyona yönlendirilmeli. Placeholder SVG fallback'i de dahil et.
Shopify Liquid ürün kartı ve koleksiyon grid geliştirme
TouchBeauty referansındaki snippets/product-card.liquid, snippets/product-grid.liquid, snippets/quick-add.liquid, snippets/price.liquid, snippets/variant-swatches.liquid dosyalarını model alarak ürün kartı bileşenini oluştur. Kart düzeni: ürün görseli üstte, başlık + fiyat altta, hover'da quick-add butonu görünür. sections/product-list.liquid ile anasayfaya 'Öne Çıkan Ürünler' section'ı ekle; mevcut 2 ürünü bu grid'de göster. Koleksiyon sayfası (templates/collection.json) için main-collection.liquid + list-filter.liquid entegrasyonunu tamamla.
Shopify görsel tasarım, içerik entegrasyonu ve footer kurulumu
Tema genelinde güzellik/kozmetik sektörüne uygun renk paleti (pastel tonlar, krem/beyaz arka plan, soft accent renk) ve tipografi seçimini uygula; theme-styles-variables.liquid ve color-schemes.liquid bileşenlerini buna göre doldur. Anasayfaya hero için placeholder banner görseli (1920×1080, güzellik temalı) ve ürün kartları için placeholder görseller ekle. sections/footer.liquid + sections/footer-group.json ile footer'ı kur: mağaza logosu, navigasyon linkleri, sosyal medya ikonları ve telif hakkı metni. Tema önizlemesini Shopify admin'de çalıştır ve mobil/tablet/masaüstü kırılım noktalarında görsel tutarlılığı kontrol et.