9 Cara Membuat Halaman Produk Shopify dengan Konversi Tinggi

Untuk pemilik toko e-niaga, halaman produk Anda layak mendapatkan banyak perhatian Anda. Ada begitu banyak elemen yang perlu dipertimbangkan, tetapi juga banyak peluang untuk menciptakan pengalaman berbelanja yang menyenangkan bagi pelanggan Anda.

Dalam artikel ini, kita akan melihat beberapa area yang dapat Anda fokuskan untuk benar-benar mengoptimalkan halaman produk e-niaga Anda untuk konversi yang lebih tinggi, pengalaman berbelanja yang lebih baik, dan mengubah browser Anda menjadi pembeli.

1. Petakan elemen halaman produk Anda

Langkah pertama dalam mendesain halaman e-niaga yang dioptimalkan untuk konversi adalah dengan memasukkan elemen-elemen yang biasa digunakan di laman e-niaga yang sukses.

Melihat toko populer seperti Asos sebagai contoh, kami dapat mengidentifikasi beberapa faktor penting yang mereka temukan bekerja dengan baik di halaman produk mereka.

Dengan halaman produk yang memiliki dampak signifikan pada konversi, Anda dapat yakin Asos akan mendedikasikan sumber daya untuk menguji dan mengoptimalkan setiap komponen.

Perhatian terhadap detail ini terbukti jika kita melihat bagaimana halaman produk biasa dimuat dalam gerakan lambat – dibatasi pada 250kb/dtk (atau koneksi 3g biasa). Urutan bagaimana setiap komponen memuat memberi kita beberapa indikasi betapa pentingnya setiap komponen.

Urutan pemuatan elemen berjalan:

• Navigasi dan logo . Pengguna harus selalu tahu di mana mereka berada dan memiliki cara untuk menavigasi ke halaman lain dengan cepat.
• Thumbnail produk. Gambar menyampaikan bahwa pengguna berada di halaman yang tepat dan memberi mereka pratinjau halaman sebelum dimuat sepenuhnya.
• Judul produk dan remah roti. Selanjutnya, konfirmasikan pilihan pengguna dan beri mereka opsi cepat untuk menavigasi kembali ke kategori serupa
• Gambar produk utama . Foto produk adalah apa yang pelanggan cari. Perhatikan bahwa ini dimuat bahkan sebelum ajakan bertindak, meskipun gambar biasanya berukuran file lebih besar.
• Panggilan untuk bertindak . Tombol tambahkan ke troli
• Informasi tambahan . Informasi produk lebih lanjut yang terletak di paro bawah dimuat terakhir.

Mari kita urai beberapa komponen halaman produk Asos lebih lanjut.

2. Sorot foto produk depan & tengah

Asos adalah situs konten-berat yang menggunakan fotografi dalam berbagai cara. Saat Anda berada di beranda, Anda tidak akan melihat foto yang tertaut ke produk tertentu, melainkan ke koleksi.

Tetapi ketika pelanggan mengklik ke suatu produk, itu adalah cerita yang berbeda. Hal pertama yang mereka lihat adalah gambar produk di bagian depan dan tengah. Konten kecil apa yang tersisa di paruh atas semuanya disejajarkan di sekitar galeri foto utama ini.

Kami akan berbicara lebih banyak tentang pentingnya berbagai foto berbeda yang digunakan Asos, tetapi pemosisian dan keunggulan adalah yang penting sekarang. Foto produk membantu pelanggan segera mengetahui detail tentang suatu produk lebih cepat daripada deskripsi apa pun dan membantu mereka menemukan produk yang mereka cari lebih cepat. Mereka harus ditempatkan dengan jelas dan dimuat dengan cepat.

3. Tampilkan informasi pengiriman dengan jelas

Asos tidak hanya memiliki spanduk pengiriman dan pengembalian gratis, tetapi mereka juga menautkan ke detail pengiriman gratis ke seluruh dunia di sebelah harga. Jenis promosi e-commerce ini dapat secara signifikan mempengaruhi keputusan pembelian.

Biaya pengiriman yang tinggi dinilai sebagai alasan nomor satu konsumen meninggalkan keranjang mereka, dan 93% konsumen menyatakan bahwa mereka akan membeli lebih banyak produk jika tersedia pengiriman gratis. Mengetahui hal ini, Asos melakukan apa saja untuk mempromosikan penawaran pengiriman gratisnya.

4. Sertakan detail tambahan

Sementara halaman produk Asos mungkin memiliki sedikit informasi di paro atas, banyak informasi tambahan tentang produk sudah tersedia untuk pelanggan yang tertarik untuk mempelajari lebih lanjut.

Karena pelanggan tidak dapat secara fisik mencoba produk atau mengajukan pertanyaan kepada penjual, Anda harus melakukan segala yang Anda bisa untuk membantu mendidik mereka dan memberikan jawaban atas pertanyaan yang mungkin mereka miliki.

Detail seperti apa yang harus Anda sertakan?

Informasi ini dapat mencakup detail seperti:

