Penyelesaian masalah tema toko online Anda

Gambar mungkin ditampilkan berbeda dari yang Anda harapkan, tetapi hal itu mungkin karena gambar itu sendiri tidak kompatibel dengan tujuan penggunaan gambar di tema Anda. Pastikan dimensi gambar yang Anda gunakan sudah benar. Tinjau daftar masalah tampilan umum berikut yang mungkin terjadi saat mengunggah gambar yang tidak kompatibel:

• Jika header Anda ditampilkan lebih besar dan gambar logo Anda ditampilkan lebih kecil dari yang diharapkan, hal itu mungkin disebabkan oleh spasi kosong dalam file gambar logo. Spasi kosong dalam file gambar logo dapat menyebabkan logo ditampilkan lebih kecil dan header mungkin ditampilkan lebih besar karena spasi kosong tersebut. Edit file gambar untuk memastikan gambar dipotong di sekitar logo dan tidak ada spasi kosong.
• Jika gambar tayangan slide Anda terpotong, hal ini memang disengaja untuk memastikan bahwa gambar ditampilkan sama di perangkat seluler dan di desktop. Karena konten ditampilkan jauh lebih kecil di layar seluler, banyak detail dapat hilang dengan menyusutkan konten. Sebagai gantinya, konten dipotong untuk memastikan detail tidak hilang. Gambar potret, yang lebih tinggi daripada lebarnya, juga dapat memakan banyak ruang di desktop. Inilah sebabnya gambar tayangan slide memiliki tinggi maksimum. Anda dapat menambahkan titik fokus ke gambar tayangan slide Anda untuk memastikan titik fokus selalu berada di tengah gambar tayangan slide.

  Opsi tinggi adaptif: Banyak tema Shopify menyertakan pengaturan tinggi adaptif untuk tayangan slide yang menyesuaikan tinggi tayangan slide agar sesuai dengan slide gambar pertama, sehingga mengurangi pemotongan di berbagai ukuran layar. Fitur ini tersedia di semua tema yang saat ini didukung yang dikembangkan oleh Shopify.

• Jika gambar GIF tidak ditampilkan dengan benar dan telah ditambahkan ke etalase toko online Anda dengan editor teks kaya, seperti di deskripsi produk atau di postingan blog, maka hal itu mungkin disebabkan oleh ukuran gambar. Anda dapat memperbaikinya dengan mengeklik GIF di editor teks kaya, lalu mengeklik Edit gambar. Di menu tarik-turun Ukuran gambar, pilih Asli. Anda kemudian dapat mengubah ukuran GIF dengan mengeklik dan menyeret sudut gambar ke dalam untuk membuatnya lebih kecil atau ke luar untuk membuatnya lebih besar.
• Jika gambar Anda mengalami perubahan warna yang signifikan di etalase toko online dari gambar aslinya, gambar Anda mungkin tidak dalam warna Red Green Blue (sRGB) standar. Untuk memperbaiki perubahan warna ini, simpan file Anda di aplikasi pengeditan foto sebagai sRGB. Istilah umum untuk ini adalah "Optimalkan untuk web", "Sesuaikan gambar untuk Web", atau "Simpan untuk Web". Pelajari selengkapnya tentang profil warna.
• Jika foto produk di halaman koleksi Anda tidak sejajar, Anda mungkin perlu menyesuaikan rasio aspek dalam file foto produk agar memiliki rasio tinggi ke lebar yang sama, lalu mengunggah kembali foto produk tersebut. Anda juga dapat menggunakan aplikasi edit gambar dari Shopify App Store.

Tinjau masalah berikut terkait masalah spesifik Anda dan langkah-langkah untuk membantu Anda mengatasinya:

