Kustomisasi Shopify 2026: 5 Cara Kustomisasi dengan Tema Kustom Shopify

Saat Anda mencari tema Shopify yang Anda lihat adalah versi terbaiknya. Sudah terisi gambar, font, dan warna yang membuatnya tampak menonjol. Ini cara yang bagus untuk melihat potensi sesungguhnya dari sebuah tema.

Namun, setelah dipasang di toko Anda, tampilannya belum akan terasa benar-benar selesai sampai Anda masuk ke proses kustomisasi Shopify dengan pilihan desain Anda sendiri. Kustomisasi adalah tindakan yang mengubah tema bawaan menjadi etalase toko yang mencerminkan merek sehingga dapat membangun kepercayaan, meningkatkan konversi, dan menciptakan pengalaman belanja yang selalu diingat oleh pelanggan.

Dengan framework Horizon baru dari Shopify, tema kini lebih modular dari sebelumnya, sehingga Anda bisa bergerak lebih cepat dari tampilan standar menjadi sepenuhnya bermerek. Panduan ini akan mengulas kustomisasi tema Shopify, apa itu tema Shopify, bagaimana cara kerjanya, dan apa yang bisa Anda lakukan untuk memperkuat merek serta mendorong penjualan pada 2025.

Apa itu kustomisasi Shopify?

Kustomisasi Shopify adalah proses menyesuaikan toko online Anda agar terasa unik dan selaras dengan merek Anda. Secara bawaan, tema Shopify sudah memberi desain profesional yang siap pakai. Namun, kustomisasi memungkinkan Anda menyesuaikan desain tersebut agar cocok dengan identitas merek dan menciptakan pengalaman belanja yang terasa personal.

Jika dilakukan dengan tepat, kustomisasi dapat membantu meningkatkan konversi. Menurut Baymard Institute, merek yang menyesuaikan alur checkout mereka dapat meningkatkan konversi hingga 35%.

Bentuknya bisa berupa penyesuaian kecil, seperti mengganti font dan warna, atau perubahan yang lebih besar, seperti menyusun ulang section, menambahkan konten kustom, atau bahkan membangun sesuatu yang benar-benar dari nol. Dengan pembaruan desain terbaru Shopify, menyesuaikan toko kini lebih mudah dari sebelumnya, tanpa perlu menulis satu pun baris kode.

Jenis kustomisasi Shopify

Ada beberapa tingkat kustomisasi Shopify, tergantung tampilan yang Anda inginkan dan kemampuan teknis yang Anda miliki. Sebagian pemilik toko hanya ingin menyesuaikan warna dan mengintegrasikan beberapa aplikasi, sementara yang lain mungkin ingin membuat sesuatu yang benar-benar baru lewat kode.

Berikut yang bisa Anda lakukan:

• Penyesuaian tema cepat. Penyesuaian sehari-hari, seperti mengganti font dan logo, mengedit banner dan gambar, serta memilih apakah elemen seperti stok atau badge promo akan ditampilkan. Misalnya, Anda bisa memakai preset dari Shopify Theme Store lalu memperbarui warna aksen agar selaras dengan koleksi terbaru Anda.
• Perubahan tata letak berbasis blok. Tema Shopify modern bersifat modular, dibuat dari "blok" yang bisa Anda seret dan lepas ke mana saja di halaman. Anda bisa menyusun galeri gambar dan ulasan dalam urutan tertentu, menyembunyikan atau menampilkan blok, serta membentuk desain tiap halaman tanpa kode.
• Kustomisasi dengan bantuan AI. Pembaruan Shopify musim panas 2025 (yang terintegrasi dalam tema Horizon) memungkinkan Anda membuat blok desain secara instan dengan prompt teks. Misalnya, ketik "tambahkan penghitung waktu mundur di bawah galeri produk", dan Shopify akan membuatkannya seketika.
• Kustomisasi tingkat lanjut. Untuk kontrol yang lebih besar, developer Shopify dapat memperluas fungsi toko yang sudah ada dengan kode Liquid dan script kustom, API, serta metafield untuk membangun tata letak dan fitur yang benar-benar khusus.

