Bantuan
Masuk

Kustomisasi tampilan produk dan koleksi lanjutan untuk plugin Shopify

Pengaturan lanjutan ini membantu Anda menyesuaikan etalase toko online di WordPress, mempersonalisasi merek bisnis Anda, dan meningkatkan pengalaman belanja pelanggan.

Di halaman ini

Plugin Shopify dan komponen etalase toko online Shopify

Plugin Shopify dibuat dengan Shopify Storefront Web Components. Komponen berikut digunakan sebagai blok penyusun etalase toko online Shopify Anda:

  • Komponen Kartu Produk: Komponen ini menampilkan informasi produk individual, yang biasanya ditampilkan di cantuman produk atau halaman koleksi. Komponen ini sering kali menyertakan elemen seperti foto produk, judul, harga, dan tombol Tambah ke keranjang.
  • Komponen Modal Tampilan Cepat Produk: Komponen ini menampilkan modal di atas konten yang ada dengan detail produk, tombol Tambah ke keranjang, dan link untuk melihat detail produk lengkap.
  • Komponen Halaman Detail Produk: Komponen ini menampilkan satu produk, dengan detail produk lengkap. Setiap komponen halaman detail produk memiliki URL yang unik.
  • Komponen Koleksi: Komponen ini menampilkan koleksi produk yang telah Anda buat.

Kustomisasi tampilan produk dan koleksi Shopify

Komponen etalase toko online Shopify default pada plugin Anda memiliki alat untuk membantu menciptakan pengalaman belanja yang lancar. Anda juga memiliki fleksibilitas untuk menyesuaikan tampilan komponen ini agar selaras dengan identitas merek dan persyaratan desain spesifik Anda.

Untuk melakukan kustomisasi tersebut, Anda harus memiliki akses untuk mengubah file dan direktori tema WordPress Anda. Prosesnya meliputi pembuatan folder khusus di dalam direktori tema WordPress aktif Anda.

Langkah-langkah:

  1. Buat folder Shopify: Mulailah dengan membuat folder baru bernama Shopify langsung di dalam direktori tema aktif Anda. Folder ini berfungsi sebagai lokasi pusat untuk override komponen kustom Anda.
  2. Override Komponen Individual: Untuk mengubah komponen tertentu, tambahkan file PHP dengan nama yang ditentukan di dalam Shopify folder yang baru dibuat. Konvensi penamaan untuk file override ini sangat penting agar plugin dapat mengenali dan menerapkan versi kustom Anda:
    • Untuk meng-override Komponen Kartu Produk, buat file PHP bernama product-card.php di dalam folder Shopify.
    • Untuk meng-override Komponen Modal Tampilan Cepat Produk, buat file PHP bernama modal.php di dalam folder Shopify.
    • Untuk menimpa Komponen Halaman Detail Produk, buat file PHP bernama pdp.php di dalam folder Shopify.
    • Untuk menimpa Komponen Koleksi, buat file PHP bernama component.php di dalam folder Shopify.

Setelah file PHP kustom Anda dibuat, plugin akan mengabaikan file komponen defaultnya untuk elemen spesifik tersebut. Anda dapat mengimplementasikan kode apa pun di dalam file penimpa ini, mulai dari blok HTML statis hingga logika PHP yang kompleks.

Meskipun sangat disarankan untuk memanfaatkan Komponen Web Etalase Toko Online Shopify (seperti yang digunakan dalam struktur plugin default) demi konsistensi dan akses ke fungsionalitas Shopify bawaan, Anda tidak terbatas pada komponen tersebut. Anda dapat mengintegrasikan metode lain untuk mengambil dan menampilkan data produk dan koleksi, yang memungkinkan kustomisasi tingkat lanjut.

Untuk informasi selengkapnya dan praktik terbaik, lihat dokumentasi developer plugin WordPress.

Penulisan ulang produk dan koleksi Shopify

Saat Anda menerbitkan produk atau koleksi di Shopify, setiap produk dan koleksi memiliki URL unik. Secara default, URL ini dibuat dengan domain Shopify Anda. Dengan fungsi penulisan ulang, Anda dapat mengakses URL unik tersebut dengan domain WordPress publik Anda.

Langkah-langkah:

  1. Dari plugin Shopify, buka Pengaturan.
  2. Di tab Lanjutan, pastikan dua kotak centang di bagian Penulisan ulang tautan Shopify diaktifkan.
  3. Buka Permalink.
  4. Klik Simpan untuk menerapkan aturan baru ini.
  5. Buka admin Shopify Anda, lalu buka halaman detail produk atau koleksi yang ingin Anda buatkan tautan WordPress-nya.
  6. Di kartu cantuman mesin pencari, ada URL yang ditampilkan yang menautkan pelanggan langsung ke produk atau koleksi Anda. Contoh: https://johns-apparel.myshopify.com › products › huskee-reusable-cup.
  7. Tambahkan products/huskee-reusable-cup di akhir URL situs WordPress Anda. Contoh: https://johns-apparel-wordpress.com/products/huskee-reusable-cup.

Sesuaikan perilaku kartu produk Anda

Dengan komponen etalase toko online Shopify, ada dua jenis kartu detail produk:

  1. Tampilan cepat: Saat mengarahkan kursor ke kartu produk, pelanggan memiliki opsi untuk Quick Shop. Saat diklik, detail produk ditampilkan dalam gaya pop-up atau modal di atas konten yang ada di latar belakang.
  2. Halaman produk terperinci: Saat pelanggan mengeklik kartu produk, seperti pada gambar atau nama produk, detail produk ditampilkan dalam tampilan halaman penuh dengan URL unik.

Anda dapat mengubah pengaturan ini untuk menampilkan hanya tampilan cepat, hanya halaman produk terperinci, atau keduanya.

Langkah-langkah:

  1. Dari plugin Shopify di WordPress, buka Pengaturan.
  2. Dari tab Lanjutan, buka bagian Tampilan Produk.
  3. Pilih opsi yang paling sesuai untuk toko Anda.
  4. Klik Simpan.