Aşağıdaki makale size yardımcı olacaktır:Geliştirilmiş Kullanıcı Deneyimi için Özel Mağazanıza Shopify Bölümleri Ekleme
Yıllar geçtikçe Shopify, online mağazanızın görünümünü ve tarzını markanıza uyacak şekilde özelleştirmeyi giderek daha kolay hale getirdi.
2021 Shopify Unite’da Online Store 2.0’ın tanıtımıyla “şimdiye kadarki en büyük güncellemeyi” duyurdular.
Bu hoş geldiniz güncellemesi, tema düzenleyicilerini Shopify sayfa şablonlarınızı düzenlemek için çok daha güçlü hale getiren işlevsellik ve tasarım revizyonlarını içeriyordu.
Bunun büyük bir kısmı, izin veren bir sürü yeni temaydı. her sayfa şablonuna bölümler ve bloklar ekleme ve özelleştirme sadece ana sayfa yerine.
Bölümler mağazanızı özelleştirmek için gerekli araçlardır, bu nedenle blog yazımızın tamamını bu muhteşem Shopify mağaza oluşturma bileşenine ayırmamız gerektiğini düşündük.
Ayrıca Shogun Sayfa Oluşturucu’nun bu özelliği daha da iyi hale getirmek için yaptığı şey.
#cta-visual-pb#
–
Shopify bölümleri nelerdir?
Bölümler içinde özelleştirilebilir bileşenler İstenilen düzenleri oluşturmak için yeniden sıralanabilen, eklenebilen ve kaldırılabilen Shopify sayfa şablonları.
İlk olarak 2016’da tanıtılan bölümler, Shopify satıcılarının temalarında kodsuz değişiklikler yapabilme becerisi açısından ileriye doğru atılmış önemli bir adımdı.
Tema editöründe, bir sayfa şablonundaki her bölüm özelleştirilebilir temanın izin verdiği ölçüde. Böylece başlıkları, metni, renkleri, resimleri, düğmeleri vb. hızlı bir şekilde güncelleyebilirsiniz ve bu, değişikliklerin gerçek zamanlı bir önizlemesini gösterir.
Bölümler, bölümün düzenini değiştirmek için bölüm içinde taşınabilen, blok adı verilen alt bileşenleri içerir.
Bölümlerin kullanıma sunulmasından itibaren, yeni temalardaki tüm sayfa şablonları bölümün özelleştirilmesine izin verdi ancak düzeni değiştirmek için bölümlerin yeniden sıralanmasına izin vermedi.
Ana sayfa, tema düzenleyicide bu sürükle ve bırak işlevine izin veren tek sayfa şablonuydu.
Diğer tüm sayfa şablonları için, Liquid dosyalarında yapılan düzenlemelerle birlikte kod düzenleyici aracılığıyla düzen değişikliklerinin yapılması gerekiyordu.
Bu, Online Mağaza 2.0 ve Her Yerdeki Bölümler’e kadar böyleydi.
Her Yerdeki Bölümler Nedir?
Shopify’ın Çevrimiçi Mağaza 2.0 güncellemeleriyle, yeni temalar, kullanıcıların her sayfa şablonunda dinamik bölümler eklemesine, yeniden sıralamasına, silmesine ve özelleştirmesine olanak tanıdı tema düzenleyicisine yazın.
Bu süper yararlı işlevsellik artık ana sayfayla sınırlı değildi. Bu, daha büyük Shopify ekosisteminde Her Yerdeki Bölümler olarak anılır.
JSON şablon dosyalarının tanıtımı Çevrimiçi Mağaza 2.0 ile sayfa şablonlarına bölüm ekleme, kaldırma ve yeniden sıralama olanağı açıldı.
Bunlar daha önce kullanılan Liquid şablonlarının yerini aldı. Liquid hâlâ JSON şablon dosyalarında başvurulan bölümler için kullanılan dildir.
Bunun ötesinde güncelleme, geliştiricilerin tema düzenleyicisine özel bölümler eklemesine olanak tanıdı.
Bu konuyu açtı Shogun Sayfa Oluşturucu kullanıcılarının kendi özel bölümlerini oluşturmaları için heyecan verici bir fırsatTamamen kodsuzdur ve bunları doğrudan Shopify tema düzenleyicisinde kullanırsınız.
Biz buna diyoruz Shopify için PB Bölümlerive oldukça şaşırtıcı. Şu anda yayında, bu yüzden en kısa sürede oynamaya başlayabilirsiniz. Bu yazının ilerleyen kısımlarında bunu çalışırken göreceksiniz.
Fark ne? Online Mağaza 2.0 temaları ve vintage Shopify temaları
Resim: Shopify Tema Mağazası
Shopify Unite’ın en belirgin değişikliği, şu anda Shopify Tema Mağazasına hakim olan yeni temalardı.
Shopify Tema Mağazasında artık 120 adet OS 2.0 özellikli Shopify teması bulunmaktadır.
Daha önce tüm yeni mağazalar önceden yüklenmiş Debut temasıyla başlarken, artık yeni inşa edilen mağazalarda varsayılan olarak OS 2.0 özellikli Dawn teması kullanılıyor.
Hala Debut’u veya diğer vintage Shopify temalarını kullanan hiç kimse, iyileştirilmiş ‘her sayfadaki bölümler’ işlevine erişemez. Bu temalar güncellenmeye devam edecek ancak bu yeni özellikleri alamayacaklar.
Bunun nedeni vintage temalar yeni temalardan tamamen farklı bir tema mimarisine sahiptir, ekleyebilecekleri temel işlevleri sınırlayan. Bu vintage temalar artık tema mağazasında mevcut değil.
Shopify tema mimarisi: Vintage vs Online Mağaza 2.0
Kod düzenleyiciye girdiğinizde eski ve yeni tema mimarileri arasındaki farkı gerçekten görebilirsiniz.
Vintage tema mimarisi
Öncelikle kod düzenleyiciye bakalım. vintage tema Basit.
Templates klasöründeki dosyaların tamamının Liquid dosyaları olduğunu görebilirsiniz.
Ürün sayfasının tema şablonunda çok az değişiklik var; bu sayfanın içeriğinin bölüm dosyasında bulunduğunu bildiren bir yorum var ürün-şablon.liquid.
Bunu bölüm dosyalarına iki referans takip eder:ürün şablonu Ve ürün önerileri.
İçeri girmek ürün şablonu bölüm dosyasında, ürün sayfasında gösterilen içeriği tanımlayan tüm kodu, tüm ürün bilgileri için önceden belirlenmiş bir düzende (yeni temalarda bloklar olarak gördüğünüz şeyler) bulacaksınız.
Bu Simple teması için ürün sayfalarının çalışma mantığının tamamı bu bölüm dosyası tarafından belirlenir.
#cta-paragraf-pb#Not: Vintage temalar artık Shopify Tema Mağazası’nda bulunamayacak ve ücretsiz vintage temalar bundan sonra güvenlik güncellemeleri almayacaktır. OS 2.0 temalarına geçmek için bir neden daha.
Çevrimiçi Mağaza 2.0 tema mimarisi
En son sürümüme geçiyorum Online Mağaza 2.0 özellikli Şafak temasışablon dosyalarının neredeyse tamamen JSON dosyaları olduğunu görebilirsiniz.
Burada elmaları elmalarla karşılaştırmak için bu OS 2.0 temasındaki ürün şablonuna bakalım.
Kod basittir; belirli bir sırada işlemesi gereken bölüm dosyalarına referans vererek sayfa düzenini oluşturur.
Daha yakından baktığınızda şununla başladığını göreceksiniz: Ana ürün adresinden dosya Bölümler dosya.
Aşağıda, bölümlere benzer şekilde yeniden düzenlenebilen, blok adı verilen bir dizi alt bileşen yer almaktadır.
Oraya gittiğinde Bölümler klasöründe, JSON şablonlarının ayrı sayfa şablonlarını oluşturmak için kullandığı Liquid dosyalarını bulacaksınız.
İşte ana ürün.sıvı dosya ürün.json ürün sayfası şablonunda ilk olarak dosya çağrılır. Bireysel bileşenleri için CSS stili varlıklarını, bu bileşenlerin ziyaretçiler için nasıl görüntüleneceğine ilişkin mantıkla bir araya getirir.
JSON şablonu, tema düzenleyicideki her sayfa şablonundaki bölümleri yeniden sıralama, ekleme ve kaldırma yeteneğinin kilidini açan şeydir.
Tema düzenleyicideki sayfa şablonlarında değişiklik yapıldıkça JSON dosyası da eşleşecek şekilde güncellenir.
Her JSON şablonunun altında, bölümleri oluşturulması gereken sıraya göre listeleyen, “sıra” adı verilen bir dizi şeması bulunur.
Tema düzenleyicide yapılan değişiklikler buraya yansıtılacaktır.
Shopify bölümleri ve blokları nasıl kullanılır?
Shopify bölümlerinin ana cazibesi, onları tema düzenleyicide değiştirmektir.
Bu konuyu Shopify tema özelleştirme kılavuzumuzda kapsamlı bir şekilde ele aldık, ancak burada genel hatları kısaca ele alacağız.
Bölümleri veya blokları ekleme veya kaldırma
Sayfa düzeninizi değiştirmek, sayfaya eklediğiniz öğelerle başlar. Tema düzenleyicide bölüm eklemek tıklamak kadar kolaydır Bölüm ekle ve mevcut bölümler listesinden seçim yapın.
Gerektiğinde hareket edebilmeniz için yeni bölümler sayfanın altından başlar.
Bloklar bölümlerle aynı şekilde eklenir. Blok eklemek istediğiniz bölümü bulun ve tıklayın. Blok ekle.
Kullanılabilir bloklar bölüme bağlı olacaktır. Ürün Bilgisi bölümün içinde oldukça fazla blok var.
Bir kez daha bölümün altından başlayacaktır, bu nedenle onu istediğiniz yere taşımanız gerekir.
Bölümleri ve blokları kaldırmak, eklemekten daha kolaydır.
Kaldırmak istediğiniz bölüme veya bloğa tıklamanız ve ardından Bölümü kaldır (veya Bloğu kaldır) sağ alt köşedeki düğmesine tıklayın veya çöp kutusu simgesi önizleme ekranında (tema düzenleyicide daha yeni bir güncelleme).
Bölümleri veya blokları sayfada yukarı veya aşağı taşıma
Bir bölüm veya blok ekledikten sonra muhtemelen onu bu alt konumdan çıkarmak isteyeceksiniz.
Bunu yapmak için, söz konusu bölümün veya bloğun üzerine gelin, tıklayıp basılı tutun. altı nokta simgesive istediğiniz yere sürükleyin.
Bölümler için, önizleme bölmesi siz yukarı veya aşağı hareket ettikçe bölümü nereye yerleştirdiğinizi göstermek üzere uzaklaştırılır.
Bölümleri ve blokları özelleştirin
Son olarak, her şey doğru yerde olduğunda, bölümleri ve blokları sayfa vizyonunuza en iyi şekilde uyacak şekilde özelleştirmek isteyeceksiniz.
Bölüme veya bloğa tıkladığınızda ekranın sağ tarafında özelleştirme menüsü görünecektir.
Her bölüm ve blok, temaya göre belirlenen kendi özelleştirme seçeneklerine sahiptir.
Başlık metni, resim görünümleri, hizalama, renkler, dolgu, kenar boşlukları vb. gibi şeyleri değiştirebilirsiniz. Bazı bölümlerde çok az seçenek bulunurken bazılarında çok seçenek bulunur.
Shopify kod düzenleyicisine özel bölümler nasıl eklenir?
Shopify temanız için özel kodlu bir bölümünüz varsa bunu kod düzenleyici aracılığıyla eklemek nispeten basittir.
Not: Bu çalışmanın deneyimli geliştiriciler tarafından tamamlanmasını öneririz. Liquid kullanıcı dostu bir kodlama dili olsa da basit biçimlendirme hatalarıyla temanızı kolaylıkla bozabilirsiniz.
Adım 1: Kod düzenleyicide Bölümler’e gidin
Aşağıya doğru kaydırın Bölümler temanız için kod düzenleyicideki klasör.
Tıklamak Yeni bir bölüm ekle.
2. Adım: Yeni bölümünüze bir ad verin
“Afiş” kelimesini içeren banner bölümleri gibi adlandırma kurallarına uyarak, yeni bölümünüze kelimelerin arasına tire işareti koyarak bir ad atayın.
Tıklamak Bölüm oluştur hazır olduğunda.
3. Adım: Özel Liquid kodunuzu ekleyin
Yeni bölüm dosyanız oluşturulduğunda, bölüm şemanızı, CSS stil sayfası varlıklarını ve JavaScript’i eklemek için boşluklar içeren basit bir şablonla hazır olarak gelecektir.
4. Adım: Özel bölümünüzü sayfa şablonlarına ekleyin
Özel kodunuz ön ayarlarda doğru bilgileri içeriyorsa yepyeni bölümünüz Shopify tema düzenleyicisi aracılığıyla eklenebilecektir.
Kullanılabileceği sayfaları sınırlayabilir veya herhangi bir sayfa şablonunda kullanılabilir hale getirebilirsiniz.
Yeni özel bölümünüzün bu düzenleyicide yerel olarak mevcut olduğunu hayal edin
Bahsedilen, özel kodlu bölümler oluşturmak parkta yürüyüş yapmak değildir.
Bir geliştiricinin vizyonunuzu alıp onu gerçeğe dönüştürmesi gerekir; bu genellikle bir telefon oyununa dönüşür. Sonuç her zaman beklentilerinizi karşılamaz, sonrasında daha fazla geliştirme yapılması gerekir.
İdeal olarak, kodla uğraşmadan kendiniz özel bir Shopify bölümü oluşturabilirsiniz. Bu da bizi şu noktaya getiriyor:
Shopify’a kodlama olmadan özel bölümler nasıl eklenir?
Shopify için PB Bölümleri, satıcıların diğer yerel tema bölümleri gibi Shopify tema düzenleyicisinde kullanmak üzere kendi özel bölümlerini oluşturmasına olanak tanır.
Mevcut Sayfa Oluşturucu kullanıcıları için yeni bir bölüm oluşturmak, yeni bir sayfa oluşturmakla hemen hemen aynı görünecektir.
1. Adım: Sayfa Oluşturucu kontrol panelindeki Bölümler sekmesine gidin
Kontrol panelinizden, Bölümler Özel bölümlerinize geçmek için sekmeyi tıklayın. Başlangıçta boş bir sayfa olacak.
Adım 2: Yeni bir bölüm oluşturmaya başlamak için Oluştur düğmesine tıklayın
Üzerinde Bölümler sayfasında, halihazırda üzerinde çalışmakta olduğunuz bir bölüme tıklayabilir veya + Oluştur yeni bir tane başlatmak için.
Shopify tema düzenleyicisinden tanımlayabilmek için bölüme bir ad verin. Benimkine ‘Görsel Üstbilgi’ adını verdim, bu yüzden son adımda arayacağım şey bu.
3. Adım: Özel bölümünüzü oluşturmaya ve özelleştirmeye başlayın
Tıpkı Sayfa Oluşturucu’da yeni bir sayfayı sürükleyip bıraktığınız gibi, PB Bölümleri ile özel bir bölüm oluşturabilir ve özelleştirebilirsiniz.
Görsel editör aynıdır. Bir bölüm oluşturmak için sayfanın tamamı yerine yalnızca o modüle odaklanabilirsiniz.
Benim için iki önemli (ve sahte) ürün koleksiyonunu vurgulayan iki sütunlu basit bir bölüm oluşturdum: Yavru Köpekler için Kapaklar Ve Yavru Kedi Kostümleri.
4. Adım: Shopify tema düzenleyicisinde bölümünüzü istediğiniz sayfaya ekleyin
Shopify’ın tema düzenleyicisine geri döndüğünüzde, yeni bölümünüzü eklemek istediğiniz sayfa şablonunu bulun ve tıklayın. Bölüm ekle ve özel bölümünüzü seçin.
İletişim sayfası şablonumda en üste ‘Görsel Başlık’ bölümünü ekliyorum. Eğer bu resimler sizi ödeme sayfasına yönlendirmiyorsa ne olur bilmiyorum.
Ekranın sağ tarafında genellikle özelleştirme seçeneklerinin bulunduğu yerde, bu bölümün Sayfa Oluşturucu’da düzenleyebileceğiniz konusunda sizi bilgilendirdiğini fark edeceksiniz.
Sayfa Oluşturucu’daki belirli bir bölümde düzenleme yaptığınızda, bu değişiklikler, tuşuna bastıktan sonra mağazanızda bölümü eklediğiniz her yere yansıtılacaktır. Yayınla.
Bu, değişikliklerinizin evrensel olarak hızlı bir şekilde yayınlanmasını son derece kolaylaştırır.
#cta-paragraf-pb#Hakkında daha fazla öğren Shogun Sayfa Oluşturucu’dan Shopify bölümleri oluşturma.
Shopify bölümleri ve Sayfa Oluşturucu ile mükemmel mağazanızı oluşturun
Shopify bölümlerinin her sayfada sunulması, kendi mağazalarını özelleştirmek isteyen satıcılar için büyük bir kazançtı.
Herhangi bir sayfaya önceden hazırlanmış bölümler eklemek ve ideal düzeninizi oluşturmak için bu bölümleri yeniden sıralayabilmek, benzersiz müşteri deneyimleri yaratmanın anahtarıdır.
Ancak önceden hazırlanmış bölümler biraz sert ve çerez kesici olabilir. Yararlıdırlar ancak benzersiz değildirler.
Bu yüzden özel bölümler oluşturmak (kodsuz!) çok heyecan verici. Yeterli sayıda özel bölümle markanıza uygun tamamen benzersiz sayfalar oluşturabilirsiniz.
Özel bölümleri kodlamak için zaman ve para harcamak yerine, bunları Shogun Sayfa Oluşturucu ile birkaç dakika içinde oluşturabilirsiniz. Shopify mağaza oluşturma deneyiminizi özelleştirmenizi kolaylaştırmanın başka bir yolu.
–
#cta-visual-pb#
