Daftar isi
Persyaratan akses Shopify
Terjemahan otomatis cloud AI untuk digunakan dengan Shopify memerlukan beberapa akses untuk menyelesaikan penyiapan:
- Akses admin Shopify
- Akses modifikasi DNS domain
Penyiapan Shopify terdiri dari 3 langkah sederhana:
- Daftarkan domain Anda untuk mengotorisasi terjemahan
- Ubah DNS domain sesuai dengan bahasa terjemahan
- Tambahkan tautan pengalih bendera bahasa ke tema Shopify Anda
Cara menjadikan situs Shopify Anda multibahasa dalam video
Daftarkan domain Shopify Anda
Untuk tujuan itu, cukup salin nama domain Anda dengan https:// yang disertakan dan pilih Shopify sebagai platform.
Setelah itu, pilih bahasa sumber dan tujuan Anda.
Catatan penting SEO: Jumlah bahasa yang Anda atur berdampak besar pada SEO. Saat Anda menyiapkan bahasa terjemahan, jika Anda memiliki banyak halaman yang diindeks (>500), mesin pencari mungkin memerlukan banyak waktu untuk memprosesnya. Ini dapat memengaruhi SEO Anda dalam bahasa asli Anda. Itu sebabnya kami menyarankan untuk menambahkan maksimal 5 bahasa terlebih dahulu, kemudian saat diindeks, Anda dapat menambahkan bahasa dalam batch 3 per bulan.
Ubah DNS domain menurut bahasa
Tambahkan DNS domain secara otomatis menggunakan Entri
Setelah Anda berhasil mendaftarkan situs web Anda di dasbor Linguise , Anda akan memiliki dua opsi untuk melanjutkan instalasi.
Anda mungkin akan melihat konten ini, Jika Anda lebih suka menambahkan data DNS secara otomatis, Anda dapat mengklik “ Hubungkan DNS Anda secara otomatis. ” Fitur ini, yang disebut Entri, akan secara otomatis menambahkan data DNS Anda, sehingga Anda dapat melanjutkan instalasi dengan mudah. Opsi lainnya adalah menyalin DNS secara manual di penyedia domain Anda.
Setelah mengklik tombol tersebut, Entri akan menganalisis URL situs web Anda yang terdaftar dan memeriksa catatan DNS publik Anda. Berdasarkan itu akan ditentukan penyedia dan DNS yang dibutuhkan.
Selanjutnya, Anda dapat mengklik “ Otorisasi dengan [penyedia domain Anda] ” (dalam contoh ini, Cloudflare). Anda kemudian akan melihat panel berubah menjadi halaman login penyedia domain Anda, tempat Anda dapat login dan melanjutkan.
Setelah Anda masuk ke penyedia domain Anda, Entri akan melakukan sisanya, secara otomatis menambahkan data DNS yang sesuai. Satu DNS per bahasa + satu DNS TXT untuk kunci validasi.
Anda seharusnya dapat melihat bahwa DNS ditambahkan dalam domain Anda. Misalnya:
Setelah Anda mengotorisasinya, Entri akan memberi tahu Anda bahwa semua pengaturan DNS telah berhasil dikonfigurasi.
Anda seharusnya dapat menggunakan fitur terjemahan segera setelah semua entri DNS telah disebarkan di domain Anda (biasanya memerlukan waktu 20/30 menit).
Jika Anda lebih suka Instalasi Manual , Anda juga dapat melakukannya secara manual dengan mengikuti langkah-langkah yang akan kami berikan di bawah ini.
Salin catatan DNS
Setelah memvalidasi domain, Anda akan diarahkan ke layar tempat DNS yang akan ditambahkan ke domain Anda siap untuk disalin. Tergantung pada perusahaan hosting Anda, pengaturan domain mungkin terlihat sedikit berbeda, namun nama kolomnya cukup standar. Catatan ini diperlukan untuk memuat halaman multibahasa situs web Anda sebagai fr.domain.com, es.domain.com…
Berikut adalah elemen utamanya.
Setelah itu, Anda perlu terhubung ke manajer domain Anda dan mengakses area pengaturan DNS. Kemudian mengikuti petunjuknya, Anda dapat menyalin:
- Satu data TXT untuk verifikasi domain
- Satu atau beberapa data CNAME untuk bahasa tersebut
Berikut ini contoh untuk setiap jenis data (TXT dan CNAME):
Setelah menambahkan semua catatan Anda, konfigurasi Anda akan terlihat seperti itu.
Konfigurasi DNS Khusus pada domain Shopify
Di Shopify , Anda memiliki kemampuan untuk mengelola konfigurasi DNS Anda dalam platform Shopify .
Secara khusus, Anda dapat mengakses dan mengubah pengaturan DNS melalui pengaturan Shopify Domain '. Di bagian ini, Anda dapat menambah dan mengedit konfigurasi DNS sesuai kebutuhan.
Setelah itu, Anda dapat memilih situs web Utama , dan di pojok kanan atas, Anda akan menemukan opsi berlabel ' Pengaturan domain '.
Dengan mengklik opsi ini, Anda akan mendapatkan akses ke ' Edit pengaturan DNS ,' di mana Anda dapat melanjutkan untuk menambahkan data DNS baru. Anda dapat menambahkan data CNAME dan TXT.
Terakhir, data CNAME dan TXT Anda akan muncul seperti gambar berikut:
Penting untuk dicatat bahwa Shopify memiliki aturan sendiri untuk menambahkan Konfigurasi DNS. Pastikan Anda mengikuti langkah-langkah sebelumnya.
- Saat menyiapkan data CNAME , pastikan nama merupakan bahasa terjemahan
- Saat menyiapkan data TXT, pastikan namanya _ linguise
Shopify akan membaca data dns yang Anda tambahkan, dan data tersebut akan disebarkan sesuai dengan itu.
Verifikasi validasi DNS
Setelah menambahkan semua catatan Anda ke DNS domain Anda, Anda dapat memeriksa propagasi DNS dengan mengklik tombol Periksa konfigurasi DNS.
Validasi DNS biasanya memakan waktu antara 30 menit dan 1 jam. Setelah itu, Anda akan melihat titik-titik hijau di bagian kanan daftar DNS di dashboard Linguise . Anda hampir siap menerjemahkan situs web Shopify Anda, hanya saja tautan ke pengalih bahasa dengan bendera negara tidak ada.
Tambahkan pengalih bahasa ke Shopify
Pengalih bahasa adalah popup bendera untuk memilih bahasa yang Anda inginkan. Untuk memuatnya, Anda perlu menyalin kode yang diberikan di bagian atas halaman Shopify Anda. Pengalih bahasa bendera kemudian akan dimuat secara otomatis di situs web publik Anda.
Tautan untuk menyalin diberikan di akhir pendaftaran domain atau di pengaturan domain. Salin tautan ke papan klip.
Kemudian di Shopify , buka Toko online > Tema
Klik pada tiga titik tema Anda saat ini dan Edit kode.
Terakhir, buka file theme.liquid dan pastekan kode script setelah yang terakhir
Sekarang, di frontend Shopify Anda, Anda seharusnya sudah menyediakan pengalih bahasa Linguise .
Desain pengalih bahasa Shopify
Pengalih bahasa dapat dikustomisasi dari Linguise > Pengaturan > Tampilan tanda bahasa. Setiap modifikasi di sini akan tercermin di situs web.
Di sisi kanan layar Anda memiliki pratinjau pengalih bahasa. Berikut adalah elemen yang dapat Anda atur:
- 3 tata letak: berdampingan, dropdown atau popup
- Posisi pengalih bahasa
- Konten pengalih bahasa
- Nama bahasa dalam bahasa Inggris atau bahasa asli
- Bentuk dan ukuran bendera
- Warna dan bayangan kotak
Muat pengalih bahasa di konten Shopify
Untuk menampilkan Pengalih Bahasa di tempat tertentu, di Shopify , Anda harus mengatur posisinya sebagai “Di tempat”.
Setelah Anda mengatur posisinya di Linguise , Anda dapat menambahkan kode pendek di bawah ini untuk memasukkannya. Klik kode di bawah ini untuk menaruhnya di clipboard Anda.
Setelah ditambahkan, di bagian depan Anda akan melihat bendera dan nama bahasa ditampilkan di area HTML tempat Anda menambahkan kode.
Konfigurasi domain Shopify untuk Google ReCAPTCHA
Google ReCAPTCHA adalah layanan gratis yang digunakan untuk mencegah spam, misalnya dalam formulir kontak. Untuk membuatnya tersedia di Shopify , Anda harus mendaftarkan subdomain multibahasa Anda di admin Shopify .
Buka pengaturan toko dan pengaturan domain.
Kemudian klik Hubungkan domain yang ada
Tambahkan subdomain bahasa yang ada, misalnya jika situs web Anda berbahasa Prancis, maka itu adalah fr.situswebanda.com
Kemudian klik Hubungkan domain yang ada
Tambahkan subdomain bahasa yang ada, misalnya jika situs web Anda berbahasa Prancis, maka itu adalah fr.situswebanda.com
Terakhir, tambahkan [lang].situswebanda.com, untuk setiap bahasa terjemahan Anda harus menampilkan reCAPTCHA di frontend.
Editor terjemahan frontend di Shopify
Editor frontend memfasilitasi penerjemah untuk memodifikasi konten HTML apa pun di Shopify dalam bahasa apa pun. Anda dapat mengedit halaman dengan mengklik elemen halaman dan mengganti teks, link, atau gambar.
Jika Anda menggunakan salah satu tema gratis yang disediakan oleh Shopify , Anda mungkin perlu mengedit CSS tema untuk memiliki akses ke semua HTML, itu karena mereka menggunakan beberapa elemen semu non-standar.
Pertama, edit kode tema lalu buka file base.css atau file CSS lainnya yang dimuat di toko Shopify Anda.
Berikut kode untuk ditambahkan ke file CSS Anda:
/* CUSTOM CSS FOR LIVE EDITOR LINGUISE
--------------------------------------------------------------------*/
/* Remove the problem of frontend editor on product and blog listing */
.button:after, .shopify-challenge__button:after, .customer button:after, .shopify-payment-button__button--unbranded:after {
content: none !important;
}
.card__heading a:after, .card--card:after, .card--standard .card__inner:after {
content: none !important;
}
/* Add back the button border */
button.button {
border: 2px solid #0E1B4D;
border-radius: 20px;
}
/* END CUSTOM CSS
--------------------------------------------------------------------*/