• Produk hilang: Jika produk Anda tidak ada di etalase toko online, Anda mungkin perlu meninjau Status dan Saluran Penjualan Anda di bagian Penerbitan produk di admin Shopify Anda. Pastikan status produk adalah Aktif dan produk tersedia untuk Toko Online.
• Koleksi hilang: Jika koleksi Anda hilang dari etalase toko online, Anda mungkin perlu meninjau Saluran penjualan di bagian Penerbitan koleksi di admin Shopify. Pastikan koleksi tersedia untuk Toko Online, dan koleksi Anda ditambahkan ke menu.
• Koleksi ditampilkan tetapi produk hilang: Jika koleksi Anda ditampilkan tetapi ada produk yang hilang, Anda mungkin perlu meninjau filter tag apa pun untuk koleksi di pengaturan Menu Anda. Pastikan tidak ada tag di kolom Filter koleksi dengan tag yang mungkin menyebabkan produk tidak ditampilkan.
• Mata uang tidak benar: Jika mata uang Anda tidak ditampilkan dengan benar untuk produk atau di koleksi, Anda mungkin perlu meninjau Tampilan mata uang di bagian Default toko di Pengaturan > Umum untuk memastikan tidak ada kode tambahan. Pelajari selengkapnya tentang memformat cara mata uang ditampilkan kepada pelanggan Anda.
• Beberapa produk ditampilkan secara berbeda: Jika beberapa produk atau koleksi ditampilkan secara berbeda dari yang lain, tinjau Templat tema yang ditetapkan untuk produk atau koleksi di admin Shopify Anda.
• Tidak dapat mengedit templat produk atau koleksi: Jika templat produk atau koleksi default berwarna abu-abu dan tidak dapat dipilih di editor tema, Anda harus menyediakan setidaknya 1 produk atau koleksi ke saluran penjualan Toko Online. Anda tidak dapat mengedit templat default ini tanpa menyediakan produk atau koleksi untuk mempratinjau perubahannya. Pelajari selengkapnya tentang mengubah ketersediaan koleksi dan mengatur ketersediaan produk di saluran penjualan Anda.

Jika konten terjemahan Anda tidak ditampilkan dengan benar atau hilang dari etalase toko online, mungkin ada terjemahan yang kedaluwarsa atau terjemahan yang hilang untuk konten tersebut. Konten tersebut mungkin juga berada dalam templat khusus untuk suatu pasar. Setiap kali Anda menambahkan konten baru dalam bahasa default Anda, ingatlah untuk menjalankan terjemahan otomatis lagi, atau menambahkan terjemahan baru secara manual.

Status berikut dapat berlaku untuk konten terjemahan:

• Diterjemahkan: Konten memiliki terjemahan yang tersedia.
• Kedaluwarsa: Konten dalam bahasa default telah diperbarui, tetapi terjemahannya tidak mencerminkan pembaruan apa pun.
• Belum diterjemahkan: Tidak ada terjemahan untuk jenis konten ini.

Saat meninjau konten terjemahan Anda, perbarui konten yang belum diterjemahkan atau kedaluwarsa dan konten terjemahan Anda akan ditampilkan dengan benar.

Pelajari selengkapnya tentang menerjemahkan dan melokalkan toko Anda.

Jika etalase toko online dan editor tema Anda tidak menampilkan informasi yang sama, tinjau templat tema yang sedang Anda edit. Anda mungkin perlu membuat perubahan untuk memperbarui templat tema agar menampilkan informasi yang benar.

Penyesuaian pasar memungkinkan Anda membuat etalase toko online yang berbeda untuk pasar yang berbeda dan menampilkan konten yang diterjemahkan. Anda mungkin secara tidak sengaja bekerja di pasar tertentu atau B2B saat melakukan pembaruan. Temukan konten dengan menu tarik-turun Pasar di editor tema Anda untuk memastikannya berada di pasar yang benar.

Pelajari selengkapnya tentang penyesuaian pasar.

Semua tema yang tersedia di Toko Tema Shopify adalah tema responsif, artinya tema beradaptasi dengan ukuran layar. Di editor tema, Anda dapat mengganti tampilan ukuran layar selama pengeditan tema untuk memverifikasi bahwa halaman dan gambar Anda ditampilkan dengan benar. Pelajari selengkapnya tentang melihat berbagai ukuran layar di editor tema.

Banyak bagian dan blok memiliki pengaturan seluler yang dapat Anda sesuaikan. Misalnya, Anda dapat mengatur Jumlah kolom di seluler di bagian Produk terkait. Anda dapat meninjau pengaturan bagian yang terkait dengan seluler untuk setiap templat guna memecahkan masalah tampilan apa pun pada ukuran layar seluler.

Beberapa fitur tema mungkin ditampilkan secara berbeda di seluler daripada di desktop untuk memverifikasi bahwa tema dapat diakses di semua ukuran layar. Misalnya, pada ukuran layar desktop, tayangan slide Anda mungkin memiliki overlay teks, dengan teks ditampilkan di atas gambar yang sering kali disertai opasitas warna gambar atau bayangan teks. Namun, pada ukuran layar seluler, teks mungkin ditampilkan di bawah tayangan slide. Ini adalah fitur aksesibilitas yang dirancang agar teks dapat dibaca di semua ukuran layar. Jika teks tersebut berupa overlay, teks akan ditampilkan sangat kecil di seluler sehingga sulit dibaca.