• Bahan produk
• Gaya
• Fitur desain yang signifikan
• Instruksi perawatan dan pemeliharaan
• Informasi tentang merek atau produsen
• Informasi meta seperti SKU yang dapat membantu pelanggan melakukan penelitian lebih lanjut atau menghubungi Anda.

Untuk merek fashion, detail tambahan ini bisa menjadi sangat penting. Asos juga menyertakan ukuran model dan ukuran apa yang mereka kenakan sehingga pelanggan dapat lebih akurat mengukur bagaimana produk ini cocok untuk mereka.

Mengapa informasi tambahan ini begitu penting?

Pertama, memiliki deskripsi produk yang unik dapat menjadi cara yang bagus untuk meningkatkan lalu lintas mesin pencari organik Anda. Tetapi mereka juga harus membantu menjawab pertanyaan mengapa pelanggan harus memilih produk atau toko Anda daripada produk pesaing. Memberikan detail tambahan ini menunjukkan bahwa Anda memiliki tingkat keahlian yang lebih tinggi pada produk daripada sekadar mencantumkan detail dasar yang dapat dilihat dari foto produk.

Lebih banyak informasi juga berarti pelanggan dapat membuat pilihan berdasarkan informasi secara mandiri, dan ini tidak hanya baik untuk mereka. Membantu pelanggan untuk melakukan pembelian yang mereka yakini dapat membantu mengarah pada dukungan pelanggan yang lebih rendah dan pengembalian yang lebih sedikit.

5. Menampilkan ajakan bertindak yang jelas

Fitur desain fitur lain dari situs web Asos adalah ajakan bertindak yang jelas yang tersedia di halaman produk.

Tidak ada proses pemesanan berbelit-belit yang terlibat. Padahal, semua informasi yang dibutuhkan pelanggan tersampaikan dalam foto, judul, dan deskripsi produk. Pelanggan hanya perlu memilih ukuran mereka dan mengklik tombol Tambah ke Keranjang yang menonjol. Setelah melakukannya, mereka bertemu dengan popup yang tidak mengganggu yang mengkonfirmasi pilihan mereka. Munculan ini memungkinkan mereka untuk menyelesaikan pembayaran lebih cepat atau melanjutkan berbelanja, sebelum menghilang setelah beberapa detik.

Banyak toko memilih satu bentuk pemberitahuan atau yang lain, baik mengarahkan mereka ke troli atau menampilkan troli pop-up segera setelah item ditambahkan, atau, sebagai alternatif, tidak mengambil pilihan sama sekali dan menyerahkannya kepada pelanggan untuk arahkan ke kasir. Pendekatan ini tampaknya menjadi jalan tengah yang baik.

Jika pelanggan belum siap untuk membeli, Asos juga menyertakan cara mudah bagi pelanggan untuk memfavoritkan item tersebut. Sebagian besar toko sekarang memiliki semacam fitur daftar keinginan, tetapi yang hebat dari eksekusi Asos adalah kenyataan bahwa pengguna tidak perlu membuat akun agar item tetap disimpan selama 60 hari di cache browser mereka.

Namun, mengklik tombol masih mengirimkan permintaan kembali ke Asos, sehingga mereka mengetahui detail seperti tipe pengguna yang menyimpan item, item apa yang disimpan, dan kapan disimpan – semua informasi fantastis yang dapat mereka gunakan untuk menargetkan ulang pelanggan di media sosial.

6. Gunakan latar belakang putih pada gambar produk Anda

Di Pixc, lebih dari 90% klien kami memilih agar foto mereka diedit untuk menghapus latar belakang dari gambar mereka dan menggantinya dengan warna putih. Dan itu bukan hanya kami. Memiliki latar belakang putih (atau setidaknya konsisten) untuk semua gambar produk Anda telah menjadi standar untuk setiap toko eCommerce yang sukses.

Jadi mengapa itu sangat penting?

Ini menghemat uang Anda

Menjaga latar belakang yang konsisten mempercepat proses membawa produk baru, memotret, dan mengedit. Toko seperti Asos mampu memiliki studio, fotografer, dan editor untuk memastikan tata letak dan pencahayaan yang konsisten di seluruh produk mereka, tetapi bahkan untuk toko eCommerce besar yang menggunakan latar belakang putih dapat menghemat banyak waktu.

Alih-alih memiliki tim internal, Anda cukup memotret produk Anda dan mengeditnya untuk konsistensi. Atau lebih baik lagi, kirimkan mereka ke layanan seperti Pixc untuk mengotomatiskan proses Anda lebih jauh.

Ini menekankan produk Anda lebih baik

Tanpa latar belakang, tidak ada gangguan untuk mengambil dari produk itu sendiri. Latar belakang putih memungkinkan Anda menampilkan detail produk dan fitur spesifik dengan lebih baik yang mungkin luput dari perhatian.

Ini membantu pelanggan menelusuri produk Anda

Ketika semua foto produk serupa, pelanggan dapat dengan mudah memindai halaman koleksi Anda dan memilih produk yang mereka cari.

