Kart Tasarımcısı

Kart tasarımcısı, ürün kartını kod yazmadan, öğe öğe kurmanızı sağlar. Gerçek bir mağaza kartı satır satır alan listesi değildir; görselin üstüne binen rozetler, köşedeki favori kalbi, üzerine gelince beliren sepet düğmesi, renk örnekleri, üstü çizili fiyat ve indirim etiketi gibi iç içe kutulardan oluşur. Tasarımcı bunları ifade eder.

Panelde nerede

Design → Product Cards → Create Product Card ya da var olan bir kart → editör başlığındaki Drawn by (Kartı çizen) anahtarında Designer (Tasarımcı). Tasarımcı üç sütundur: solda Layers (Katmanlar), ortada tuval, sağda seçili öğenin ayarları. Tuval, mağazadaki kartı çizen aynı motorla çizilir; bu yüzden tasarımda gördüğünüz kart mağazadaki karttır.

Tuvalde çalışmak

• Tuvaldeki herhangi bir öğeye tıklayarak katmanını seçersiniz. Katman ağacında Add element (Öğe ekle), yukarı ve aşağı taşıma, Show / hide (gizle: gizli öğe hiçbir şey üretmez), çoğaltma, silme ve başka bir kapsayıcıya sürükleme vardır. Undo ve Redo her değişikliği geri alır.
• Tuvalin üstündeki Desktop, Tablet ve Mobile düğmeleri genişliği değiştirir. Bir genişlikte yaptığınız ayar yalnızca o genişlikte geçerli olur, geri kalanı devralınır (breakpoint değerleri: tablet 1024 piksele kadar, mobil 640 piksele kadar).
• Entrance (Giriş) kartın ilk çizildiği animasyondur. Card hover (Kart üzerine gelince) tüm kartın tepkisidir. İkisi de kart düzeyindedir, öğe düzeyi değil.
• Clear design (Tasarımı temizle) kartı tasarım öncesi alan listesine döndürür; onay ister ve tasarımınız saklanmaz.
• Bir kart en fazla 200 öğe ve 8 düzey derinlik taşır; sınırda yeni öğe eklenmez ve panel bunu söyler.

Hazır tasarımlar

Yeni kart Standard ile açılır. Boş bir kartı ya da tasarımı temizledikten sonra galeriden başka bir hazır tasarım seçebilirsiniz. Bkz. Hazır Tasarımlar.

Öğe türleri

Öğe	Ne yapar
Group (Grup)	Başka öğeleri tutan esnek kutu: yön, hizalama, boşluk
Image area (Görsel alanı)	Ürün görselinin alanı. İçine koyduğunuz görsel dışındaki öğeler görselin üstüne konumlanır (rozet, kalp, hover düğmesi); konumlarını üst, sağ, alt, sol ve katman sırası ayarlarıyla verirsiniz
Image (Görsel)	Ana görsel (Main image) ya da üzerine gelince değişen ikinci görsel (Hover image). Ürün sayfasına bağlanabilir
Text (Metin)	Bir ürün alanına bağlı metin; ön ek, son ek, boş alan için yedek metin, ürün sayfasına bağlantı
Price (Fiyat)	Dört okumadan biri: Selling price (satış fiyatı), Was price (eski fiyat), Discount % (indirim yüzdesi), Amount saved (kazanç tutarı)
Button (Düğme)	Add to cart, Quick view, Go to product ya da Add to wishlist; yükleniyor, eklendi ve hata durumları için ayrı etiket, yalnızca simge seçeneği
Badge (Rozet)	Fixed text, Discount % ya da bir Product field gösteren etiket
Rating (Puan)	Yıldızlar; isteğe bağlı yorum sayısı; ölçek 3 ile 10 arası (varsayılan 5)
Colours (Renkler)	Ürünün renk kardeşleri, tıklanabilir örnekler; 1 ile 12 arası (varsayılan 6), daire ya da kare
Divider (Ayırıcı) / Space (Boşluk)	Yatay çizgi, sabit boşluk
HTML	Kendi markup'ınız; ${title} gibi yer tutucular doldurulur ve markup güvenlik temizliğinden geçer. En fazla 20.000 karakter

Çıktılar

Ayar	Çıktı örneği
Fiyat: Selling price	Para birimiyle biçimli satış fiyatı. Biçim tarayıcının dil ayarına göre değişir (ör. 899,90 ₺ ya da TRY 899.90)
Fiyat: Was price	Eski fiyat; yalnızca liste fiyatı satış fiyatından büyükse, aksi hâlde boş
Fiyat ve rozet: Discount %	-25%; liste fiyatı varsa iki fiyattan hesaplanır, yoksa beslemedeki indirim oranı. Sıfırsa hiçbir şey çizilmez
Fiyat: Amount saved	Liste fiyatı ile satış fiyatı arasındaki fark
Rating	★★★★☆; puan 0 ya da yoksa hiçbir şey çizilmez
Metin: alan boş	Fallback text (yedek metin) yazıldıysa o, yoksa öğe hiç çizilmez