Jika bagian koleksi unggulan atau halaman koleksi Anda menampilkan ukuran yang tidak konsisten atau tidak sejajar saat melihat etalase toko online di seluler, hal itu mungkin disebabkan oleh rasio aspek yang tidak konsisten. Kisi gambar, seperti foto produk yang ditampilkan dalam koleksi atau koleksi unggulan, dibuat agar responsif terhadap ukuran layar. Jika Anda memiliki rasio aspek yang tidak konsisten untuk gambar dalam kisi gambar, gambar tersebut mungkin akan ditampilkan secara berbeda tergantung pada ukuran layar. Foto produk persegi berukuran 2048 piksel kali 2048 piksel biasanya paling cocok untuk kisi produk. Perbarui gambar Anda agar memiliki rasio aspek yang konsisten untuk pengoptimalan di semua ukuran layar. Pelajari selengkapnya tentang rasio aspek gambar.

Terkadang, kode HTML yang ditambahkan di editor teks kaya Anda bertentangan dengan kode tema Anda. Jika masalah terjadi di satu halaman, seperti halaman produk, halaman, atau postingan blog, masalahnya mungkin karena adanya HTML tambahan. Ini terkadang dapat ditambahkan dari menyalin dan menempelkan teks dari situs lain.

Tinjau kode HTML

Anda dapat meninjau kode HTML di editor teks kaya.

Langkah-langkah:

1. Buka halaman di admin Anda.
2. Klik tombol Tampilkan HTML untuk meninjau kode HTML.
3. Temukan kode HTML yang mungkin menyebabkan masalah tampilan, lalu hapus.
4. Klik Simpan.

Hapus format

Anda dapat menyorot sebagian teks dan menghapus format HTML-nya.

Langkah-langkah:

1. Buka halaman di admin Anda.
2. Sorot teks yang bermasalah dengan formatnya.
3. Klik tombol 🚫.
4. Klik Simpan.

Pelajari selengkapnya tentang editor teks kaya.

Jika etalase toko online Anda menyertakan kode yang mengalihkan pengguna ke URL yang tidak terhubung ke toko Anda, verifikasi bahwa pengalihan tersebut telah dinonaktifkan saat Anda mengunjungi editor tema.

Misalnya, jenis pengalihan ini dapat ditambahkan ke etalase toko online untuk mengarahkan pelanggan ke berbagai toko Shopify, tergantung lokasi mereka. Jenis kode pengalihan ini dapat ada di tema atau aplikasi yang Anda instal.

Untuk memverifikasi pengalihan Anda tidak mengganggu pengalaman editor, gunakan referensi ke variabel window.Shopify.designMode di JavaScript untuk menonaktifkan pengalihan saat Anda mengunjungi editor tema. Variabel ini diatur ke true saat etalase toko online dimuat di editor, dan false saat tidak dimuat.

Jika Anda memiliki blok yang dapat dilipat atau blok tema lain yang menampilkan konten yang sama di semua halaman produk, Anda perlu menyiapkan sumber dinamis dengan metafield. Hal ini biasanya terjadi saat penjual menambahkan informasi khusus produk seperti bahan atau petunjuk perawatan ke satu produk, tetapi informasi tersebut ditampilkan di semua produk.

Blok yang dapat dilipat menampilkan teks yang sama di semua produk

Saat Anda menambahkan konten secara langsung ke blok yang dapat diciutkan di editor tema, konten tersebut akan ditampilkan di semua halaman produk. Untuk menampilkan konten khusus produk, Anda harus menggunakan sumber dinamis dengan bidang meta:

1. Di admin Shopify, buka Pengaturan > Metafield > Produk.
2. Klik Tambahkan definisi.
3. Masukkan Nama untuk metafield Anda, lalu klik Pilih jenis konten.
4. Pilih Teks dan Teks multi-baris.
5. Klik Simpan.
6. Buka halaman produk di admin Anda dan gulir ke bagian metafield di bagian bawah halaman.
7. Tambahkan konten khusus produk Anda ke metafield yang Anda buat.
8. Di editor tema, buka templat produk dan temukan bagian Baris dapat dilipat Anda.
9. Di pengaturan Konten baris, klik tombol .
10. Pilih metafield Anda dari opsi yang tersedia.
11. Simpan perubahan Anda.

Sekarang setiap produk akan menampilkan kontennya sendiri saat metafield diisi, dan tidak ada konten yang akan ditampilkan jika metafield untuk produk tersebut kosong.

