İlk Shopify Tema Bölümünüzü Nasıl Oluşturursunuz?

Müşterilerinize, özellikle vitrinlerini özelleştirme yeteneği istediklerinde, yaratıcı kontrol vermek çok önemlidir. Shopify'ın bölümler özelliği, Shopify temalarını kişiselleştirmek için güçlü bir araçtır, dolayısıyla bunları verimli bir şekilde kullanmak ve en iyi uygulamaları takip etmek, müşterileriniz için bir dizi seçeneğin kilidini açacaktır.

Sıfırdan bir Shopify teması oluşturuyorsanız veya bir müşteri için bir tema üzerinde ince ayar yapıyorsanız bağlama göre değişen birkaç farklı türde bölüm oluşturmanız gerekir. Ek olarak, müşteriler kullanıcı dostu ve sezgisel bir deneyim bekler, yani doğru yerde, doğru bölümün dönüşüm üzerinde büyük bir etkisi olabilir.

Bu makalede, farklı türde tema bölümleri oluşturmaya nasıl başlayacağınızı ve bunları kullanma kurallarını ele alacağız, böylece müşterilerinizin mağazalarını kişiselleştirmelerine yardımcı olabilirsiniz. Ayrıca, bunları gerçek dünya senaryolarında tam olarak nasıl kullanabileceğinizi göstermek için, kaynağımız olan Dawn temamızdan belirli bölümlerin bazı örneklerini inceleyeceğiz.

Tema bölümleri nedir?

Yüksek düzeyde bölümler, satıcıların özelleştirebileceği bir Shopify temasının modüler bileşenleridir. Bölümler, bir ürün sayfasının temel öğeleri veya bir slayt gösterisi bileşeni gibi bir Shopify mağazasının belirli alanları için içerik ve ayarlar içerir.

Bu bölümlerde geliştiriciler, metin girişleri ve resim seçicilerden özel HTML ve menülere kadar bir dizi farklı ayar türüne erişebilirler; bu ayarlar, satıcıların tema düzenleyiciden özelleştirip içerikleriyle doldurabilir.

Bölümler, bir temanın /sections dizininde bulunur ve temanın düzen dosyalarına (üstbilgi ve altbilgi gibi) statik olarak dahil edilebilir veya Tema Düzenleyici'den herhangi bir şablona dinamik olarak eklenebilir. Bölümler olarak temsil edilebilecek çeşitli bileşenleri anlamak için Şafak temasının /sections dizinini keşfedebilirsiniz.

Çevrimiçi Mağaza 2.0'ın kullanıma sunulmasıyla birlikte, artık tüm sayfalardan tek tek öğelere kadar temanızın tüm farklı yönlerini düzenlemenin birincil yolu olarak bölümler kullanılabilir. Bu makalede ele alacağımız gibi, herhangi bir JSON şablonuna bölüm ekleyebilme özelliği, satıcılar temalarını özelleştirdiğinde daha da geliştirilebilen farklı sayfaları kolayca düzenlemenize olanak tanır.

Şablonlar ve bölümler

Shopify temalarında bölümlerin nasıl çalıştığını öğrenmenin ön koşullarından biri, Shopify'ın tema şablonları sistemini anlamaktır. Online Store 2.0 ile her sayfa türü, bir temanın /templates dizini içinde bir .json dosyası olarak gösterilebilir. Geliştiriciler, bu JSON şablon dosyalarında varsayılan olarak hangi bölümlerin görüneceğini tanımlayarak her sayfa türünü yapılandırabilir.

Bu JSON şablonları, mağaza içeriğini görüntülemek için herhangi bir işaretleme veya Liquid nesnesi içermez, bunlar yalnızca bir sayfada varsayılan olarak hangi bölümlerin ve hangi sırayla görüneceğini gösteren veri dosyalarıdır.

Bir product.json şablon dosyasının nasıl görünebileceğine dair temel bir örnek şöyle olabilir:

Bu durumda, bir ürün sayfası main-product.liquid adlı bir bölümle oluşturulur ve varsayılan olarak görünen tek bölüm olur. Bir satıcı bu sayfayı özelleştirip sayfaya daha fazla bölüm eklediğinde, product.json şablon dosyası bu bilgilerle güncellenir. Bu makalede, bölümlerin şablonlara nasıl dahil edildiğine baktığımızda bu süreci daha ayrıntılı inceleyeceğiz.