Kustomisasi Shopify: merekrut developer atau melakukannya sendiri?

Salah satu keuntungan memulai dengan tema Shopify adalah banyak keputusan desain struktural sudah dibuat untuk Anda. Anda tidak perlu pusing memikirkan tata letak halaman atau menempatkan setiap gambar di dalam pembuat situs web yang rumit.

Namun, agar toko Anda benar-benar mencerminkan merek, Anda tetap perlu menambahkan sentuhan sendiri. Anggap saja seperti menata rumah, fondasinya sudah ada, tetapi Anda yang memilih warna dan menyesuaikan dekorasinya.

Rekrut developer Shopify

Jika Anda baru mengenal dunia desain web, banyaknya pilihan bisa jadi membingungkan. Anda bisa mengubah setiap warna, menukar tata letak, atau memperbarui elemen hanya dengan satu klik. Namun, menentukan mana yang paling tepat tidak selalu mudah.

Untuk fungsi dan desain yang lebih kompleks, merekrut ahli sering kali lebih hemat biaya daripada mencoba-coba sendiri, apalagi jika mempertimbangkan banyak tanggung jawab penting lain yang juga harus Anda tangani.

Marketplace Shopify Experts membantu menghubungkan Anda dengan desainer dan developer web berpengalaman yang memahami seluk-beluk platform ini. Mereka bisa memandu Anda dalam mengambil keputusan atau menangani pekerjaan desain untuk Anda.

Kustomisasi tema Shopify Anda sendiri

Dalam beberapa situasi, pendekatan do-it-yourself memang masuk akal. Mungkin Anda sedang membangun bisnis dengan anggaran terbatas, atau Anda sudah memiliki kemampuan teknis dan desain yang dibutuhkan untuk membuat situs web sendiri. Atau mungkin Anda hanya memerlukan fungsi sederhana untuk memulai, dengan rencana peningkatan di kemudian hari.

Apa pun alasannya, editor tema Shopify mudah digunakan sehingga Anda bisa menyesuaikan tampilan dan nuansa toko online tanpa kemampuan coding atau desain. Dengan alat seperti Sections Everywhere, embed aplikasi Shopify, dan templat halaman, Anda dapat menambahkan elemen menarik ke situs hanya dengan beberapa klik.

Dengan paket Basic atau yang lebih tinggi, Anda dapat membuat dan menyesuaikan tampilan toko menggunakan editor tema bawaan Shopify.

5 cara menyesuaikan toko Shopify Anda agar benar-benar terasa milik Anda

1. Temukan tema yang paling tepat di Shopify Theme Store
2. Edit pengaturan tema untuk menyesuaikan tampilan toko Anda
3. Buat templat
4. Sesuaikan toko Anda dengan aplikasi Shopify
5. Gunakan embed aplikasi Shopify untuk menambahkan lebih banyak section

Lima pendekatan ini memberi Anda perangkat yang fleksibel untuk melakukan kustomisasi.

1. Temukan tema yang paling tepat di Shopify Theme Store

Meskipun Shopify akan menetapkan tema Debut atau Dawn sebagai default toko Anda, tergantung apakah Anda menggunakan Online Store 2.0 atau tidak, Anda tidak harus bertahan dengan tema itu. Shopify Theme Store menawarkan ratusan pilihan dan memilih tema yang tepat sejak awal dapat menghemat waktu jika Anda membutuhkan fitur atau fungsi tertentu.

Ada dua kategori utama tema Shopify: gratis dan berbayar.

• Tema gratis. Paling cocok untuk toko baru atau toko kecil yang sedang bersiap meluncur atau coba-coba dengan e-commerce. Tidak ada biaya tambahan di awal maupun biaya berulang, tetapi sering kali memiliki keterbatasan dan opsi kustomisasi yang lebih sedikit. Ada lebih dari 20 tema gratis yang bisa dipilih.
• Tema berbayar. Paling cocok untuk bisnis yang sedang berkembang dan membutuhkan lebih banyak fitur. Shopify menawarkan lebih dari 800 tema berbayar, dengan kisaran harga $180 hingga $350 (biaya satu kali). Meski membutuhkan biaya awal yang lebih besar, tema berbayar menawarkan lebih banyak fungsi desain grafis, alat e-commerce, dan fitur yang lebih kuat untuk membantu Anda menyesuaikan toko online lebih jauh.