7. Menggabungkan perpaduan fotografi yang baik

Tingkatkan jumlah foto yang Anda tampilkan

Dengan fotografi produk Anda yang begitu penting, penting untuk menyertakan berbagai bidikan berbeda dari produk Anda. Satu foto tambahan dapat menyampaikan lebih banyak informasi daripada deskripsi apa pun.

Hanya 0,52% konsumen yang ingin melihat satu foto, sementara 33,16% lebih suka melihat banyak foto dan 58,03% ingin melihat foto produk yang menampilkan produk secara 360° penuh.

Artinya, Anda perlu menyertakan campuran foto produk untuk menampilkan setiap sudut produk dan memanfaatkan berbagai fotografi untuk menekankan poin utama produk. Misalnya, untuk produk seperti sepatu, gunakan close-up sol dan jahitan untuk menyampaikan nilai jual utama produk.

Pertimbangkan bidikan dalam konteks

Foto konteks yang menunjukkan produk Anda sedang beraksi dapat membantu membangkitkan imajinasi pelanggan. Ini juga memberi mereka kesempatan untuk melihat tampilannya di luar pengaturan showroom.

8. Optimalkan metadata gambar Anda

Terlalu banyak toko e-niaga yang dikecewakan oleh gambar produk mereka. Sementara platform seperti Shopify dan BigCommerce membantu menghadirkan kompresi dan rasio aspek yang tepat kepada massa, ada beberapa kebiasaan baik lainnya yang harus selalu Anda pertahankan.

Sertakan informasi meta yang sesuai

Metadata yang tepat bermuara pada tiga hal. Pastikan gambar Anda memiliki:

1. Tag ALT yang benar yang menggambarkan gambar secara akurat
2. Tag judul yang sesuai
3. Nama file yang relevan menggunakan tanda hubung (mis. my-image.jpg)

Informasi meta penting untuk aksesibilitas, sehingga isian kata kunci tidak disukai (dan juga tidak efektif). Namun, ini memberikan konteks kepada Google, yang akan menggunakan metadata gambar, serta konten di sekitarnya, untuk membantu memahami konten di halaman.

Pastikan gambar Anda memiliki ukuran yang sesuai

Pastikan mereka memiliki tinggi dan lebar yang sama. Secara umum, gambar persegi akan ditampilkan lebih baik di semua perangkat. Menggunakan gambar persegi panjang juga bisa mulai terlihat canggung jika Anda memiliki produk yang sangat panjang atau lebar.

Pastikan mereka cukup besar untuk mengaktifkan zoom. Bergantung pada bagaimana situs e-niaga Anda dirancang, situs Anda akan menggunakan versi ukuran berbeda dari gambar yang sama untuk gambar mini, gambar koleksi, gambar produk, dan fungsi zoom. Anda ingin memastikan bahwa gambar Anda cukup besar untuk memungkinkan fungsi zoom ini bekerja tanpa terlalu besar. Gambar antara 1.000 piksel dan 1.600 piksel biasanya berukuran bagus.

9. Buat template fotografi produk Anda sendiri

Dengan mengingat tip di atas, salah satu cara termudah untuk memastikan gambar produk Anda konsisten adalah dengan menggunakan template. Sebuah template memungkinkan Anda untuk berulang kali menyelaraskan foto Anda dengan benar dan memastikan tata letak dan dimensi tetap sama.

Mencapai ini di Photoshop relatif mudah.

• Buat file baru di Photoshop. Pastikan mode warna Anda diatur ke Warna RGB – 8-bit, resolusi setidaknya 72 piksel/inci dan konten latar belakang berwarna putih atau transparan.

• Buat panduan baru. Pilih "Panduan Baru" dari menu "Tampilan".

• Buat panduan margin Anda. Buat panduan 10% vertikal, 90% vertikal, 10% horizontal, dan 90% horizontal. Anda juga dapat mengatur margin Anda sendiri.

• Buat panduan pemusatan Anda. Buat panduan 50% vertikal dan 50% horizontal.

Anda harus berakhir dengan ini.

Setelah selesai, simpan file template Anda sebagai dokumen Photoshop biasa. Panduan Anda akan tetap tersedia untuk Anda saat berikutnya Anda membuka dokumen.

Memiliki template memungkinkan Anda untuk menempatkan semua gambar produk Anda di posisi yang sama persis. Ini juga memastikan bahwa semua gambar Anda diskalakan dengan benar dan disimpan dengan dimensi yang konsisten.

Dalam panduan ini, kami telah melihat elemen yang akan berkontribusi pada halaman produk yang dirancang dengan baik dan beberapa langkah yang dapat Anda ambil hari ini untuk meningkatkan pengalaman berbelanja bagi pelanggan Anda.

Dengan saran dalam panduan ini, Anda sekarang memiliki saran yang dapat ditindaklanjuti yang dapat Anda terapkan untuk mulai meningkatkan halaman produk Anda. Sekarang terserah Anda untuk menerapkan kiat-kiat ini ke toko e-niaga Anda sendiri untuk mulai mendorong penjualan!