Bölümlerin temelleri

Bölümleri ve JSON şablonlarını kullanarak temanızı geliştirirken, bölüm dosyalarını iki farklı kategoride oluşturmayı düşünebilirsiniz: "ana" sayfa bölümleri ve bağımsız modüler bileşenler.

Ana sayfa bölümleri

Bir ana sayfa bölümünde, o sayfa için tüm varsayılan içeriği dahil etmelisiniz. Örneğin, bir ürün sayfasının ana bölümünde, bir ürünü ve ürün başlığı, açıklama, medya, fiyat ve sepete ekleme formu gibi ilişkili özelliklerini görüntülemek için önemli öğeleri eklersiniz.

Bir bölümün dahil edildiği sayfa şablonuna bağlı olarak bir bölümdeki Liquid değişkenlerine veya nesnelerine erişebilirsiniz. Bu, bir product.json şablonunda işlenecek bir bölümün Liquid product tüm özelliklerine erişebileceği anlamına gelir. sayfası işlenmekte olan ürünü temsil eden nesne.

Benzer şekilde, bir collection.json dosyasında yer alan bir bölüm, collection Liquid nesnesinin tüm özniteliklerine erişebilecektir. Tüm bölümler, nerede göründüklerinden bağımsız olarak, Liquid global nesnelerinden herhangi birine erişebilir.

Bir ana sayfa bölümüne ekleyeceğiniz işaretleme ve sayfaya özgü Liquid nesnelerine ek olarak, {% schema %} etiketleri içinde de ayarlar oluşturabilirsiniz. Bu ayarlar, bölümdeki öğelere referans verebilir ve satıcılar tarafından tema düzenleyicide yapılandırılabilir.

Bir ana sayfa bölümü, bir sayfa türüne özgü işaretleme içerdiğinden, onu yalnızca ilişkili şablonuna dahil etmek isteyeceksiniz. Bir ana sayfa bölümünün tema düzenleyiciden diğer sayfa türlerine eklenmesini önlemek için bölüm şemasında hazır ayarlar bulunmamalıdır.

Ana sayfa bölümünün bir örneğini görüntülemek için, Dawn'ın /sections dizinindeki main-product.liquid dosyasını veya başlıkta main ön eki olan bölümleri inceleyebilirsiniz. Genel bir kural olarak, farklı bölüm türleri arasında ayrım yapmanıza yardımcı olması için ana sayfa bölümlerinizi başlıkta main ile adlandırmalısınız.

modüler bölümler

Modüler bölümler, bir çevrimiçi mağazanın farklı alanlarında yeniden kullanılabilen ve bir sayfanın ana öğelerini tamamlayan bölümlerdir. Bu tür bölümlere örnek olarak öne çıkan koleksiyonlar, slayt gösterileri ve haber bülteni kayıt formları verilebilir.

Bu bölümler, varsayılan olarak bir sayfa şablonuna eklenen bölümler yerine, satıcılar tarafından genellikle tema düzenleyici kullanılarak sayfalara eklenir. Editör aracılığıyla bir sayfaya bölüm eklenebilmesi için bölümün şemasında hazır ayarlar bulunması gerekir. Bu ön ayarlar eklendikten sonra, satıcı tema düzenleyicide Bölüm ekle'yi tıkladığında bölüm kullanılabilir bir seçenek olacaktır.

"Ana" sayfa bölümlerinin aksine, modüler bölümler genellikle bir Shopify mağazasında farklı sayfa türlerinde ve farklı bağlamlarda yeniden kullanılabilen içerik ve işaretleme içerir. Bu nedenle geliştiriciler, bu bölümlerde sayfaya özgü Liquid nesnelerine güvenmekten kaçınmalıdır.

Bununla birlikte, bölüm şemasındaki templates özelliğini kullanarak bir bölümü yalnızca belirli sayfa türlerinde kullanılabilir olacak şekilde kısıtlamak mümkündür. Örneğin, bir bölümü yalnızca ürün ve koleksiyon sayfalarıyla sınırlamak isterseniz, bölümün schema etiketlerine şu satırı eklersiniz:

 "templates": ["product", "collection"]

templates niteliği, sayfa türünü temsil eden bir dizi dizeyi kabul eder.