Tema kustom Shopify vs. tema siap pakai

Saat Anda menyiapkan atau mendesain ulang toko Shopify, salah satu keputusan terbesar adalah apakah akan memulai dengan tema siap pakai atau berinvestasi pada tema kustom. Keduanya punya kelebihan masing-masing, tetapi pada akhirnya keputusan ini bergantung pada anggaran, jadwal, dan seberapa besar kontrol yang Anda inginkan atas tampilan akhir toko.

Tema siap pakai tersedia langsung di Shopify Theme Store. Anda hanya perlu memasangnya, lalu melakukan penyesuaian di editor tema. Biasanya harganya sekitar $200 hingga $400 (sekali bayar). Karena desainnya sudah tersedia, Anda bisa meluncur lebih cepat, dalam hitungan hari atau minggu, tergantung seberapa banyak yang ingin Anda ubah.

Pemeliharaannya juga lebih mudah karena developer tema yang nantinya menangani pembaruan dan perbaikan bug. Konsekuensinya adalah fleksibilitas, Anda tetap berada dalam kerangka tema tersebut.

Tema siap pakai paling cocok untuk:

• Bisnis kecil hingga menengah yang menginginkan desain rapi tanpa investasi besar
• Merek yang ingin segera mulai berjualan
• Pemilik toko yang lebih menyukai dukungan dan pembaruan bawaan

Berkat Horizon, tema siap pakai saat ini jauh lebih fleksibel, bahkan sering menawarkan tingkat kustomisasi yang dulu hanya bisa dicapai lewat pembuatan tema kustom.

Sebaliknya, tema kustom dirancang dan dikodekan khusus untuk merek Anda, sehingga memberi Anda kontrol kreatif penuh. Biayanya bisa mencapai beberapa ribu hingga puluhan ribu dolar, tergantung tingkat kompleksitasnya.

Waktu peluncurannya juga jauh lebih lama, karena pembuatan tema kustom penuh bisa memakan waktu berminggu-minggu hingga berbulan-bulan. Meski begitu, Anda akan mendapatkan fleksibilitas tanpa batas dan bisa menyesuaikan setiap tata letak serta fitur agar tampil persis seperti yang Anda inginkan.

Anda akan membutuhkan developer, baik internal maupun freelance, untuk menangani pembaruan, perbaikan bug, dan fitur baru karena Anda tidak akan mendapatkan pembaruan tema otomatis seperti pada opsi siap pakai.

Tema kustom paling cocok untuk:

• Merek ternama yang membutuhkan tampilan khusus atau fungsi tingkat lanjut
• Toko dengan customer journey yang unik atau fitur khusus untuk niche tertentu
• Bisnis yang memiliki anggaran dan tim untuk memelihara kode kustom dalam jangka panjang

Berikut perbandingan singkatnya:

2. Edit pengaturan tema untuk menyesuaikan tampilan toko Anda

Setelah Anda memahami struktur umum dan fungsi tema, Anda bisa mulai fokus pada aspek desain dari kustomisasi tema Anda. Bagian dari kustomisasi Shopify ini memastikan toko online Anda selaras dengan penjenamaan visual Anda.

Untuk menyesuaikan tema Shopify, buka editor tema dari dashboard dengan masuk ke Admin > Online Store > Themes > Customize.

Berikut area mana saja yang perlu Anda perhatikan:

Palet warna

Jika Anda sudah memiliki panduan merek, sesuaikan pengaturan tema Shopify agar sejalan dengannya. Jika belum, Anda bisa menggunakan warna dari logo Anda.

Memulai dari nol? Memilih warna untuk merek bisa terasa menantang. Apakah warnanya cocok satu sama lain? Apakah warna cerah atau warna netral lebih sesuai untuk merek Anda? Cari inspirasi dari jenis produk yang Anda jual. Misalnya, jika Anda menjual furnitur kayu atau barang berbahan kulit, warna alami seperti cokelat, krem, dan oranye bisa menjadi titik awal yang baik.

