Cara Membuat Bagian Tema Shopify Pertama Anda

Diterbitkan: 2022-07-07

Mengumumkan Toko Online 2.0

Toko Online 2.0 adalah perombakan ujung ke ujung tentang bagaimana tema dibuat di Shopify, diluncurkan Juni 2021. Meskipun informasi dalam artikel berikut ini masih benar, namun tidak memperhitungkan praktik terbaik Toko Online 2.0, dan mungkin tidak menyertakan referensi ke fitur atau fungsi terbaru. Untuk mempelajari lebih lanjut tentang cara membuat dengan Toko Online 2.0, kunjungi dokumentasi terbaru kami.

Kunjungi dokumen


Memberikan kontrol kreatif kepada klien Anda adalah kuncinya, terutama ketika mereka menginginkan kemampuan untuk menyesuaikan etalase mereka. Fitur bagian Shopify adalah alat yang ampuh untuk mempersonalisasi tema Shopify, jadi menggunakannya secara efisien dan mengikuti praktik terbaik akan membuka berbagai opsi untuk klien Anda.

Jika Anda membuat tema Shopify dari awal atau menyesuaikan tema untuk klien, Anda perlu membuat beberapa jenis bagian yang berbeda, yang akan bervariasi tergantung konteksnya. Selain itu, pelanggan mengharapkan pengalaman yang ramah pengguna dan intuitif, artinya bagian yang tepat, di tempat yang tepat dapat berdampak besar pada konversi.

Dalam artikel ini, kami akan membahas cara memulai dengan membuat berbagai jenis bagian tema, dan aturan penggunaannya, sehingga Anda dapat membantu memberdayakan klien Anda untuk menyesuaikan toko mereka. Kami juga akan menjelajahi beberapa contoh bagian tertentu dari tema Dawn yang tersedia di sumber kami, untuk mendemonstrasikan dengan tepat bagaimana Anda dapat menggunakannya dalam skenario dunia nyata.

Apa itu bagian tema?

Pada tingkat tinggi, bagian adalah komponen modular dari tema Shopify yang dapat disesuaikan oleh pedagang. Bagian berisi konten dan pengaturan untuk area tertentu dari toko Shopify, seperti elemen dasar halaman produk, atau komponen tampilan slide.

Di dalam bagian ini, developer memiliki akses ke berbagai jenis setelan yang berbeda, mulai dari input teks dan pemilih gambar, hingga HTML dan menu kustom, yang dapat disesuaikan oleh penjual dari editor tema dan diisi dengan konten mereka.

Bagian terdapat di dalam direktori /sections dari sebuah tema, dan dapat disertakan secara statis dalam file tata letak tema (seperti header dan footer), atau dapat ditambahkan secara dinamis ke template apa pun dari Editor Tema. Untuk memahami berbagai komponen yang dapat direpresentasikan sebagai bagian, Anda dapat menjelajahi direktori /sections dari tema Dawn.

Dengan diluncurkannya Toko Online 2.0, bagian sekarang dapat digunakan sebagai cara utama untuk mengatur semua aspek tema Anda yang berbeda, dari seluruh halaman, hingga elemen individual. Seperti yang akan kita bahas dalam artikel ini, kemampuan untuk menambahkan bagian ke template JSON mana pun akan memungkinkan Anda mengatur berbagai halaman dengan mudah, yang dapat ditingkatkan lebih lanjut saat penjual menyesuaikan tema mereka.

Templat dan bagian

Salah satu prasyarat untuk mempelajari cara kerja bagian pada tema Shopify adalah memahami sistem template tema Shopify. Dengan Toko Online 2.0, setiap jenis halaman dapat direpresentasikan sebagai file .json di dalam direktori /templates dari sebuah tema. Pengembang dapat menyusun setiap jenis halaman dengan menentukan bagian mana yang akan muncul secara default di file template JSON ini.

Template JSON ini tidak menyertakan markup atau objek Liquid apa pun untuk menampilkan konten toko, ini hanyalah file data yang menunjukkan bagian mana yang akan muncul secara default di halaman, dan dalam urutan apa.

Contoh dasar dari tampilan file template product.json adalah:

Dalam hal ini, halaman produk akan dirender dengan bagian yang disebut main-product.liquid , dan itu akan menjadi satu-satunya bagian yang muncul secara default. Saat pedagang menyesuaikan halaman ini, dan menambahkan lebih banyak bagian ke halaman, file template product.json akan diperbarui dengan informasi ini. Kami akan menjelajahi proses ini lebih lanjut di artikel ini ketika kami melihat bagaimana bagian disertakan dalam template.

Dasar-dasar bagian

Saat mengembangkan tema menggunakan bagian dan template JSON, Anda dapat mempertimbangkan untuk membuat file bagian dalam dua kategori berbeda: bagian halaman "utama", dan komponen modular individual.

Bagian halaman utama

Di dalam bagian halaman utama, Anda harus menyertakan semua konten default untuk halaman tersebut. Misalnya, di bagian utama halaman produk, Anda akan menyertakan elemen penting untuk menampilkan produk dan properti terkaitnya seperti judul produk, deskripsi, media, harga, dan formulir tambahkan ke keranjang.

Anda dapat mengakses variabel Liquid, atau objek, di dalam suatu bagian, berdasarkan template halaman mana yang termasuk di dalamnya. Ini berarti bahwa bagian yang akan dirender dalam template product.json akan dapat mengakses atribut apa pun dari product Liquid objek, mewakili produk yang halamannya sedang dirender.

Demikian pula, bagian yang disertakan dalam file collection.json akan dapat mengakses semua atribut objek Liquid collection . Semua bagian, di mana pun mereka muncul, dapat mengakses salah satu objek global Liquid.

Selain markup dan objek Liquid khusus halaman yang akan Anda tambahkan ke bagian halaman utama, Anda juga dapat membuat pengaturan dalam tag {% schema %} . Pengaturan ini dapat mereferensikan elemen di bagian tersebut, dan dapat dikonfigurasi oleh pedagang di editor tema.

Karena bagian halaman utama menyertakan markup khusus untuk satu jenis halaman, Anda hanya ingin menyertakannya di dalam template terkait. Untuk mencegah bagian halaman utama ditambahkan ke jenis halaman lain dari editor tema, itu tidak boleh berisi preset di dalam skema bagiannya.

Untuk melihat contoh bagian halaman utama, Anda dapat menjelajahi file main-product.liquid di direktori /sections dari Dawn, atau salah satu bagian yang diawali dengan main di judulnya. Sebagai aturan umum, Anda juga harus menamai bagian halaman utama Anda dengan main di judulnya untuk membantu Anda membedakan berbagai jenis bagian.

Bagian modular

Bagian modular adalah bagian yang dapat digunakan kembali di berbagai area toko online, dan melengkapi elemen utama halaman. Contoh jenis bagian ini mencakup koleksi unggulan, tayangan slide, dan formulir pendaftaran nawala.

Bagian ini umumnya akan ditambahkan ke halaman oleh pedagang menggunakan editor tema, bukan bagian yang ditambahkan secara default ke template halaman. Agar suatu bagian dapat ditambahkan ke halaman melalui editor, bagian tersebut harus berisi preset di dalam skemanya. Setelah preset ini ditambahkan, bagian tersebut akan menjadi opsi yang tersedia saat pedagang mengklik Tambahkan bagian di editor tema.

Shopify theme section: Gif of the theme editor options, cursor selecting

Berbeda dengan bagian halaman “utama”, bagian modular biasanya berisi konten dan markup yang dapat digunakan kembali di berbagai jenis halaman, dan dalam konteks yang berbeda, di toko Shopify. Oleh karena itu, pengembang harus menghindari ketergantungan pada objek Liquid khusus halaman dalam bagian ini.

Namun, Anda dapat membatasi bagian agar hanya tersedia pada jenis halaman tertentu dengan menggunakan atribut templates dalam skema bagian. Misalnya, jika Anda ingin membatasi bagian hanya untuk halaman produk dan koleksi, Anda harus menyertakan baris ini dalam tag schema bagian:

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

Atribut templates menerima daftar string yang mewakili jenis halaman.

