Cara Menambahkan Slider ke Toko Shopify Anda dan Memanfaatkannya (+ Wawasan dari Pemilik Bisnis)

Lebih banyak lagi . Setidaknya ketika datang ke pembeli eCommerce.

Pelanggan ingin membaca ulasan, melihat produk dari setiap sudut yang memungkinkan, dan menjelajahi diskon dan penawaran baru bahkan sebelum mereka berpikir untuk mengklik tombol “Tambahkan ke troli” itu.

Tetapi jika Anda menjejalkan semua informasi itu di situs web Anda, Anda berisiko membuat mereka kewalahan. Itulah mengapa penggeser sangat berguna—Anda dapat memanfaatkan pemicu konversi tanpa membuat halaman panjang yang tenggelam dalam gambar dan salinan.

Apa itu Slider di Shopify?

Slider pada dasarnya adalah tampilan slide di toko Shopify Anda. Itu bisa otomatis (mulai bermain secara otomatis berdasarkan seperangkat aturan) atau manual (hanya bergerak ketika pengguna mengkliknya).

Berikut adalah beberapa jenis slider yang paling populer dengan contohnya:

• Slider testimonial – Sebuah korsel ulasan pelanggan dan gambar menjadi bukti sosial yang hebat

QuadLock menggunakan slider testimonial seperti ini di semua halaman produknya. Pengguna dapat menyaring ulasan produk dengan mengklik panah kiri atau kanan.

Laird Superfood juga menggunakan slider testimonial di halaman beranda untuk memamerkan ulasan pelanggan terbaik.

• Penggeser logo – Untuk perusahaan B2B, memamerkan perusahaan tempat mereka bekerja mengirimkan semua sinyal yang tepat kepada calon pembeli.

Beauty Solutions menggunakan penggeser logo manual di bagian bawah halaman beranda untuk membagikan nama klien yang mereka suplai.

• Penggeser gambar produk – Tampilkan produk Anda dari setiap sudut dan tulis atribut produk terbaik sebagai keterangan untuk gambar ini.

Boardshort CriticalSlide memiliki penggeser gambar produk manual di halaman produk. Batangnya ditunjukkan dari depan, samping, dan belakang. Ada juga beberapa foto close-up bahan dan desain serta gambar model yang memakainya.

• Slider produk populer – Terlalu banyak pilihan dapat membuat pelanggan kewalahan. Tunjukkan pada mereka apa yang populer di antara pelanggan lain dan Anda membuatnya lebih mudah untuk memutuskan.

Proper memamerkan produknya yang paling populer di carousel manual "Belanja penampilan Instagram kami" ini. Setiap slide menunjukkan produk dengan informasi tentang harga dan tautan ke sana di situs.

eFashion Paris menggunakan penggeser manual untuk memamerkan pendatang baru dan penjual terbaik dan membagikan tautan ke masing-masing kategori tersebut.

• Penggeser spanduk – Bagikan diskon toko, penawaran, atau produk baru di spanduk ini.

Paralel ke-49 menggunakan penggeser spanduk manual 2 slide ini di halaman beranda untuk menarik perhatian ke

• filter kopi terlaris dan
• cerita tentang kacang yang bersumber secara berkelanjutan.

Penggeser spanduk manual Beard & Blade menautkan ke produk terlaris dan mendorong pengunjung untuk membaca blog.

Cara Menambahkan Slider ke Toko Shopify Anda

Bergantung pada aplikasi Shopify yang ingin Anda instal, langkah-langkah yang tepat untuk menambahkan slider ke toko Anda mungkin berbeda, tetapi inilah tutorial singkat dan dasar:

Langkah 1: Gandakan tema langsung Anda

Masuk ke toko Shopify Anda. Buka Toko Online -> Tema.

Di sebelah Live Theme, klik tombol "Actions" dan pilih "Duplicate." Ini akan membuat cadangan tema Shopify Anda jika Anda membuat kesalahan yang dapat berdampak buruk pada toko Anda.

Langkah 2: Tambahkan bagian slider khusus ke toko Shopify

Aplikasi penggeser Shopify yang Anda pasang mungkin perlu menempelkan beberapa kode khusus di situs Anda. Untuk melakukannya, di sebelah Live Theme, klik tombol “Actions” dan pilih “Edit Code.”