Anda juga bisa menggunakan alat palet warna online, banyak di antaranya menampilkan contoh palet warna menarik yang dibuat oleh orang lain atau merek lain.

Setelah Anda memilih beberapa warna yang terlihat bagus dan sesuai dengan produk serta bisnis Anda, simpan kode heksadesimal yang mewakili warna-warna tersebut. Kombinasi enam huruf dan angka ini bisa Anda gunakan di platform online dan alat desain untuk mendapatkan warna yang persis sama di mana pun Anda membutuhkannya.

Bentuknya kira-kira seperti ini:

• #FFFFFF (putih)
• #2D2D2D (abu-abu sangat gelap)
• #50B83C (hijau)

Font

Font juga merupakan elemen penting dalam penjenamaan. Banyak dari desain toko e-commerce terbaik menggunakan kombinasi beberapa font, jadi Anda tidak harus terpaku pada satu font atau bahkan satu gaya saja. Carilah font yang saling melengkapi dan bekerja sama tanpa terlihat berulang.

Secara umum, sebaiknya gunakan dua atau tiga font saja. Jika menggunakan lebih dari itu, merek Anda bisa terasa kurang fokus, sekaligus mengganggu alur informasi. Meskipun mencoba-coba terasa sangat menggoda, usahakan tetap seimbang antara keterbacaan, konsistensi, dan kejelasan.

Pilih font yang saling melengkapi

Cara tercepat menemukan kombinasi font yang tepat adalah dengan memilih gaya dalam rumpun keluarga font yang sama, seperti Helvetica atau Times New Roman. Rumpun keluarga font biasanya memiliki beberapa variasi, bobot dan gaya yang berbeda dan memang sudah dirancang agar cocok digunakan bersama.

Font dengan bobot lebih tebal bisa berupa versi bold untuk heading, sementara variasi gaya bisa berupa versi huruf kapital semua untuk subjudul.

Pilih typeface yang kompatibel

Jika Anda belum pernah berkutat dengan font sebelumnya, berikut pengantar singkat tentang typeface. Ada beberapa gaya dasar teks yang umum Anda temui.

• Serif. Typeface seperti Times New Roman dan Georgia memiliki "kaki" kecil di ujung huruf.
• Sans serif. Typeface seperti Arial dan Helvetica tidak memiliki "kaki" kecil tersebut.
• Script. Typeface ini mencakup apa pun yang tampak seperti kaligrafi atau tulisan tangan.
• Monospace. Typeface ini memiliki jarak huruf yang sama lebar, dan sering terlihat dalam kode komputer. Contoh yang paling umum adalah Roboto Mono.

Anda bisa memadukan font dari typeface yang berbeda untuk menciptakan kontras yang kuat.

Menggabungkan typeface berdasarkan kontras sangat efektif untuk membangun hierarki. Typeface yang kontras membuat perbedaan antara heading, subheading, dan isi teks menjadi jelas.

Hierarki membantu mengarahkan pelanggan Anda ke informasi yang paling penting.

Mainkan ukuran font secara sengaja

Mainkan ukuran font secara sengaja untuk menonjolkan hal yang penting dan memandu pengguna saat menjelajahi situs Anda. Semakin penting kontennya, semakin besar ukuran font yang sebaiknya digunakan.

Setelah Anda memilih ukuran font untuk isi teks dan heading, pertahankan pilihan itu agar pelanggan dapat dengan mudah membedakan mana judul dan mana paragraf. Konsistensi membuat toko Anda lebih mudah dibaca dan dinavigasi. Semakin sedikit hambatan berarti penjualan bisa terjadi lebih cepat.

3. Buat templat

Meskipun mencoba-coba font dan warna baru di berbagai halaman terasa menarik, ingatlah bahwa konsistensi adalah fondasi utama dalam membangun merek. Pelanggan harus bisa mengenali dan menavigasi toko Anda dengan mudah. Berpegang pada satu set inti font, warna, dan gaya akan sangat membantu mencapai tujuan itu.

