Aşağıdaki makale size yardımcı olacaktır:Bilmeniz Gereken En Önemli Unsurlar
Herkes mevcut ücretsiz ve premium temalarla hızlı bir şekilde Shopify mağazası açabilir ancak bazı mağaza sahipleri, markalı, benzersiz bir alışveriş deneyimine sahip özel bir mağaza oluşturmak için kod kullanmayı tercih eder.
Shopify kod dili Liquid olarak bilinir. Bir müşteri mağazanızı ziyaret ettiğinde Shopify’ın veritabanından belirli verileri almak ve bunları temanızda görüntülemek için tasarlanmış yer tutucu kodunu kullanır.
Bu dili nasıl kullanacağınızı öğrenmek istiyorsanız yararlı bir kaynak Shopify Liquid Hile Sayfası.
–
–
Liquid Cheat Sheet, Shopify değişkenlerinin ve Shopify filtrelerinin bir listesidir ve kendi Shopify temalarınızı tasarlarken ve çevrimiçi mağazanızı kişiselleştirirken kullanışlı olacak bir bakışta referans oluşturur.
Shopify mağazanızı özelleştirirken muhtemelen çokça çalışacağınız bazı Liquid kodları ve işlevleri burada verilmiştir.
#cta-visual-pb#
Mağaza.e-posta
Bu, çevrimiçi mağazanızın e-posta adresini döndürür. Mağazanızda bir posta bağlantısı oluşturmak veya müşterinin e-postasını kullanan bir iletişim düğmesi oluşturmak gibi bu nesneyi kullanmanın çeşitli yolları vardır.
–
Shop.enabled_payment_types
Ne kadar çok ödeme türünü kabul ederseniz müşterilerinizin mağazanızdan alışveriş yapma olasılığı o kadar artar. Bu nesne, çevrimiçi mağazanız için kabul edilen kredi kartı türlerinin bir dizisini döndürür. Kredi kartının SVG resim dosyasına bağlantı vermek için ödeme_tipi_img_url filtresini de kullanabilirsiniz. Alternatif olarak, Amazon Pay, Google Cüzdan, PayPal vb. gibi kabul ettiğiniz diğer ödeme türlerini gösteren bazı göze çarpan görselleri siteye eklemeyi düşünün.
–
Görüntü Kaynağı: E-Ticaret Ulusu
–
İşlem
İşlem nesneleri, onay bilgileri için ve müşterilerinizin bir siparişi incelemek ve bir işlemin durumunu kontrol etmek istediği müşteri alanında devreye girecektir. Aşağıdakiler de dahil olmak üzere üzerinde çalışacağınız bir dizi işlem nesnesi vardır:
- Transaction.id – işlemin benzersiz sayısal tanımlayıcısını döndürür
- Transaction.amount – işlemin tutarını döndürür
- Transaction.status – işlemin durumunu döndürür
- Transaction.status_label – bir işlemin durumunun çevrilmiş çıktısını döndürür
- Transaction.created_at – işlemin oluşturulduğu zaman damgasını verir
- Transaction.receipt – ödeme ağ geçidinden ödeme makbuzuyla ilgili bilgileri içeren metni döndürür. Bu, ödemenin bir test senaryosu olup olmadığını ve işleme dahil edilmişse bir yetkilendirme kodunu içerir
–
Ürün.mevcut
Bu kod, ürünün tüm çeşitleri sıfıra veya daha aza indirildiğinde ve ürün, satın almaları engelleyecek şekilde ayarlandığında, satın alınmaya uygunsa “doğru” ve satın alınamıyorsa “yanlış” döndürerek bir ürünün mevcut olup olmadığını belirtmek için kullanılır. Ürün stokta yok.
–
Ürün.içerik
Bu,product.description için bir takma addır ve ürününüzün açıklamasını görüntülemek için kullanacağınız Liquid kodudur. Ayrıntılı ürün açıklamaları, dönüşümleri iyileştirmenin anahtarıdır ve ürün sayfasında belirgin bir şekilde konumlandırılmalıdır.
–
Ürün.resimler
Bu kod, ürünün görsellerinin bir dizisini döndürür. Shopify’ın içerik dağıtım ağında (CDN) sakladığınız ürün görseline bağlantı vermek için img_url filtresini kullanın.
–
Görüntü Kaynağı: Shopify
–
Ürün fiyatı
Bu sıvı kod yalnızca belirlenen fiyatı göstermez. Bunun yerine, ürünün tüm çeşitleri arasında en düşük fiyatı döndürür. Bu, ürün.fiyat_min ile aynıdır.
–
Ürün başlığı
Bu kod, ürünün belirlenen başlığını döndürür. Ürün başlıklarını optimize etmek cazip gelse de, bunları uzun bir anahtar kelime dizisiyle doldurmaktan kaçının. Bu kod, kullanıldığı yerde tam ürün başlığını döndürür ve aşırı uzun başlıklar için biçimlendirme sorunları yaratabilir.
–
Koleksiyon.all_types
Bir koleksiyondaki tüm ürün türlerinin listesini döndürür.
–
Koleksiyon.ürün
Bir koleksiyondaki tüm ürünleri döndürür. Sayfa başına gösterilebilecek ürün sınırının 50 olduğunu unutmayın.
–
Koleksiyon.başlığı
İstenilen koleksiyonun başlığını döndürür.
–
İndirim kodu
İndirimin başlığını veya indirim kodunu döndürür. Bu sıvı kodu, indirim.başlığı ile aynıdır.
–
Görüntü Kaynağı: Shopify
–
İndirim.toplam_tasarruflar
Bu kod, birden fazla satır öğesine uygulanmışsa indirimden elde edilen tasarrufların toplam tutarını döndürür. Değeri parasal formatta döndürmek için Liquid’de bir para filtresi kullanabilirsiniz; bu, müşteriye şu ana kadar ne kadar tasarruf ettiğini göstermek (ve onları daha fazla alışveriş yapmaya teşvik etmek) için sepete harika bir katkıdır.
–
Line_item.image
Satır öğesinin görselini alışveriş sepetinin içinde döndürür. img_url filtresini, resim özelliği yerine doğrudan satır öğesine uygulayabilirsiniz. Bu, resim özelliğine (varyant, ürün, satır öğesi, koleksiyon), resim nesnesine veya resim kaynağına sahip herhangi bir nesne için çalışan bir resim URL’si oluşturacaktır. Bu, satır öğeleri için kullanışlıdır çünkü öğenin varyant görselini veya herhangi bir varyant görseli yoksa ürünün öne çıkan görselini yayınlar.
–
Line_item.title
Bu nesne kodu, ödeme sırasında bir satır öğesinde satın alınan ürün başlığını gösterir. Bu kodu kullanırken, hem ürün.başlığı hem de varyant.başlığı kısa çizgiyle ayırarak döndürür. Örneğin, müşteri farklı renk seçeneklerine sahip bir gömlek satın aldıysa bunun çıktısı “v yakalı gömlek – mavi” gibi bir sonuç olacaktır.
–
Kes
Kesme filtresi, bir dizeyi ilk parametre olarak iletilen karakter sayısına kadar kısaltmak için kullanışlıdır. Kesilen dizeye bir üç nokta (…) eklenir ve karakter sayısına dahil edilir. İçeriğin kısaltılabileceği yollardan biri uzun bir ürün açıklamasıdır. Bir ürün sayfasının alt ucundaki daha büyük ürün açıklaması kesilebilir, böylece açıklamanın yalnızca bir kısmı üstte gösterilir. Benzer şekilde, ürün sayfası yüklenmeden önce ürün hızlı görünümünde kısaltılmış bir ürün açıklaması kullanılabilir.
–
Bağlantı_to_tag
Sıvıdaki bu filtre, bir koleksiyondaki belirli bir etiketi paylaşan tüm ürünlere bağlantı oluşturdu. Örneğin, etiket olarak “indirim”i belirleyebilirsiniz ve Shopify mağazanızda indirimli ürünler olarak etiketlenen tüm ürünler için bir bağlantı oluşturulur.
–
Göre sırala
Bu Liquid filtresi, koleksiyon sayfalarına uygulanır ve sağlanan sort_by parametresiyle bir koleksiyon sayfasına giden bir URL oluşturur. Bu filtre yalnızca koleksiyon URL’leri için geçerlidir. Örneğin, filtreye “en çok satan” parametresini uyguladıysanız oluşturulan bağlantı, kullanıcıyı tüm ürünlerin en çok satana göre sıralandığı belirlenmiş koleksiyon sayfasına yönlendirecektir.
–
Görüntü Kaynağı: Shopify
–
url_for_type
Müşterilerinizin belirli ürün türleri için alışveriş yapmasına yardımcı olmak istiyorsanız bu Sıvı filtresini kullanabilirsiniz. Bu, belirli bir ürün türüne sahip ürünleri içeren bir koleksiyon sayfasına bağlantı veren bir URL oluşturur. Örneğin, o koleksiyondaki yalnızca belirli gömlek türlerini görüntüleyen bir koleksiyon sayfasını açan bir bağlantı oluşturabilirsiniz.
–
{% yorum %}
Shopify mağazanızı özelleştirirken kodun belirli satırlarına not bırakmak kullanışlı olabilir. Bu Liquid etiketi, oluşturulmamış kodu şablonunuzun içinde bırakmanıza olanak tanır. Açılış ve kapanış yorum bloklarındaki herhangi bir metin görüntülenmeyecek veya çıktısı alınmayacak ve içindeki hiçbir kod çalıştırılmayacaktır. Bu, güncellemeye çalıştığınız alanları işaretlemek veya kod ve işlevsellikle ilgili not bırakmak için kullanışlıdır.
–
{% katmak %}
Liquid, birden fazla kod satırını parçacıklar olarak kaydetmenize olanak tanıyan kullanışlı bir özelliğe sahiptir. Temanızın snippet’ler klasöründe saklanan bu snippet’ler daha sonra kullanılmak üzere kolayca geri çağrılabilir. Bu Liquid etiketi, söz konusu klasörden belirli bir pasajı eklemenize olanak tanıyarak, aynı kod satırlarını birden çok yerde yeniden kullanırken önemli miktarda kodlama süresinden tasarruf etmenizi sağlar.
–
{% biçim %}
Shopify mağazanızda, sitenizdeki iletişim formunun ötesinde kullanacağınız birçok form türü vardır. Blog yorumları, müşteri hesapları oluşturma ve hatta ürün sayfaları (sepete ürün ekleme) form gönderimi kullanılarak yapılır. Form etiketinin her kullanımı farklı nitelikler ve giriş öğeleri gerektirecektir. Mağazanızda aşağıdakiler de dahil olmak üzere kullanacağınız çeşitli form türleri vardır:
- Yeni müşteriler yaratın
- Müşteri adres bilgilerini düzenleme
- Müşteri giriş formu oluşturma
- Misafir giriş formu
- Sepetinize ürün çeşitleri ekleme
- Müşteri şifrelerinin kurtarılması ve daha fazlası.
–
Görüntü Kaynağı: Shopify
–
Madde
Bir blog barındırmayı planlıyorsanız muhtemelen makale nesnesine ve onun niteliklerine çok aşina olmanız gerekecektir. İçerik pazarlaması önemli miktarda trafik oluşturabilir ancak içeriğin ilgi çekici ve okunması kolay olmasını sağlamak için, bir gönderinin nasıl görüntüleneceğini kodlarken, gönderiye tüm doğru bilgileri eklediğinizden emin olmak isteyeceksiniz. Dikkat edilmesi gereken temel özellikler şunlardır:
- Article.author – içeriğin yazarını görüntüler
- Article.comments – bir makaleye ilişkin onaylanmış, yayınlanmış tüm yorumları döndürür
- Article.content – makalenin ana içeriği
- Article.created_at – makalenin oluşturulduğu/yayınlandığı verileri döndürür
- Article.image – makalenin öne çıkan görselini döndürür
- Article.title – makalenin başlığını döndürür
–
Bu, Liquid’de çalışacağınız etiketlerin, filtrelerin ve nesnelerin yalnızca kısa bir listesidir. Liquid kodunun tam listesi şu adreste mevcuttur:Shopify’ın Liquid Hile Sayfası’nı burada bulabilirsiniz. Her kod girişinde, sizi her kod örneğinin nasıl kullanılabileceğine dair örneklere götüren bir “daha fazla bilgi edinin” bağlantısı bulacaksınız.
Hala Liquid ile sorun yaşıyorsanız Shopify, genişletilmiş belgelerin yanı sıra soruları incelemeye ve yanıtlamaya zaman ayıran aktif bir tasarımcı ve geliştirici topluluğu sunar.
–
Shogun Mağazanızı Kişiselleştirmeyi Daha da Kolaylaştırıyor
Kodu manuel olarak düzenlemek zaman alıcı bir süreç olabilir.
Bunun yerine Shogun sayfa oluşturucu uygulamasını kullanarak çok zaman kazanabilirsiniz. Shogun’un sürükle ve bırak WYSIWYG arayüzü, işletmelerin sayfa oluşturmak için gereken süreyi %80’e kadar azaltmasına olanak tanır. Bu kadar ekstra zamanla neler yapabileceğinizi hayal edin…
#cta-visual-pb#