Selanjutnya, perluas kategori "Bagian" dan klik "Tambahkan bagian baru"

Beri nama slider Anda dan tekan "Buat bagian" dan Anda dapat menempelkan kode khusus.

Langkah 3: Buka theme.liquid

Gulir ke atas untuk mengklik theme.liquid. Anda mungkin perlu menempelkan kode tambahan di sini.

Langkah 4: Sesuaikan slider Anda

Kembali ke Tema, dan klik "Sesuaikan" di sebelah Tema Langsung.

Temukan bagian yang Anda buat dan sekarang Anda dapat menyesuaikan bilah geser di toko Shopify Anda. Jika Anda memasang aplikasi penggeser gambar, yang perlu Anda lakukan dalam langkah ini adalah memilih koleksi yang ingin Anda tampilkan.

Jika Anda lebih suka tutorial video, tonton video ini dari EcomExperts di mana mereka menjelaskan cara menambahkan slider produk unggulan ke toko Shopify Anda.

Aplikasi Slider Shopify Teratas pada tahun 2022: Fitur Utama, Ulasan Pengguna

#1. Carousel Penggeser Gambar Produk oleh POWR.io

Harga : Gratis-$89.99/bulan

Peringkat : 4.2/5 (243 ulasan)

Aplikasi ini memungkinkan Anda untuk membuat slider dan carousel produk dengan keterangan, teks, tombol, video, batas, dan perlindungan salinan.

Fitur Utama:

• Gaya transisi slider yang berbeda untuk dipilih
• Pilih antara penggeser atau korsel
• Desain yang sangat dapat disesuaikan
• Responsif seluler di perangkat apa pun
• Mendukung teks dalam semua bahasa

Ulasan positif

Ulasan kritis

#2. Penggeser Spanduk oleh Secomapp

Harga : Gratis-$39.99/bulan

Peringkat : 4.5/5 (152 ulasan)

Meskipun aplikasi ini disebut penggeser spanduk, Anda dapat membuat berbagai jenis penggeser yang sangat dapat disesuaikan dengan kode. Banner Slider mudah dipasang dan diatur dan menawarkan manajemen back-end yang ramah.

Fitur Utama:

• Buat 40+ jenis slider yang berbeda
• Tambahkan video ke penggeser
• Kode tersemat untuk menampilkan penggeser di ujung depan
• Pratinjau penggeser sebelum menerbitkan
• Fitur unggah massal
• Tetapkan tanggal mulai dan akhir untuk spanduk
• Mendukung mode lebar penuh

Ulasan positif

Ulasan kritis

#3. Memperbesar Penggeser Gambar

Harga : Gratis-$16,99/bulan

Peringkat : 4,9/5 (116 ulasan)

Aplikasi ini memungkinkan Anda untuk membuat penggeser spanduk, penggeser gambar, korsel, dan logo dengan teks dan komentar pada gambar Anda, dan menambahkan tautan ke setiap gambar pada penggeser.

Fitur Utama:

• Responsif seluler
• Kontrol kecepatan penggeser
• Unggah banyak foto sekaligus
• Tambahkan teks dan tautan

Ulasan positif

Ulasan kritis

#4. Penggeser Utama – Penggeser Gambar

Harga : Gratis

Peringkat : 3,8/5 (73 ulasan)

Aplikasi gratis ini memungkinkan Anda membuat bilah geser khusus tanpa batas tanpa pengetahuan pengkodean apa pun yang diperlukan. Anda dapat menggunakan salah satu dari 5 template atau memulai dari awal.

Fitur Utama:

• Mendukung teks alternatif gambar
• Lapisan tidak terbatas
• Penggeser responsif untuk perangkat apa pun
• Tambahkan tombol overlay, HTML khusus, dan teks
• Jadwalkan tanggal mulai dan berakhir slider Anda
• Pilih antara penggeser atau korsel

Ulasan positif

Ulasan kritis

#5. Slideshow Testimoni Pelanggan oleh POWR.io

Harga : Gratis-$89.99/bulan

Peringkat : 2,7/5 (35 ulasan)

Aplikasi yang mudah digunakan ini memungkinkan Anda menampilkan testimoni, ulasan, foto, deskripsi, dan video pelanggan.