Pelajari selengkapnya tentang menampilkan metafield di toko online dan menggunakan metafield dan metaobjek dengan sumber dinamis.

Jika ada eror sintaksis dalam kode tema Anda, pesan peringatan ditemukan eror HTML atau Eror tema akan ditampilkan di editor tema Anda. Pesan eror menampilkan file Liquid yang berisi eror.

Pesan peringatan Tema yang Anda cari tidak dapat ditemukan mungkin ditampilkan ketika ada HTML yang rusak. Halaman dapat gagal dimuat di editor tema karena berbagai alasan, seperti alasan berikut:

• masalah koneksi jaringan
• kode Liquid yang tidak valid di tema Anda

Anda dapat mencari letak perubahan kode pada kode tema Anda dan memperbaiki kode tersebut. Jika Anda dapat mengidentifikasi file lama yang terpengaruh, Anda dapat memulihkannya ke versi sebelumnya yang tersedia di tampilan Riwayat aktivitas editor kode.

Langkah-langkah:

1. Klik file bagian .liquid yang ditautkan di pesan eror atau tinjau file untuk melihat perubahan terbaru. Ini akan membawa Anda ke halaman Edit HTML/Cascading Style Sheets (CSS), dan file akan terbuka di editor kode.
2. Telusuri kode dalam file dan coba temukan HTML atau Liquid yang tidak valid. Editor kode menampilkan potensi kesalahan sintaksis dengan warna merah. Masalah umum meliputi hal-hal berikut:
   • Tag HTML penutup yang berlebih, misalnya, tag penutup </div> tanpa tag pembuka <div>
   • Tag HTML yang tidak ditutup, misalnya, tag pembuka <div> tanpa tag penutup </div>
   • Tag HTML yang salah format, misalnya, <div class="my-class" tanpa >
   • Kode Liquid yang salah format
   • HTML yang rusak dalam file cuplikan tema yang disertakan
3. Setelah menemukan masalahnya, perbaiki kode di file tema Anda. Jika Anda menggunakan tampilan Riwayat aktivitas di editor kode untuk memilih versi sebelumnya lalu melakukan Pulihkan konten, maka seluruh konten file akan tergantikan. Salin konten file saat ini ke tempat yang aman terlebih dahulu jika Anda ingin mempertahankan perubahannya.
4. Klik Simpan.
5. Klik Edit tema untuk kembali ke editor tema, dan pastikan pesan kesalahan sudah tidak ada.
6. Buka etalase toko online Anda untuk memverifikasi bahwa halaman ditampilkan seperti yang diharapkan.

Kesalahan "Melebihi jumlah maksimum handle unik"

Jika pesan kesalahan Liquid seperti "Melebihi jumlah maksimum handle unik untuk all_products" ditampilkan di beranda Anda, ini biasanya berarti Anda telah menambahkan terlalu banyak bagian Produk Unggulan ke beranda Anda (biasanya lebih dari 20 bagian di sebagian besar tema).

Untuk mengatasi masalah ini:

1. Di admin Shopify, buka Toko Online > Tema.
2. Temukan tema Anda saat ini, lalu klik Edit tema.
3. Buka beranda Anda.
4. Hapus beberapa bagian Produk Unggulan agar tidak melebihi batas tema.
5. Sebagai gantinya, pertimbangkan untuk menggunakan bagian Koleksi Unggulan, yang dapat menampilkan beberapa produk dengan lebih efisien dan meningkatkan performa toko Anda.

Ikon pembayaran biasanya disertakan secara default di footer sebagian besar tema untuk menunjukkan kepada pelanggan metode pembayaran yang Anda terima. Jika ikon pembayaran tidak muncul di footer tema Anda, Anda dapat memeriksa hal berikut:

1. Di editor tema Anda, buka bagian Footer dan verifikasi bahwa pengaturan Tampilkan ikon pembayaran diaktifkan.
2. Di admin Shopify Anda, buka Pengaturan > Pembayaran dan verifikasi bahwa setidaknya ada satu metode pembayaran yang aktif. Beberapa metode pembayaran mungkin memerlukan penyelesaian pengaturan akun sebelum ikonnya ditampilkan.
3. Jika Anda menggunakan gerbang pembayaran pihak ketiga, ikon pembayaran mungkin tidak ditampilkan karena keterbatasan platform.

Jika Anda telah memverifikasi pengaturan ini dan ikon pembayaran masih tidak ditampilkan, Anda mungkin perlu mendapatkan dukungan untuk tema Anda.