Berdasarkan fungsionalitas apa yang ingin Anda sertakan dalam tema Anda, atau persyaratan spesifik apa yang dimiliki klien Anda, kemungkinan besar Anda akan membuat serangkaian bagian berbeda yang mengaktifkan fitur unik. Untuk melihat contoh bagian modular, Anda dapat menjelajahi bagian buletin atau bagian rich-text yang digunakan di Dawn.

Pengaturan bagian

Kami telah melihat secara singkat bagaimana pengaturan file bagian dapat digunakan untuk membuat opsi penyesuaian yang dapat diakses pedagang, tetapi mari selami ini sedikit lebih dalam, untuk melihat bagaimana mereka dibangun.

Seperti yang telah kita lihat, setelan disertakan dalam file bagian, di dalam tag {% schema %} , yang menunjukkan bahwa ini adalah setelan yang harus dirender di UI editor tema. Contoh yang sangat sederhana dari hal ini dapat dilihat dengan bagian teks khusus yang dapat terlihat seperti:

Dalam contoh ini kita memiliki dua elemen HTML: elemen heading dan elemen paragraf. Setiap elemen ini berisi konten dinamis yang telah kita buat dengan objek Liquid section.settings . Objek bagian ini memungkinkan kita mengambil nilai setelan dengan mereferensikan ID unik setelan.

Di bawah markup HTML dan Liquid kami memiliki pengaturan bagian kami, yang terkandung dalam tag {% schema %} kami. Setiap pengaturan diwakili oleh objek, di mana kita dapat menentukan id pengaturan, type , dan tampilannya di editor. Untuk mengakses pengaturan bagian di Liquid, tambahkan id ke objek liquid section.settings . Kami juga menentukan jenis pengaturannya dan bagaimana tampilannya di editor tema.

Dalam pengaturan tag skema kami:

  • id mengacu pada variabel Liquid yang didefinisikan
  • type mendefinisikan jenis output yang kita buat
  • label menyediakan konteks yang ditampilkan pada editor tema
  • default memberikan nilai default

Dalam contoh ini, saya telah membuat kotak text untuk tajuk dan kotak teks richtext untuk badan kita, tetapi Anda dapat menambahkan berbagai jenis keluaran, bergantung pada kebutuhan klien Anda. Jenis input valid lainnya termasuk image_picker , radio , video_url , dan font_picker .

Contoh ini sekarang menjadi bagian yang valid, namun kami kehilangan satu aspek utama: menentukan di mana tepatnya bagian tersebut akan muncul pada tema. Kami akan menjelajahi beberapa pendekatan berbeda untuk menyertakan bagian nanti, tetapi untuk saat ini kami akan mengizinkan bagian ditambahkan melalui editor tema ke halaman mana pun dengan membuat preset di bagian tersebut.

Preset adalah konfigurasi default bagian dan ditambahkan dalam tag {% schema %} bagian. Dalam contoh sederhana kami, preset dapat terlihat seperti:

 "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"
}
]

Setelah ditambahkan ke contoh kita, bagian kotak teks khusus akan terlihat seperti:

Sekarang, jika kita menavigasi ke editor tema, dan memilih Tambahkan bagian di halaman mana saja, bagian ini akan muncul sebagai opsi yang tersedia. Pengaturan bagian yang kami buat akan muncul di sidebar kanan dengan label dan teks default yang telah kami tambahkan, dan kami dapat mengisi pengaturan teks masukan, yang akan ditampilkan di bagian kami.

Shopify theme section: Gif of cursor playing around with section settings and the different variables you can adjust

Ini adalah contoh sederhana yang menunjukkan hubungan antara pengaturan bagian dan variabel yang dapat Anda buat di dalam bagian, serta cara merendernya di editor tema. Untuk model yang lebih canggih, Anda dapat menjelajahi bagian rich text dari tema Dawn.

Termasuk bagian pada halaman

Seperti yang telah kita singgung, ada sejumlah metode untuk menyertakan bagian pada halaman tema. Mari jelajahi masing-masing pendekatan ini satu per satu, dan uraikan beberapa aturan yang berlaku untuk pendekatan tersebut.

1. Menyertakan bagian dalam template JSON

