Shopify adalah salah satu platform e-commerce paling populer di dunia, memungkinkan pengguna untuk membuat toko online dengan mudah. Salah satu keunggulan Shopify adalah fleksibilitasnya dalam pengaturan tata letak melalui Shopify Liquid, bahasa pemrograman template yang digunakan untuk menyesuaikan desain toko Anda.
Pada artikel ini, kami akan membahas secara rinci cara membuat kustom section di Shopify menggunakan Liquid. Fungsinya untuk Anda sebagai pengguna shopify adalah dapat membuat section sesuai dengan kebutuhan dan keinginan.
Apa Itu Shopify Liquid?
Shopify Liquid adalah bahasa templat open-source yang digunakan untuk membangun halaman dan fitur dinamis pada toko Shopify. Liquid berfungsi sebagai penghubung antara data toko Anda dan template HTML, memungkinkan kustomisasi yang lebih luas.
Dengan pemahaman dasar Liquid, Anda dapat membuat elemen kustom seperti section, snippet, hingga pengaturan halaman tertentu.
Cara Buat Kustom Section Shopify Liquid
Ingin buat section shopify sendiri yang tidak ada di tema? atau ingin membuat section untuk mempermudah penataan halaman? ini cara mudahnya:
1.Masuk ke Dashboard Shopify
Langkah pertama adalah login ke akun Shopify Anda dan navigasikan ke bagian admin. Pastikan Anda memiliki akses ke tema toko Anda dengan membuka menu Online Store » Themes.
2. Edit Tema
Selanjutnya akan diarahkan ke tampilan tema shopify. Pilih tema yang aktif lalu klik pada ikon titik tiga lalu pilih Edit code.
3. Tambah Kustom Section
Jika sudah masuk ke halaman edit tema, perhatikan pada bagian sidebar bagian kanan. Klik atau buka pada bagian sections, klik add new a section untuk menambahkan kustom section baru.
Nantinya akan muncul popup, pilih liquid lalu beri nama file section yang akan dibuat lalu klik Done.
Shopify akan otomatis membuat file baru dengan struktur dasar berikut:
{% schema %}
{
"name": "Section name",
"settings": []
}
{% endschema %}
4. Tambahkan Kode HTML
Tambahkan kode HTML dan Liquid ke dalam file section baru Anda. Jangan lupa untuk menambahkan kode schema ya!. Pada kustom section ini kita akan membuat section CTA (call to action).
Baca juga: Panduan Lengkap! Mengaktifkan Cookie Banner Shopify
<div>
<h2>{{ section.settings.text-box }}</h2>
<a href="{{ section.settings.link }}">
{{ section.settings.linktext }}
</a>
</div>
{% schema %}
{
"name": "Call to action",
"settings": [
{
"id": "text-box",
"type": "text",
"label": "Heading",
"default": "Title"
},
{
"id": "link",
"type": "url",
"label": "Link URL"
},
{
"id": "linktext",
"type": "text",
"label": "Link text",
"default": "Click here"
}
]
,
"presets": [
{
"name": "Call to Action",
"category": "Promotional"
}
]
}
{% endschema %}
Simpan kode tadi, klik tombol save.
5. Menampilkan Kustom Section
Setelah menambahkan kode HTML dan liquid, selanjutnya adalah menampilkan kustom section yang sudah dibuat. Kembali ke halaman dashboard shopify » Online store » Themes lalu klik tombol Customize
Pada halaman editor silahkan klik pada bagian Add section, letaknya pada sidebar sebelah kiri editor. Tambahkan section yang sudah dibuat tadi sesuai dengan nama pada schema tadi.
Setelah semua langkah selesai, kembali ke Theme Editor di Shopify untuk melihat section baru Anda. Lakukan penyesuaian jika diperlukan sebelum mempublikasikan tema Anda.
hasilnya:
Baca juga: Cara Backup Tema Shopify
Tips untuk Mengoptimalkan Section Kustom
- Gunakan Class dan ID yang Jelas
Pastikan setiap elemen dalam section memiliki nama class atau ID yang deskriptif untuk memudahkan styling dengan CSS. - Minimalkan Kode
Hindari kode berlebihan untuk menjaga kecepatan loading toko Anda. - Gunakan Variabel Liquid dengan Efisien
Manfaatkan variabel sepertifor loopsdanif statementsuntuk membuat kode lebih dinamis. - Uji di Berbagai Perangkat
Pastikan section Anda terlihat baik di desktop, tablet, dan perangkat mobile.
Kesimpulan
Dengan mengikuti langkah-langkah di atas, Anda dapat membuat section kustom di Shopify Liquid yang sesuai dengan kebutuhan toko Anda. Personalize tampilan toko untuk meningkatkan pengalaman pengguna dan meningkatkan konversi.
