Shopify adalah salah satu platform e-commerce populer yang memungkinkan kita untuk mengelola dan menampilkan berbagai produk dengan mudah.
Bagi pemilik toko online, menampilkan SKU (Stock Keeping Unit) pada setiap produk sangat penting untuk mengoptimalkan pengelolaan inventaris, pencarian, dan informasi produk bagi pelanggan.
Pada artikel ini, saya akan membahas bagaimana cara menampilkan SKU produk di Shopify menggunakan Liquid. Liquid adalah bahasa templating yang digunakan pada platform e-commerce ini.
Pembahasan ini akan sangat membantu bagi Anda dalam memaksimalkan fungsionalitas toko online dan meningkatkan pengalaman pengguna.
Apa Itu SKU dan Mengapa Penting Ditampilkan?
SKU (Stock Keeping Unit) adalah kode unik yang digunakan untuk mengidentifikasi setiap produk atau variasi produk. Setiap SKU bersifat unik dan sangat membantu dalam:
- Melacak inventaris dengan lebih mudah.
- Mengidentifikasi produk secara spesifik, terutama untuk variasi yang berbeda seperti ukuran dan warna.
- Meningkatkan pengalaman pelanggan dengan memberikan informasi yang lebih lengkap.
Dengan menampilkan SKU di halaman produk, pelanggan dapat dengan mudah mengetahui kode produk yang mereka cari, yang juga akan memudahkan mereka jika ingin menanyakan ketersediaan atau spesifikasi produk tertentu.
Lalu, mengapa perlu menampilkan SKU menggunakan liquid? ada masanya pengembang shopify tidak leluasa menggunakan element atau section yang tersedia di shopify.
Section yang tersedia hanya menampilan angka bilangan dari SKU itu sendiri, jika ingin menambahkan kondisi dan kata-kata lain tentunya tidak dapat di lakukan. Alternatif lainnya adalah menggunakan emenent liquid untuk menampilkan kustom SKU.
Baca juga: Cara Hapus Halaman dan Produk Shopify dari Sitemap
Cara Menampilkan SKU di Halaman Produk Shopify dengan Liquid
Untuk menampilkan SKU di halaman produk Shopify, kita perlu menggunakan bahasa Liquid. Berikut ini langkah-langkah yang harus Anda lakukan.
- Buka Dashboard Shopify.
- Klik pada menu Online Store di sisi kiri, lalu pilih Themes.
- Pilih tema yang sedang aktif dan klik pada bagian ikon titik tiga disebelah tombol customize.
- Klik tombol Edit Code untuk mengakses file-file tema.
- Tambahkan kode ini dimana Anda ingin menampilkan SKU Produk
{%- assign current_variant = product.selected_or_first_available_variant -%}
<span>{{ current_variant.sku }}</span>
Kode diatas adalah kode dasar untuk menampilkan SKU produk, jika ingin menambahkan kondisi dan memastikannya muncul pada saat SKU tersedia tambahkan kode ini:
{% if product.selected_or_first_available_variant.sku != blank %}
<p>SKU: {{ product.selected_or_first_available_variant.sku }}</p>
{% endif %}
atau dapat menggunakan kode ini juga:
{%- assign current_variant = product.selected_or_first_available_variant -%}
{%- assign sku_value = current_variant.sku | times: 1 -%} <!-- Konversi sku menjadi angka -->
{% if sku_value > 0 %}
<div class="sku-details">
<span>Nog {{ sku_value }} op voorraad</span>
</div>
{% endif %}
Kode di atas menggunakan variabel product.selected_or_first_available_variant.sku
, yang akan menampilkan SKU produk jika ada. Kode ini sangat berguna karena memastikan bahwa SKU hanya ditampilkan jika memang tersedia, menghindari tampilan yang tidak perlu jika SKU kosong.
Baca juga: Cara Menghubungkan Midtrans dengan Shopify
Jika Anda memiliki produk dengan variasi (misalnya, variasi warna atau ukuran), pastikan SKU yang ditampilkan adalah SKU dari variasi yang dipilih pelanggan. Dalam Shopify, selected_or_first_available_variant.sku
sudah otomatis menyesuaikan dengan variasi yang dipilih.
Namun, jika Anda ingin lebih spesifik dalam menampilkan variasi, Anda bisa menggunakan kode berikut:
{% for variant in product.variants %}
<div>
<p>Varian: {{ variant.title }}</p>
<p>SKU: {{ variant.sku }}</p>
</div>
{% endfor %}
Kode diatas akan menampilkan semua SKU untuk setiap variasi produk, memungkinkan pelanggan untuk melihat detail dari setiap varian produk yang tersedia.
Kesimpulan
Menampilkan SKU pada toko Shopify Anda dapat memberikan dampak yang signifikan dalam hal pengelolaan inventaris, pengalaman pelanggan, dan SEO. Dengan mengikuti langkah-langkah di atas, Anda bisa memastikan bahwa setiap SKU ditampilkan secara efektif dan menarik.
Selain itu, Anda juga bisa mengoptimalkan penggunaan SKU untuk meningkatkan peringkat situs Anda di hasil pencarian. Semoga panduan ini membantu Anda memaksimalkan fungsionalitas dan tampilan toko Shopify Anda.
Jika Anda ingin membaca informasi lebih lanjut tentang pengembangan Shopify, silakan kunjungi halaman kategori Shopify ya.
Terim kasih ya sudah mampir, semoga bermanfaat untuk Anda!