Itulah sebabnya templat halaman atau section menjadi fitur yang berguna dalam kustomisasi tema Shopify.

Templat halaman berguna untuk hal-hal yang sering Anda gunakan kembali, seperti posting blog, landing page, sales funnel, atau bahkan halaman produk. Saat Anda memulai dari templat, Anda bisa menjaga konsistensi sekaligus mengurangi tenaga kreatif dan waktu yang dibutuhkan untuk membuat setiap halaman tersebut.

Section adalah blok konten bertemplat yang lebih kecil, seperti formulir kontak, ajakan bertindak, atau pendaftaran buletin yang ingin Anda sisipkan di beberapa halaman. Anda hanya perlu memperbarui konten di section itu satu kali kemudian perubahan akan otomatis muncul di semua tempat yang menggunakan section tersebut.

Untuk membuat dan mengedit section, buka editor tema Anda lalu klik "+ Add section". Pilih section baru dari daftar atau cari section yang ingin Anda edit. Gunakan ikon ⋮⋮ di samping untuk menyeret dan menyusun ulang section guna mengubah urutan dan tata letak section di halaman. Klik Save setelah selesai.

4. Sesuaikan toko Anda dengan aplikasi Shopify

Shopify App Store memiliki lebih dari 8.000 aplikasi yang mencakup segala hal mulai dari penyesuaian desain hingga fungsi tingkat lanjut. Anda akan menemukan aplikasi dalam kategori utama seperti desain toko, marketing dan konversi, pesanan dan pengiriman, saluran penjualan, manajemen toko, penjualan produk, dan pencarian produk.

Di dalam kategori desain toko saja, Anda akan menemukan subkategori untuk konten, elemen desain, gambar dan media, navigasi, optimasi situs, dan lainnya. Intinya adalah mengidentifikasi apa yang ingin Anda sesuaikan, lalu menemukan aplikasi yang dapat memenuhi kebutuhan tersebut.

Berikut beberapa perubahan kustom yang bisa Anda lakukan dengan aplikasi desain toko:

• Ubah bilah pencarian Anda. Tingkatkan pencarian, filter dan rekomendasi produk, tambahkan pencarian visual, serta sempurnakan pengalaman pencarian secara keseluruhan dengan aplikasi seperti Shopify Search & Discovery.
• Tambahkan rekomendasi produk. Sarankan produk serupa untuk meningkatkan nilai pesanan rata-rata (average order value/AOV). Lihat bagaimana Thousand menggunakan aplikasi untuk melakukannya.
• Masukan ulasan pelanggan. Aplikasi seperti Okendo dan Judge.me membantu Anda mengoptimalkan konversi dengan bukti sosial melalui ulasan pelanggan.
• Buat templat landing page. Untuk kustomisasi landing page dan templat yang lebih kuat, gunakan aplikasi seperti Shogun, yang dilengkapi editor drag-and-drop yang mudah digunakan.
• Sesuaikan checkout. Samakan pengalaman checkout dengan merek visual Anda dan optimalkan untuk mengurangi kesulitan sekaligus meningkatkan penjualan. Aplikasi seperti Skip To Checkout dan Zipify One Click Upsell dapat membantu Anda melakukannya. Semua paket mulai dari Basic mendukung checkout standar. Kustomisasi checkout tingkat lanjut atau penuh, seperti mengubah tata letak atau perilakunya, hanya tersedia di Shopify Plus.

5. Gunakan embed aplikasi Shopify untuk menambahkan lebih banyak section

Embed aplikasi Shopify adalah elemen yang disediakan aplikasi yang melayang di etalase toko Anda, seperti gelembung chat, atau menambahkan kode ke toko online Anda tanpa terlihat oleh pelanggan. Fitur ini memungkinkan Anda memperluas fungsi tanpa membuat desain halaman terasa penuh.

Misalnya, merchant Shopify Ora Organic menggunakan embed aplikasi obrolan langsung yang didukung Gorgias, sehingga pengguna dapat berinteraksi dengan dukungan pelanggan sambil tetap melanjutkan penelusuran situs web tanpa merasa terganggu.

