Shopify text-to-speech — audio halaman produk AI melalui theme.liquid
Ubah deskripsi produk Shopify, koleksi, dan postingan blog toko menjadi siap untuk didengarkan. audio halaman produk dengan GSpeechPara pedagang mendapatkan suara AI alami dan pemutar modern sementara sintesis berjalan di dalamnya. GSpeech Konsol Awan - Tidak memerlukan Kunci API, dan tidak ada beban TTS pada hosting tema Shopify Anda.
Panduan ini mencakup Shopify TTS Pengaturan: tempelkan kode koneksi sebelum in theme.liquid (atau Custom Liquid / Custom HTML), tempatkan pemutar Halaman Penuh / Tombol / Lingkaran pada templat produk dan konten, lalu petakan Pemilih Konten ke Elemen Render Jadi, narasi membacakan deskripsi — dan Daftar Pengecualian melewati harga, formulir, dan lencana.
tema.liquid teks ke ucapan — satu embed toko online untuk template produk, koleksi, dan blog.
Generasi Audio Awan — Sintesis sekali, simpan dalam cache, dan putar ulang untuk berbagai pembeli.
Tidak memerlukan Kunci API — suara dan pemain dari satu konsol.
Tidak termasuk harga dan formulir. — Jaga agar antarmuka pengguna saat checkout tetap senyap sementara deskripsi berbicara.
Terbaik untuk: Para pedagang Shopify yang menginginkan deskripsi produk, cerita koleksi, dan artikel blog yang siap didengarkan — dengan harga, formulir tambah ke keranjang, dan lencana yang dikecualikan dari ucapan.
Buat situs web — jika Anda belum menambahkan situs toko, ikuti langkah-langkah berikut. buat situs web.
Buka situsnya — pergi ke milikmu dasbor lalu pilih situs Shopify.
Salin kode Shopify - membuka Integrasi → Shopify lalu salin kode koneksinya.
Tempel sebelum — masukkan kode tersebut ke dalam tema Anda (biasanya theme.liquid, Custom Liquid, atau Custom HTML) sebelum penutup Beri tag, lalu publikasikan.
Kode koneksi sedang dimuat. GSpeech di setiap halaman toko tempat widget tersebut berada. Pemain hanya muncul di tempat Anda menempatkan mount/HTML Kustom dan hanya ketika widget yang sesuai telah dipublikasikan dan dikonfigurasi.
Model pemetaan
theme.liquid, pemasangan produk, dan pemetaan konten
Di Shopify, satu theme.liquid Embed memuat mesin di seluruh toko online. Setiap widget kemudian memetakan teks deskripsi produk, salinan koleksi, atau HTML blog ke dudukan pemutar — tanpa perlu memasukkan audio secara manual ke setiap produk:
1Kode koneksi
Memuat mesin dari theme.liquid / Custom Liquid. Tanpa itu, pemasangan produk akan tetap kosong.
2Widget khusus
Konfigurasi dasbor: suara, bahasa, desain, pengaturan konten, aturan URL untuk produk vs blog.
3Pemasangan / HTML Kustom
Penanda di bagian produk atau blok tema (misalnya .gsp_full_player) di mana pemain muncul.
4Pemetaan konten
Pemilih Konten = teks deskripsi untuk dibaca. Elemen Render = tempat pemain muncul. Tidak termasuk harga, formulir, dan lencana.
Widget tidak terbatas — widget Halaman Penuh, Tombol, atau Lingkaran terpisah untuk produk, koleksi, blog, atau bahasa.
Jumlah pemain tak terbatas per widget. — satu widget yang dipublikasikan dapat mendukung setiap pemasangan yang sesuai yang diizinkan oleh aturan Render Element + URL.
HTML/Liquid Kustom — di Shopify, dudukan tersebut terlihat seperti ini <div class="gsp_full_player"></div>Di WordPress, ide yang sama menggunakan shortcode seperti... [gspeech].
Pengaturan default vs pengaturan lanjutan — Pemasangan default bekerja dengan cepat. Bagian tema kustom memerlukan nilai Pemilih Konten / Elemen Render yang tepat.
Pemain
Tambahkan pemain dengan HTML Kustom Shopify
Tempatkan salah satu mount ini di tempat pemain seharusnya muncul di halaman produk atau konten. Klik kartu untuk menyalin. Kemudian atur widgetnya. Elemen Render ke kelas yang sama.
Di dalam widget Konten Tab, deskripsi produk target, dan pembungkus tema yang harus didengar pembeli — dan kecualikan harga, formulir produk, dan lencana agar audio tetap bermanfaat.
id → # / kelas → . — Atribut HTML menjadi selektor dengan tanda pagar atau titik.
Kumpulkan potongan-potongan — Pemilih Konten dapat mencantumkan beberapa pembungkus, dipisahkan oleh koma.
Potong potongan — Daftar Pengecualian menggunakan hal yang sama # / . + koma (formulir harga, lencana, krom keranjang).
Mendefinisikan teks apa yang diucapkanGunakan selektor CSS, dipisahkan dengan koma. Contoh:
.deskripsi__produk, .rte, #KontenUtama — bacalah elemen-elemen tersebut.
.deskripsi_produk,.rte,#id_saya,.kelas_saya — beberapa target dalam satu bidang.
kelas_induk — membaca pembungkus induk dari mount (berguna untuk HTML Kustom di dalam bagian produk).
kelas_sendiri — bacalah pembungkus yang sama tempat dudukan itu berada.
Biarkan kosong jika Anda menggunakannya Konten Teks sebagai gantinya (teks tetap, bukan konten DOM).
RE
Elemen Render
Mendefinisikan di mana UI pemain disuntikkan. Itu harus sesuai dengan elemen nyata di halaman toko online.
Untuk pemasangan HTML kustom, atur ke kelas pemasangan: .gsp_pemain_lengkap, .gsp_button_player, atau .gsp_circle_player.
Anda juga dapat menargetkan kontainer tata letak seperti tubuh, #KontenUtama, atau .judul__produk saat Anda tidak menggunakan dudukan khusus.
Jika Content Selector sudah benar tetapi tidak ada yang muncul, Render Element biasanya salah atau hilang di halaman tersebut.
RP
Posisi Render
Menempatkan pemain Sebelum or Setelah Konten Render Element. Untuk div mount khusus, After/Before biasanya masih berfungsi relatif terhadap node tersebut — biarkan mount kosong dan biarkan widget mengisinya.
EX
Daftar Pengecualian
Selektor yang harus tidak dibicarakan, bahkan jika mereka berada di dalam Pemilih Konten. Sama saja. # / . Aturan, dipisahkan koma. Contoh: .product-form,.price,.badge,.no-speech.
TT
Pemilih Judul / Teks Judul
Pemilih Judul — judul dinamis dari halaman (contoh: h1.product__title).
Teks Judul — Judul tetap ditampilkan di pemutar. Biarkan Pemilih Judul kosong saat menggunakan Teks Judul.
CT
Konten Teks
Teks narasi tetap opsional. Saat digunakan, Pemilih Konten dapat dibiarkan kosong. Berguna untuk blok promosi singkat di halaman koleksi ketika DOM produk tidak boleh menggerakkan audio.
Aturan praktis untuk Shopify: Target Pemilih Konten .product__description (Atau .rte), Render Element menargetkan mount, dan Exclude List menyimpan .price ke .product-form keluar dari audio.
contoh
Contoh praktis pemetaan untuk halaman produk Shopify
Contoh A
Deskripsi produk dengan Pemutar Halaman Penuh
Templat produk mencakup deskripsi dan dudukan di dekat kotak pembelian:
Jika mount berada di dalam cerita koleksi atau isi blog toko, Pemilih Konten dapat bersifat relatif:
Pemilih Konten - parent_class (membaca induk dari mount)
Elemen Render - .gsp_full_player
Daftar Pengecualian — Jangan cantumkan harga dan formulir jika keduanya muncul pada templat yang sama
penggunaan self_class ketika pembungkus mount itu sendiri berisi teks yang seharusnya dinarasikan.
Contoh C
Audio produk di seluruh katalog dengan satu widget.
Tempat .gsp_button_player pada template produk. Widget One Button Player dengan Render Element .gsp_button_player Dapat mendukung setiap halaman produk. Buat widget tambahan hanya jika aturan suara, pemilih, atau URL harus berbeda (misalnya blog vs produk).
Publikasikan & dengarkan — Ubah Status menjadi Diterbitkan, segarkan toko online, uji pemutaran.
Saat teks produk atau halaman berubah, Smart Audio Sync dapat menghasilkan ulang narasi di latar belakang. Bidang pemetaan tetap menentukan yang teks dan dimana Pemain itu masih hidup.
FAQ (Pertanyaan Umum)
Pertanyaan yang Sering Diajukan (FAQ): Fitur teks ke suara Shopify di halaman produk
Apakah Shopify mendukung fitur text-to-speech dan suara AI dengan GSpeech?
Ya. GSpeech menambahkan Shopify text-to-speech Sehingga pedagang dapat menawarkan audio halaman produk berbasis AI pada deskripsi, koleksi, dan blog toko. Audio dihasilkan di cloud dan diputar melalui widget modern — tanpa kunci API pada tema Anda.
Bagaimana cara menambahkan GSpeech dengan theme.liquid atau Custom Liquid?
Salin kode koneksi Shopify dari Integrasi → Shopify. Tempelkan di sini. theme.liquid (atau Liquid Kustom / HTML Kustom) sebelumnya lalu publikasikan. Kemudian tambahkan mount seperti <div class="gsp_full_player"></div> pada template produk dan atur Render Element ke kelas tersebut.
Apa perbedaan antara Content Selector dan Render Element di Shopify?
Pemilih Konten memilih tema HTML mana yang akan dinarasikan — biasanya .product__description or .rte. Elemen Render Memilih di mana pemutar muncul — biasanya mount HTML Kustom Anda. Gunakan Daftar Pengecualian untuk .price, .product-form, dan lencana agar pembeli mendengar deskripsi, bukan antarmuka pengguna saat pembayaran.
Apakah audio GSpeech akan memperlambat toko Shopify saya?
Tidak. Sintesis dan caching terjadi di GSpeech Cloud, bukan di server Shopify. Embed tema ringan, dan pemutar hanya muncul pada template tempat Anda menempatkan mount. Halaman produk mempertahankan kinerja toko online normal sementara audio diputar sesuai permintaan.
Apakah saya memerlukan kunci API untuk Shopify TTS?
Nomor GSpeech is Tidak memerlukan Kunci API Untuk Shopify. Hubungkan dengan theme.liquid, konfigurasikan widget audio produk di Cloud Console, dan publikasikan. Suara dan pemutar dikelola dari satu akun tanpa kunci TTS pihak ketiga di tema Anda.
Bantuan
Butuh bantuan mencari selector untuk tema Shopify atau tata letak produk?
Hubungi dukungan GSpeechKirimkan URL halaman dan kami akan membantu memetakan Pemilih Konten / Elemen Render.