Fitur Utama:

• Testimoni video putar otomatis
• Sorot ulasan produk terbaik Anda
• Kontrol perulangan, transisi geser, kecepatan, dan geser otomatis
• Desain yang sangat dapat disesuaikan
• Responsif seluler di perangkat apa pun
• Mendukung teks dalam semua bahasa

Ulasan positif

Ulasan kritis

#6. Ada IQ: Galeri Penggeser Gambar

Harga : 2,99/bulan (uji coba gratis 10 hari)

Peringkat : 5/5 (23 ulasan)

Aplikasi penggeser gambar Shopify tanpa kode ini memungkinkan Anda membuat bilah geser dan tayangan slide tanpa batas untuk memamerkan produk terlaris Anda.

Fitur Utama:

• Kustomisasi mudah
• Tambahkan tayangan slide yang sama di beberapa halaman arahan
• Pembaruan di masa mendatang dan fitur baru
• Tautkan gambar ke halaman mana pun di toko Anda

Ulasan positif

Ulasan kritis

Saat ini tidak ada ulasan kritis dari aplikasi. Pengguna menyebutkan mengalami masalah dengan aplikasi yang diselesaikan dengan dukungan di semua kasus.

#7. Slider Responsif Multi Halaman

Harga : 4,99/bulan (uji coba gratis 7 hari)

Peringkat : 4.2/5 (8 ulasan)

Aplikasi yang mudah digunakan ini memungkinkan Anda membuat penggeser horizontal atau vertikal dalam desain yang berbeda dan menambahkan beberapa penggeser ke satu halaman.

Fitur Utama:

• Responsif seluler di perangkat apa pun
• Secara otomatis menghasilkan kode pendek untuk ditempel di halaman mana pun
• Mudah untuk mencari dan memfilter kategori dan item
• Buat bilah geser dengan tombol, angka, dan gambar mini

Ulasan positif

Ulasan kritis

Saat ini belum ada ulasan kritis tentang aplikasi tersebut.

#8. Revolusi Slider

Harga : $6,99-$89/bulan (uji coba gratis 7 hari)

Peringkat : 4,9/5 (44 ulasan)

Aplikasi ini memungkinkan Anda membuat semua jenis bilah geser dan mengalirkan konten media sosial yang sepenuhnya responsif dan dapat disesuaikan.

Fitur Utama:

• Uap konten sosial dari Facebook, Twitter, Flickr, dan Instagram
• Unggah video dari YouTube atau Vimeo
• Kontrol penuh atas gaya, transisi, dan animasi
• Dioptimalkan untuk semua perangkat
• Ukuran Fullwidth, Fullscreen, Auto Responsive Slider
• Editor Seret dan Lepas WYSIWYG

Ulasan positif

Ulasan kritis

Slider vs. Korsel: Apa yang Perlu Anda Ketahui?

Slider dan carousel pada dasarnya sama kecuali satu perbedaan—carousel menampilkan banyak slide sekaligus.

Anda dapat menggunakan carousel untuk menampilkan logo pelanggan, testimonial, atau produk terlaris.

Kapan menggunakan carousel

Gunakan carousel bila Anda ingin konten yang lebih dapat dilihat menempati real estat yang sama di halaman Anda sehingga kemungkinan besar pembeli akan melihatnya.

Berikut adalah beberapa yang harus dan tidak boleh diingat:

Larangan

• Jangan gunakan carousel di bagian hero homepage karena dapat membingungkan pengunjung.
• Jangan mendorong informasi ke pengguna yang tidak menguntungkan mereka, hanya perusahaan.
• Jangan biarkan itu menjadi tempat untuk membuang konten. Jika Anda tidak dapat membenarkan penggunaannya, jangan memilikinya.

Lakukan:

• Gunakan korsel ketika orang mengharapkannya. Misalnya, untuk menampilkan ulasan pelanggan, produk terlaris, atau pendatang baru.
• Gunakan korsel saat menghemat waktu, tenaga, dan klik orang.
• Gunakan untuk membandingkan dua produk yang berbeda.

Praktik terbaik untuk menggunakan carousel