Embed aplikasi dikelola melalui editor tema dan berfungsi dengan versi tema apa pun.

Seperti section, embed aplikasi hanya perlu disiapkan satu kali. Jadi, setiap perubahan yang Anda lakukan pada embed aplikasi akan otomatis tampil di setiap halaman tempat embed tersebut muncul.

Untuk menyesuaikan embed aplikasi Shopify, klik "App embeds" dari editor tema. Pilih embed aplikasi yang ingin Anda kelola atau klik bilah pencarian lalu masukkan kata kunci untuk menelusuri aplikasi yang sudah terpasang. Klik toggle untuk mengubah statusnya (aktif atau nonaktif). Lihat pengaturan embed aplikasi dengan mengklik ikon expand (▸) untuk menyesuaikan detailnya.

Menggunakan editor tema Shopify

Editor tema Shopify adalah ruang kerja desain utama Anda. Di sinilah Anda menyesuaikan tampilan dan tata letak toko tanpa harus menyentuh kode.

Berikut beberapa tips yang berguna agar Anda bisa memaksimalkannya:

• Mulai dari homepage. Pembeli pada umumnya pertama kali tiba di halaman ini. Halaman ini menentukan kesan untuk seluruh toko Anda. Buat hero banner, produk unggulan, dan ajakan bertindak yang sesuai sebelum mengalihkan  pengunjung ke halaman yang lebih spesifik.
• Utamakan ramah pengguna mobile. Lebih dari setengah lalu lintas e-commerce berasal dari ponsel. Selalu lakukan pratinjau di perangkat mobile sebelum mempublikasikan tema.
• Buat salinan tema sebelum bereksperimen. Di Themes > Actions > Duplicate, buat salinan cadangan sebelum mencoba perubahan.
• Manfaatkan preset. Sebagian besar tema pada umumnya, termasuk Horizon, hadir dengan beberapa preset yang sudah disempurnakan dan dapat Anda gunakan sebagai dasar, lalu disesuaikan di editor.
• Perhatikan ukuran file. Shopify memiliki batas ukuran file sebesar 50 megabyte untuk unggahan tema dan 20 megabyte untuk file lainnya. Untuk gambar, usahakan kurang dari satu megabyte per file, idealnya 500 kilobyte atau di bawahnya dan gunakan format yang direkomendasikan (JPEG untuk foto, PNG untuk grafis transparan, dan SVG untuk logo/ikon).

Mengakses editor tema

Masuk ke editor sangat mudah:

1. Masuk ke admin Shopify Anda.
2. Buka Online Store > Themes.
3. Di bawah tema yang sedang digunakan, klik Customize.

Mengklik Customize akan membuka editor tema, tempat Anda melihat pratinjau langsung etalase toko di sisi kanan dan sidebar berisi section yang bisa diedit di sisi kiri.

Fitur dan alat utama editor

Setelah Anda masuk ke editor tema Shopify, berikut yang akan Anda gunakan:

• Section dan blok (sidebar). Tema Shopify dibuat menggunakan section modular. Anda dapat menambahkan, menghapus, menyusun ulang, atau menyembunyikan section. Anda juga dapat mengedit masing-masing blok seperti tombol, gambar, atau heading.
• Pengaturan tema. Atur gaya keseluruhan, seperti font, warna, favicon, penjenamaan checkout, dan tautan media sosial. Mengubah sesuatu di sini akan memperbaruinya di seluruh toko.
• Pratinjau perangkat. Beralih antara tampilan desktop, tablet, dan mobile untuk memastikan desain Anda berfungsi dengan baik di semua ukuran layar.
• Embed aplikasi. Banyak aplikasi dapat terhubung langsung ke editor sehingga Anda bisa menambahkan fitur seperti ulasan, widget chat, atau badge langsung ke tema.
• Sumber dinamis. Tarik detail produk, metafield, atau data dinamis lain langsung ke blok Anda. Contohnya, Anda bisa menampilkan info pengiriman atau menambahkan pesan promosi yang terhubung dengan metafield.
• Preset dan gaya tema. Beberapa tema, termasuk Horizon, hadir dengan beberapa "tampilan" yang sudah dirancang sebelumnya, seperti palet warna, kombinasi font, dan tata letak, yang bisa Anda mengubahnya sebagai titik awal yang cepat.
• Editor bahasa. Sesuaikan string teks atau redaksi default yang muncul di seluruh tema Anda, misalnya Add to cart > Buy now.
• Pengaturan aksesibilitas dan SEO (pada beberapa tema). Tambahkan alt text, heading, dan optimasi lain untuk meningkatkan kebermanfaatan sekaligus visibilitas pencarian.