Temanıza hangi işlevleri dahil etmek istediğinize veya müşterinizin hangi özel gereksinimlerine sahip olduğuna bağlı olarak, muhtemelen benzersiz özellikleri etkinleştiren bir dizi farklı bölüm oluşturacaksınız. Modüler bölümlerin örneklerini görmek için haber bülteni bölümünü veya Dawn'da kullanılan zengin metin bölümünü inceleyebilirsiniz.

Bölüm ayarları

Bir bölüm dosyasının ayarlarının, satıcıların erişebileceği özelleştirme seçenekleri oluşturmak için nasıl kullanılabileceğini kısaca inceledik, ancak nasıl yapılandırıldıklarını görmek için bunları biraz daha derinlemesine inceleyelim.

Gördüğümüz gibi, ayarlar bölüm dosyalarına, {% schema %} etiketlerine dahildir; bu, bunların tema düzenleyicinin kullanıcı arabiriminde işlenmesi gereken ayarlar olduğunu belirtir. Bunun çok basit bir örneği, şuna benzeyen özel bir metin bölümünde görülebilir:

Bu örnekte iki HTML öğemiz var: bir başlık öğesi ve bir paragraf öğesi. Bu öğelerin her biri, section.settings Liquid nesnesiyle oluşturduğumuz dinamik içeriği içerir. Bu bölüm nesnesi, ayarın benzersiz kimliğine başvurarak ayar değerlerini almamızı sağlar.

HTML ve Liquid işaretlemesinin altında, {% schema %} etiketlerimizde yer alan bölüm ayarlarımız var. Her ayar, ayar id , type ve düzenleyicide nasıl görüneceğini tanımlayabileceğimiz bir nesne ile temsil edilir. Liquid'de bir bölümün ayarına erişmek için, onun id section.settings liquid nesnesine ekleyin. Ayrıca, ayar türünü ve tema düzenleyicide nasıl görüneceğini de tanımlarız.

Şema etiketlerimizin ayarlarında:

• id , tanımlanmakta olan Liquid değişkenini ifade eder
• type , oluşturduğumuz çıktının türünü tanımlar
• label , tema düzenleyicide görüntülenen bağlamı sağlar
• default bir varsayılan değer atar

Bu örnekte, richtext için bir text kutusu ve gövdemiz için bir zengin metin kutusu oluşturdum, ancak müşteri gereksinimlerinize bağlı olarak çok çeşitli çıktı türleri ekleyebilirsiniz. Diğer geçerli giriş türleri arasında image_picker , radio , video_url ve font_picker .

Bu örnek artık geçerli bir bölüm, ancak önemli bir yönü kaçırıyoruz: bölümün temada tam olarak nerede görüneceğini belirlemek. Daha sonra bölümleri dahil etmek için birkaç farklı yaklaşımı keşfedeceğiz, ancak şimdilik, bölümde hazır ayarlar oluşturarak bölümün tema düzenleyici aracılığıyla herhangi bir sayfaya eklenmesine izin vereceğiz.

Hazır ayarlar, bölümlerin varsayılan yapılandırmalarıdır ve bir bölümün {% schema %} etiketlerine eklenir. Basit örneğimizde, hazır ayarlar şöyle görünebilir:

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Örneğimize eklendikten sonra, özel metin kutusu bölümü şöyle görünecektir:

Şimdi, tema düzenleyiciye gidip herhangi bir sayfada Bölüm ekle'yi seçersek , bu bölüm kullanılabilir bir seçenek olarak görünecektir. Oluşturduğumuz bölüm ayarları, eklediğimiz etiketler ve varsayılan metin ile sağ kenar çubuğunda görünecek ve bölümümüzde görüntülenecek olan giriş metni ayarlarını doldurabiliriz.

Bu, bölüm ayarları ile bölümler içinde oluşturabileceğiniz değişkenler arasındaki ilişkiyi ve bunların tema düzenleyicide nasıl işlendiğini gösteren basit bir örnektir. Daha gelişmiş bir model için Şafak temasının zengin metin bölümünü keşfedebilirsiniz.

Sayfalarda bölümler dahil

Daha önce de değindiğimiz gibi, bir temanın sayfalarına bölüm eklemenin birkaç yöntemi vardır. Bu yaklaşımların her birini ayrı ayrı inceleyelim ve onlar için geçerli olan bazı kuralları açalım.