• Gunakan carousel manual sehingga pengguna memegang kendali
• Gunakan panah atau navigasi titik untuk memungkinkan pengguna menavigasi
• Buat teks di komidi putar ini singkat dan jelas
• Pastikan carousel dapat digesek dengan cara yang sama di perangkat seluler

Mengoptimalkan Slider di Toko Shopify Anda: (+Pro, Kontra, dan Wawasan dari Pemilik Bisnis

Kami meminta beberapa pemilik bisnis untuk berbagi pengalaman langsung mereka dengan slider dan apakah itu berguna atau tidak.

Apakah Slider Berfungsi?

Pertama-tama mari kita periksa slider dari dua perspektif: kinerja dan persuasif.

• Kinerja : Bisakah bot merayapi bilah geser dan memahaminya? Apakah mereka benar-benar memperlambat situs?
  
  Iya dan tidak. Bot dapat merayapi penggeser sehingga penting bagi Anda untuk membuatnya ramah SEO dan tidak semua aplikasi penggeser yang Anda instal berdampak besar pada kecepatan situs.
• Persuasif: Apakah slider melakukan pekerjaan yang baik untuk membuat orang melakukan pembelian?
  
  Cara terbaik untuk mengetahui dengan pasti apakah mereka bekerja untuk Anda adalah dengan mengujinya secara A/B. Pertama, uji dua versi—satu dengan penggeser vs. tanpa penggeser.

Mengganti penggeser dengan promo gambar statis dari produk dan tombol dengan penjualan tertinggi dengan status melayang meningkatkan konversi sebesar 30% (dengan signifikansi statistik 98%).

Tes ini melakukan apa yang saya pikir akan dilakukan, tetapi kuncinya di sini adalah memiliki lebih banyak bukti langsung untuk membantu mengarahkan klien ini dan orang lain menjauh dari bilah geser di beranda mereka. Saya bukan satu-satunya yang memiliki pengalaman ini, dan saya telah membaca banyak studi kasus dengan hasil yang serupa.

Masalahnya adalah orang-orang menganggap penggeser seolah-olah itu adalah iklan, sehingga mereka tidak berinteraksi dengannya, terutama jika tidak ada cara untuk menavigasi dengan mudah di penggeser atau jika navigasinya tersembunyi.

Takeaway : Hapus bilah geser di area promosi beranda utama, dan dorong klien untuk menggunakan ini untuk menceritakan kisah mereka atau mempromosikan produk atau layanan utama dengan penjualan tinggi. Pengambilan besar lainnya dari pengalaman ini adalah bahwa pengujian A/B sesuatu jauh lebih menarik bagi klien daripada berbicara tentang "praktik terbaik" atau mendorong ide berdasarkan hal-hal lain yang telah saya baca.

Tim Brown, 5 Pengujian A/B yang Mengubah Cara Saya Mendesain Situs Web

Apa yang dikatakan pemilik bisnis tentang slider?

Saya baru-baru ini menambahkan penggeser gambar ke toko Shopify saya, dan saya sangat senang dengan hasilnya. Penggeser gambar adalah cara yang bagus untuk menampilkan produk, menyoroti penawaran khusus, dan menambahkan daya tarik visual ke toko Anda.

  Luke Lee, Co-Founder, everwallpaper.co.uk

Bagi saya, penggeser gambar bisa efektif di toko Shopify. Ketika digunakan dengan benar, mereka dapat membantu menonjolkan produk atau fitur tertentu, dan memudahkan pelanggan untuk mempelajari lebih lanjut tentang apa yang ditawarkan toko.

Burak Ozdemir, Pendiri, setalarmonline.com

Ya, penggeser gambar berfungsi—sampai batas tertentu. Penggeser gambar berfungsi paling baik bila ada katalog produk besar dan Anda menampilkan beberapa varian dari model yang sama di halaman.

Theola Tinny, Co-Founder di VinPit

Saya telah menguji berbagai jenis Slider pada klien Shopify saya selama bertahun-tahun. Kami menemukan bahwa Slider berkinerja terbaik memberikan semacam petunjuk bahwa ada lebih banyak untuk dilihat. Satu klien khususnya melakukannya dengan sangat baik dengan menempatkan “Kesepakatan #1 dari 3” di Slider pertama mereka, kemudian tentu saja memiliki Slider #2 dan Slider #3 dengan lebih banyak kesepakatan.

Jeff Moriarty, Ninja Pemasaran Digital di JMoriarty Marketing

Bisakah Slider Menjadi Bumerang?

Ya, penggeser dapat menjadi bumerang dan inilah yang ingin Anda ketahui oleh pemilik bisnis:

Saya tidak menyarankan menggunakan segala bentuk penggeser gambar atau komidi putar di toko Shopify Anda. Mereka menyebabkan kebingungan dan dapat membanjiri pengunjung yang datang ke toko Anda. Pada saat mereka mendaftarkan satu gambar, itu sudah dipindahkan ke yang berikutnya. Selain itu, memberi pelanggan Anda terlalu banyak pilihan dapat mengalihkan perhatian mereka dari alasan utama mereka datang ke toko Anda. Beri pengunjung Anda jalur langsung untuk sampai ke sana, tanpa gangguan. Pilihan biasanya merupakan produk sampingan dari strategi yang buruk.

Praktik yang lebih ramah pengguna adalah menggunakan satu gambar menarik yang mengingatkan mereka bahwa mereka telah mendarat di tempat yang tepat. Plugin slider juga dapat secara dramatis memperlambat waktu buka halaman Anda dan menciptakan pengalaman pengguna yang buruk. Mereka sulit dirancang dan memiliki peluang lebih tinggi untuk tidak merespons dengan baik pada perangkat dan browser yang berbeda.

Emily Amor, Manajer SEO, Dart Digital

Pengguna cenderung tidak berinteraksi dengan gambar geser dan sering mengabaikannya karena menganggapnya sebagai iklan. Slider tampaknya menawarkan janji untuk dapat menyampaikan banyak pesan pada halaman yang sama, tetapi saya hampir selalu menemukan bahwa berfokus pada satu pesan dan ajakan bertindak (CTA) jauh lebih efektif.

Dekan Kaplan, https://www.kaplancollectionagency.com

Masalah Slider terburuk yang saya temui dengan salah satu klien saya adalah ketika mereka tidak memampatkan gambar dan mengunggah Slider yang masing-masing lebih dari 50mb. Hampir tidak ada yang melihatnya, karena tidak dimuat pada saat pengunjung menggulir ke bawah atau membuka halaman web lain. Ugh!

Jeff Moriarty, Ninja Pemasaran Digital di JMoriarty Marketing

Praktik Terbaik untuk Diikuti saat Mengoptimalkan Slider

Inilah yang harus Anda ketahui saat menggunakan slider:

• Pastikan penggeser Anda dimuat dengan cepat
  
  Gambar berkualitas tinggi juga cenderung berupa file besar yang dapat memperlambat penggeser Anda. Pastikan Anda memilih ukuran gambar yang benar tergantung pada ukuran slider Anda.
  
  Di luar titik tertentu, pengguna tidak dapat membedakan kualitas gambar, jadi jangan takut untuk mengompres file Anda. Anda juga dapat dengan malas memuat slider Anda dan mengurangi jumlah gaya dan font sehingga tidak memperlambat waktu pemuatan.
• Tampilkan slide yang paling penting terlebih dahulu
  
  Apa alasan menyeluruh orang harus membeli dari Anda? Gunakan USP Anda untuk menarik pengunjung ke bilah geser sehingga mereka lebih cenderung menggulir konten.
• Gunakan salinan yang menarik di semua slide
  
  Semua slide Anda adalah peluang bagi Anda untuk melibatkan pengunjung dan menggunakan sudut penjualan yang berbeda untuk mengonversinya. Tambahkan tajuk utama yang membahas manfaat dan poin nyeri serta CTA berbasis tindakan.
• Memiliki kurang dari 5 slide
  
  Tapi jangan berlebihan dengan slide. Anda tidak ingin membanjiri pengunjung dengan terlalu banyak pilihan dan tidak melakukan pembelian karena kelumpuhan analisis. Berhati-hatilah dengan penggeser Anda dan miliki alasan yang kuat MENGAPA Anda memasukkannya sejak awal.
• Atur waktu rotasi yang lambat
  
  Beri calon pelanggan cukup waktu untuk mencerna konten Anda. Terlalu cepat dan mereka akan melewatkan konten dan harus menunggu slide muncul kembali. Terlalu lambat dan mereka akan kesakitan menunggu slide berikutnya muncul. Halaman Kaya menyarankan pengaturan waktu rotasi 3 detik.
• Putar slide Anda secara otomatis
  
  Bahkan jika Anda menggunakan penggeser otomatis, Anda tidak dapat mengetahui dengan pasti bahwa pengunjung akan dengan sabar menunggu hingga seluruh tayangan slide berputar. Beri pengunjung pilihan untuk menavigasi melalui penggeser baik melalui panah atau navigasi titik.
• Gunakan tata letak asimetris untuk carousel
  
  Jika Anda mempertimbangkan korsel, coba gunakan tata letak asimetris untuk gambar Anda. Airbnb dan Booking.com sama-sama menggunakan pengujian A/B dan sampai pada tata letak gambar yang hampir mirip—satu gambar "fitur" besar dengan gambar yang lebih kecil (hampir seperti gambar mini) di sekelilingnya.

Bagaimana pemilik bisnis menggunakan slider secara optimal?

Pertama, pastikan gambar yang Anda gunakan berkualitas tinggi dan berukuran tepat. Gambar buram atau berpiksel akan merusak penampilan profesional toko Anda. Kedua, hindari menggunakan terlalu banyak slide – tiga atau empat biasanya cukup. Terlalu banyak slide dapat membuat pengunjung kewalahan dan menyulitkan mereka untuk menemukan informasi yang mereka cari. Terakhir, pastikan penggeser ditempatkan di area halaman yang mudah terlihat – sebaiknya di dekat bagian atas.

Luke Lee, Co-Founder, everwallpaper.co.uk

Penting juga untuk memperbarui gambar secara teratur di bilah geser Anda, karena gambar yang basi dapat dengan cepat menjadi usang dan kurang efektif dalam memenuhi tujuannya untuk menarik perhatian.

Selain itu, Anda harus memastikan bahwa penggeser Anda mudah dinavigasi, dengan tombol Berikutnya dan Sebelumnya yang jelas sehingga pengguna dapat dengan mudah menelusuri penawaran Anda. Akhirnya, akan sangat membantu untuk menyertakan teks yang relevan bersama dengan setiap gambar untuk membantu pembaca memahami tentang setiap gambar.

Burak Ozdemir, Pendiri, setalarmonline.com

Jika slider digunakan, mereka harus statis. Penggeser otomatis yang mengubah gambar setiap beberapa detik sering kali bergerak terlalu cepat untuk beberapa pengguna, dan terlalu lambat untuk yang lain. Jauh lebih baik untuk memiliki slider statis dengan tombol navigasi yang jelas untuk memastikan bahwa pengguna selalu memegang kendali.

Dekan Kaplan, https://www.kaplancollectionagency.com

Pelanggan lebih suka melihat gambar daripada membaca teks. Buat penggeser Anda menarik bagi audiens dengan memberikan gambar yang menarik kepada mereka daripada teks panjang.

Will Cannon, Pendiri Signaturely

Geser Jalan Anda untuk Menang: Uji A/B Slider Anda

Slider adalah ide kontroversial untuk alasan yang bagus. Meniru praktik terbaik secara membabi buta atau pesaing atau industri Anda dapat memiliki efek sebaliknya. Pengunjung bisa kesal, terpental dari halaman, dan tingkat konversi Anda mungkin turun.

Uji A/B penggeser Anda sehingga Anda memiliki data untuk mendukung keputusan Anda dan kerangka kerja untuk menguji perubahan baru guna meningkatkan konversi.

Halaman Kaya, pakar konversi, membagikan beberapa ide A/B yang dapat Anda gunakan:

• Uji memiliki satu gambar vs. memutar slide
• Uji menggunakan video penjelasan vs. slide
• Uji tinggi dan lebar penggeser Anda
• Tampilkan penggeser ke audiens target yang tepat
• Coba tambahkan bukti sosial dengan cara yang berbeda

Apa pun hipotesis yang ingin Anda uji, platform pengujian A/B Convert yang mudah digunakan mendukung Anda. Cobalah gratis selama 15 hari.