Düğme davranışı

Add to cart, kanalın sepet entegrasyonuna bağlıdır. Sepet entegrasyonu kurulu değilse düğme ürün sayfasına giden bir bağlantıya düşer, yani kart yine bir yere gider. Entegrasyon için: Sepete Ekleme. Go to product ürün adresi yoksa hiç çizilmez.

Görsel ve renk örnekleri beslemenizden gelir

• Hover image beslemenizin ek görsel alanlarından (additional_image_link, images ve benzerleri) okunur; ürün başına en fazla 6 ek görsel taşınır. Besleme ek görsel vermiyorsa ya da alan eşlenmemişse o ürünlerde öğe çizilmez. Product Feeds → Alan Eşleştirme'de ek görselleri eşleyin: Alan Eşleştirme.
• Colours öğesi, bu ürünle aynı grup koduna sahip diğer ürünleri gösterir (bir besleme satırı bir üründür; bir renk kendi ürün sayfasına sahip ayrı bir üründür, bu yüzden örnek o ürünün sayfasına bağlanır). Kardeşi olmayan üründe öğe çizilmez. Bkz. Varyant Gruplama.

Koşullar: bu öğe ne zaman görünür

Visibility (Görünürlük) bölümünde Add condition ile öğeye koşul eklersiniz; tüm koşullar sağlanmazsa öğe hiç çizilmez. Bir öğede en fazla 8 koşul olabilir.

Koşul bir ürün alanı, bir türetilmiş işaret ya da attr.alan_adı biçimindeki besleme alanı üzerinde kurulur. Karşılaştırmalar: is set (dolu), is empty (boş), is true, is false, equals, is not, greater than, less than. Büyüktür ve küçüktür sayı ister; sayı girmezseniz karşılaştırma 0'a göre yapılır ve panel bunu uyarıyla söyler.

Türetilmiş işaretler ham üründen hesaplanır:

İşaret	Ne zaman doğru
isOnSale	Liste fiyatı satış fiyatından büyük (beslemenin kendi "indirimde" işaretine bakılmaz; her ürünü indirimli işaretleyen besleme -0% çıkarmasın diye)
hasDiscount	İndirimde ya da beslemedeki indirim oranı sıfırdan büyük
hasOriginalPrice	Liste fiyatı var
isOutOfStock	Stokta yok
hasRating	Puan sıfırdan büyük
hasSecondImage	Ek görsel var
hasSwatches	Renk kardeşi var (iki ya da daha çok)

Yaygın örnekler: indirim rozeti için hasDiscount is true; "Tükendi" etiketi için isOutOfStock is true; marka satırı için brand is set.

Animasyonlar

• Öğe animasyonu (Animation bölümü): Appear on hover (üzerine gelince belirir), Slide up on hover, Fade in on hover, Pulse. Hover düğmesini bu yolla saklarsınız.
• Entrance: Fade in, Slide up, Slide down, Zoom in, Blur in. Şeritteki kartlar 60 milisaniye arayla girer (en çok 8. karta kadar artar; böylece uzun bir şeritte son kart beklemez).
• Card hover: Lift, Lift (strong), Scale, Border, Glow, Zoom image, Swap image.
• Geçiş süresi tüm geçişler için milisaniyedir (0 ile 2000 arası, varsayılan 200).

Tüm animasyonlar, ziyaretçinin cihazında "hareketi azalt" ayarı açıksa kapanır.

Stil ve marka

Her öğenin biçim ayarları kırk bir özelliklik tek bir tablodan gelir: panelde bir kontrol varsa mağazada onu çizen bir kural da vardır. Tam liste: Kart Stili. Renk, köşe ve yazı tipi ayarlanmazsa marka temanızdan gelir.

Mağazada görünmüyorsa

Belirti	Sebep
"Custom HTML is overriding this design" uyarısı	Kart My own code modunda ve HTML dolu; markup tasarımı bastırır. Use the design ile tasarımı geri alın
Hover görseli yok	Beslemede ek görsel yok ya da eşlenmemiş
Renk örnekleri yok	Ürünün aynı grup kodlu kardeşi yok
Öğe hiç çizilmiyor	Koşul sağlanmıyor ya da bağlı alan o üründe boş
Eklediğiniz öğe uygulanmadı	Öğe ya da düzey sınırı aşıldı ("That change was not applied")
Tasarım "Convert" bekliyor	Kart tasarımcıdan önce yapılmış; Convert current card ya da bir hazır tasarım seçin

Yapay zekâ ile tasarım: Yapay Zekâ ile Kart Tasarımı.