1. JSON şablonlarına bölümler dahil etme

Ana sayfa bölümlerine baktığımızda, JSON şablon dosyalarının, o sayfa türü için varsayılan bölüm haline gelen ve o sayfa için tüm önemli içerik öğelerini içermesi gereken bir "main" özelliğini kabul ettiğini gördük.

Bir "main" bölüme ek olarak, bir JSON şablonuna o sayfa türünde varsayılan olarak görünecek diğer bölümleri dahil etmek de mümkündür. Örnek olarak bir ürün JSON şablonunu kullanırsak, "main" bölümün altına yeni bir nesne ekleyerek sayfada bir ürün önerileri bölümü ekleyebiliriz:

Bu durumda bölüme bir ad veriyoruz, recommendations ve type özelliği, /sections dizinine dahil etmek istediğimiz dosyayı belirlemek için kullanılır.

Bu JSON şablonu birden fazla bölüme atıfta bulunduğundan, order nesnesi içinde bölümlerin sıralı olarak nasıl görüneceğini tanımlamamız gerekir. Bir JSON şablonuna dahil edilen her bölüme varsayılan bir sıra atanması gerekir, ancak satıcılar yine de tema düzenleyicide bölümleri yeniden düzenleyebilir.

JSON şablonlarına eklenen hazır ayarlara sahip olmayan bölümler tema düzenleyicide kaldırılamaz, ancak bir satıcı bunlara ihtiyaç duymuyorsa gizlenebilir. Bir JSON şablonunda bölümlerin nasıl düzenlenebileceğine dair gerçek hayattan bir örnek için Dawn ürün şablonunu inceleyebilirsiniz.

2. Bölümlerin tüm sayfalarda seçenek olarak dahil edilmesi

Özel metnimizde gördüğümüz gibi, schema ayarlarında presets mevcut olduğunda bir bölümün bir temanın tüm sayfalarında kullanılabilir hale getirilmesi mümkündür.

 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]
 "presets": [
 {
 "name": "custom-text",
 "category": "Custom"
 }
 ]

Bu yaklaşım kullanılarak dahil edildiğinde, bu bölümler tema düzenleyiciden eklenebilir, yeniden konumlandırılabilir ve silinebilir. Bu bölümler ayrıca templates özelliği ile belirli sayfalarla sınırlandırılabilir.

Bu sürükle ve bırak işlevi, özel dinamik bölümler oluşturduğunuzda, mağazaları kişiselleştirmek için çok çeşitli seçeneklerin kilidinin açılacağı anlamına gelir. Video, ürün veya resim galerileri için hareketli bölümler oluşturabilirsiniz. Bu yöntemi kullanan bir bölüme iyi bir örnek, Dawn'ın haber bülteni bölümü olabilir.

3. Statik bölümler eklemek için {% partition %} etiketlerini kullanma

Liquid section etiketi, bir Liquid düzeninde veya şablon dosyasında /sections dizininden bir bölüm oluşturmanıza olanak tanır. Bu etiket şu şekilde görünebilir:

 {% section 'header' %}

Bu section etiketi kullanılarak eklenen bölümler, tema düzenleyicide kaldırılamaz, yeniden konumlandırılamaz veya gizlenemez. Bu bölümün sayfadaki konumu, düzen dosyasında veya şablonda nereye eklendiğine bağlı olarak kilitlenir.

Bu yaklaşım en çok üstbilgiler, altbilgiler ve duyuru çubukları gibi her zaman görünür olması gereken içerik ve bileşenler için kullanılır. Bunun bir örneğini Dawn'da görmek için, section etiketi ile statik duyuru çubuğu, üstbilgi bölümü ve altbilgi bölümlerinin eklendiği theme.liquid dosyasını inceleyebilirsiniz.

Yaratıcılığı güçlendirme

Artık temalarınıza nasıl bölüm oluşturacağınızı ve ekleyeceğinizi gördüğünüze göre, müşterilerinizin mağazaları için sonsuz sayıda seçenek oluşturabilirsiniz.

JSON şablonlarıyla çalışmak, bir temanın tüm sayfaları için bölümlerin gücünün kilidini açar ve bu da satıcıların mağazalarını tam olarak istedikleri gibi, sizden de biraz yönlendirme alarak oluşturmalarına olanak tanır.