Kustomisasi Shopify tingkat lanjut untuk developer

Untuk merek dengan kebutuhan yang lebih kompleks, Shopify menawarkan cara untuk melampaui editor tema, terutama jika Anda bekerja sama dengan developer Shopify yang andal. Mereka dapat melampaui batasan templat situs web yang sudah dirancang sebelumnya dengan memanfaatkan kode, API, dan alat kustomisasi tingkat lanjut.

Dokumentasi developer Shopify dapat membantu developer membangun aplikasi, menyesuaikan tema dengan kode, dan bahkan membuat framework untuk headless commerce.

Pengenalan templating Liquid

Liquid adalah bahasa templating open-source milik Shopify dan fondasi dari setiap tema Shopify. Liquid memungkinkan developer membuat halaman dinamis dengan menarik konten dari back-end Shopify, misalnya produk, koleksi, dan data pelanggan, lalu merendernya di templat front-end.

Dengan Liquid, Anda dapat:

• Menggunakan tag, objek, dan filter untuk menampilkan data dinamis, misalnya {{ product.title }}
• Membuat snippet dan tata letak yang dapat digunakan ulang untuk desain yang konsisten
• Membuat logika kondisional, misalnya menampilkan badge hanya jika produk sedang diskon
• Memperluas atau menimpa templat tema dengan kode kustom

Misalnya, snippet sederhana ini menunjukkan cara Liquid dapat memeriksa stok dan menampilkan elemen yang berbeda.

{% if product.available %}
<button>Add to cart</button>
{% else %}
<p>Sold out</p>
{% endif %}

Menggunakan metafield untuk data kustom

Metafield memungkinkan Anda menyimpan dan menampilkan data kustom yang tidak cocok dimasukkan ke field produk standar Shopify. Fitur ini memperluas fungsi toko Anda tanpa mengubah tema.

Beberapa penggunaan yang sering digunakan meliputi:

• Menambahkan panduan ukuran atau petunjuk perawatan ke halaman produk
• Menyimpan tanggal "back in stock" atau informasi preorder
• Menampilkan ikon atau label kustom, misalnya "Vegan" atau "Ramah lingkungan"
• Membuat field konten unik untuk posting blog atau landing page

Dan berikut cara kerjanya:

• Tentukan namespace dan key metafield di admin Shopify, misalnya details.material.
• Tetapkan nilai untuk produk, koleksi, atau resource lainnya.
• Panggil metafield tersebut di templat Liquid Anda.

Misalnya, kode di bawah ini mengambil metafield kustom "material" dan menampilkannya di halaman produk.

{% if product.metafields.details.material %}
<p>Material: {{ product.metafields.details.material }}</p>
{% endif %}

Shopify Anda, suka-suka Anda

Setiap tema Shopify memenuhi standar tinggi, dilengkapi fitur bawaan yang memungkinkan merek menawarkan diskon, merekomendasikan produk, mengumpulkan email, dan melakukan lebih banyak hal untuk pembeli. Selain itu, semua tema mendapatkan pembaruan gratis, sehingga Anda selalu memiliki versi terbaru.

Tema Shopify telah dioptimalkan untuk penjualan online. Tema dirancang agar mampu memuat cepat, bekerja bebas hambatan di perangkat mobile, dan memberikan pengalaman checkout terbaik, sekaligus melengkapi merek Anda yang saat ini. Dengan kustomisasi yang tepat, toko Anda akan menjadi lebih dari sekadar templat, toko Anda akan membangun kepercayaan dan menciptakan pengalaman belanja yang membuat pelanggan ingin terus kembali lagi.