Saat kita melihat bagian halaman utama, kita melihat bahwa file template JSON menerima properti "main" , yang menjadi bagian default untuk jenis halaman tersebut, dan harus menyertakan semua elemen konten penting untuk halaman tersebut.

Selain bagian "main" , Anda juga dapat menyertakan bagian lain dalam template JSON yang akan muncul secara default pada jenis halaman tersebut. Jika kami menggunakan template JSON produk sebagai contoh, kami dapat menyertakan bagian rekomendasi produk di halaman dengan menambahkan objek baru di bawah bagian "main" :

Dalam hal ini kami menetapkan nama ke bagian, recommendations , dan properti type digunakan untuk mengidentifikasi file mana di direktori /sections yang ingin kami sertakan.

Karena template JSON ini mereferensikan lebih dari satu bagian, kita perlu menentukan bagaimana bagian muncul secara berurutan, di dalam objek order . Setiap bagian yang disertakan dalam template JSON perlu diberi urutan default, namun penjual masih dapat mengatur ulang bagian tersebut di editor tema.

Bagian tanpa preset yang ditambahkan ke template JSON tidak dapat dihapus di editor tema, tetapi dapat disembunyikan jika pedagang tidak memerlukannya. Untuk contoh nyata tentang bagaimana bagian dapat disusun dalam template JSON, Anda dapat menjelajahi template produk Dawn.

2. Menyertakan bagian sebagai opsi di semua halaman

Seperti yang kita lihat dengan teks kustom kita, dimungkinkan untuk membuat bagian tersedia di semua halaman tema ketika presets ada dalam pengaturan schema .

 "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"
}
]

Saat disertakan menggunakan pendekatan ini, bagian ini dapat ditambahkan, diposisikan ulang, dan dihapus dari editor tema. Bagian ini juga dapat dibatasi pada halaman tertentu dengan properti templates .

Fungsi seret dan lepas ini berarti bahwa saat Anda membuat bagian dinamis khusus, berbagai opsi untuk mempersonalisasi toko akan dibuka. Anda dapat membuat bagian yang dapat dipindahkan untuk video, produk, atau galeri gambar. Contoh bagus dari bagian yang menggunakan metode ini adalah bagian buletin Dawn.

3. Menggunakan tag {% section %} untuk menambahkan bagian statis

Tag section Liquid memungkinkan Anda merender bagian dari direktori /sections dalam tata letak Liquid atau file template. Tag ini dapat muncul sebagai:

 {% section 'header' %}

Bagian yang ditambahkan menggunakan tag section ini tidak dapat dihapus, diposisikan ulang, atau disembunyikan di editor tema. Posisi bagian ini di halaman dikunci, berdasarkan tempatnya ditambahkan dalam file tata letak atau template.

Pendekatan ini paling umum digunakan untuk konten dan komponen yang harus selalu terlihat seperti header, footer, dan bilah pengumuman. Untuk melihat contohnya di Dawn, Anda dapat melihat file theme.liquid di mana bilah pengumuman statis, bagian header, dan bagian footer ditambahkan dengan tag section .

Memberdayakan kreativitas

Sekarang setelah Anda melihat cara membuat dan menambahkan bagian ke tema, Anda dapat membuat opsi tanpa akhir untuk toko klien Anda.

Bekerja dengan template JSON membuka kekuatan bagian untuk semua halaman tema, yang akan memungkinkan pedagang membangun toko mereka persis seperti yang mereka inginkan—dengan arahan dari Anda.

Kembangkan bisnis Anda dengan Program Mitra Shopify

Baik Anda menawarkan layanan desain dan pengembangan web atau ingin membuat aplikasi untuk Shopify App Store, Program Mitra Shopify akan menyiapkan Anda untuk sukses. Bergabunglah secara gratis dan akses peluang bagi hasil, lingkungan pratinjau pengembang, dan sumber daya pendidikan.

Daftar

Artikel ini awalnya muncul di blog Desain dan Pengembangan Web Shopify dan tersedia di sini untuk mengedukasi dan memberikan jaring penemuan yang lebih luas.
Bagikan 2
Menciak
Membagikan
Penyangga
2 Saham