Shopify Synthèse vocale — Audio de la page produit
Intégration Shopify
Synthèse vocale Shopify — Audio des pages produits IA via theme.liquid
Transformez les descriptions de produits, les collections et les articles de blog de votre boutique Shopify en contenus prêts à être écoutés. page produit audio au GSpeechLes marchands bénéficient de voix d'IA naturelles et de joueurs modernes, tandis que la synthèse fonctionne en arrière-plan. GSpeech Cloud Console - Aucune clé API requiseet aucun chargement TTS sur votre hébergeur de thème Shopify.
Ce guide couvre Shopify TTS configuration : collez le code de connexion avant in theme.liquid (ou Liquid personnalisé / HTML personnalisé), placez les lecteurs Pleine page / Bouton / Cercle sur les modèles de produits et de contenu, puis mappez Sélecteur de contenu et Élément de rendu La narration lit donc les descriptions, et la liste d'exclusion ignore les prix, les formulaires et les badges.
thème.liquid synthèse vocale — une seule intégration de boutique en ligne pour les modèles de produits, de collections et de blogs.
Génération audio dans le cloud — synthétiser une seule fois, mettre en cache et réutiliser auprès des différents acheteurs.
Aucune clé API requise — voix et joueurs sur une seule console.
Hors prix et formulaires — Garder l'interface utilisateur de la page de paiement silencieuse tandis que les descriptions sont verbales.
Idéal pour : Les marchands Shopify qui souhaitent des descriptions de produits, des récits de collections et des articles de blog prêts à l'écoute — à l'exclusion du prix, des formulaires d'ajout au panier et des badges.
Créer un site web — Si vous n'avez pas encore ajouté de site marchand, suivez-nous créer un site Web.
Ouvrir le site — allez à votre tableau de bord et sélectionnez le site Shopify.
Copiez le code Shopify - ouvrir Intégrations → Shopify et copiez le code de connexion.
Coller avant — insérez le code dans votre thème (généralement theme.liquid, Liquid personnalisé ou HTML personnalisé) avant la fermeture Étiquetez, puis publiez.
Le code de connexion se charge GSpeech Sur chaque page de la boutique où il est présent. Les joueurs apparaissent uniquement là où vous placez des montures/du code HTML personnalisé et seulement lorsque le widget correspondant est publié et configuré.
Modèle de cartographie
theme.liquid, supports de produits et mappage de contenu
Sur Shopify, un theme.liquid L'intégration charge le moteur sur l'ensemble de la boutique. Chaque widget associe ensuite le texte de description du produit, le texte de la collection ou le code HTML du blog à un emplacement pour le lecteur, sans avoir à intégrer l'audio directement dans chaque produit.
1Code de connexion
Charge le moteur depuis theme.liquid / Custom Liquid. Sans cela, les emplacements des produits restent vides.
2Widget personnalisé
Configuration du tableau de bord : voix, langue, design, paramètres de contenu, règles d’URL pour les produits et les blogs.
3Monter / HTML personnalisé
Un marqueur dans une section de produits ou un bloc thématique (par exemple) .gsp_full_player) où apparaît le joueur.
4Cartographie du contenu
Sélecteur de contenu = texte descriptif à lire. Élément de rendu = l'endroit où apparaît le joueur. Exclure le prix, les formulaires et les badges.
Widgets illimités — Des widgets distincts de type Pleine page, Bouton ou Cercle pour les produits, les collections, les blogs ou les langues.
Nombre illimité de joueurs par widget — Un seul widget publié peut alimenter tous les points de montage correspondants autorisés par les règles Render Element + URL.
HTML personnalisé / Liquid — Sur Shopify, le support ressemble à <div class="gsp_full_player"></div>Sur WordPress, le même principe utilise des codes courts tels que : [gspeech].
Options par défaut vs options avancées — Les éléments de montage par défaut fonctionnent rapidement. Les sections de thème personnalisées nécessitent des valeurs précises pour le sélecteur de contenu et l'élément de rendu.
joueurs
Ajoutez des joueurs avec du code HTML personnalisé Shopify
Placez l'un de ces supports à l'endroit où le joueur doit apparaître sur les pages de produits ou de contenu. Cliquez sur une carte pour la copier. Ensuite, configurez le widget. Élément de rendu à la même classe.
Associer le texte du produit et du thème Shopify au lecteur
Dans le widget Contenu L'onglet, la description du produit cible et les éléments graphiques que les acheteurs doivent entendre — et exclure le prix, les formulaires de produit et les badges afin que l'audio reste utile.
CS
Sélecteur de contenu
Définit Quel texte est parlé ?Utilisez des sélecteurs CSS, séparés par des virgules. Exemples :
.description du produit, .rte, #ContenuPrincipal — lisez ces éléments.
.product__description,.rte,#my_id,.my_class — plusieurs cibles dans un même champ.
classe_parent — lire le conteneur parent du support (utile pour le HTML personnalisé à l'intérieur d'une section produit).
auto_classe — lire le même emballage que celui dans lequel se trouve le support.
Laisser vide si nécessaire Texte du contenu au lieu de cela (texte fixe, et non contenu DOM).
RE
Élément de rendu
Définit où l'interface utilisateur du joueur est injectéeIl doit correspondre à un élément réel de la page de la boutique.
Pour les montages HTML personnalisés, définissez-le sur la classe de montage : .gsp_full_player, .gsp_button_player, .gsp_circle_player.
Vous pouvez également cibler des conteneurs de mise en page tels que corps, #ContenuPrincipal, .titre_du_produit lorsque vous n'utilisez pas de support dédié.
Si le sélecteur de contenu est correct mais que rien ne s'affiche, l'élément de rendu est généralement incorrect ou manquant sur cette page.
RP
Position du rendu
Place le joueur Avant or Après Le contenu de l'élément de rendu. Pour une div de montage dédiée, After/Before fonctionne généralement toujours par rapport à ce nœud : laissez le montage vide et laissez le widget le remplir.
EX
Exclure la liste
Sélecteurs qui doivent pas peuvent être prononcés, même s'ils se trouvent à l'intérieur du sélecteur de contenu. Séparés par des virgules. Exemple : .product-form,.price,.badge,.no-speech.
TT
Sélecteur de titre / Texte du titre
Sélecteur de titre — titre dynamique de la page (exemple : h1.product__title).
Titre Texte — Titre fixe affiché dans le lecteur. Laissez le sélecteur de titre vide si vous utilisez du texte de titre.
CT
Texte du contenu
Texte de narration fixe optionnel. Le sélecteur de contenu peut rester vide. Utile pour les courts blocs promotionnels sur les pages de collection lorsque le DOM du produit ne doit pas gérer l'audio.
Règle générale pour Shopify : Cibles du sélecteur de contenu .product__description (ou .rte), l'élément de rendu cible le support, et la liste d'exclusion conserve .price et .product-form hors du son.
Exemples
Exemples pratiques de cartographie pour les pages produits Shopify
Exemple A
Description du produit avec lecteur plein écran
Le modèle de produit comprend une description et un support près du bouton d'achat :
Sélecteur de titre - h1.product__title (Optionnel)
Exemple B
Article de blog ou collection avec classe parente
Si le support se trouve à l'intérieur d'un article de collection ou du corps d'un blog de boutique, le sélecteur de contenu peut être relatif :
Sélecteur de contenu - parent_class (lit le parent du mont)
Élément de rendu - .gsp_full_player
Exclure la liste — Ne mentionnez pas le prix ni les formulaires s'ils apparaissent sur le même modèle.
Utilisez le self_class lorsque le contenu du support lui-même contient le texte qui doit être narré.
Exemple C
Audio produit pour l'ensemble du catalogue avec un seul widget
Le salon .gsp_button_player sur le modèle de produit. Widget One Button Player avec élément de rendu .gsp_button_player Peut alimenter chaque page produit. Créez des widgets supplémentaires uniquement lorsque la voix, les sélecteurs ou les règles d'URL doivent différer (par exemple, blog vs produit).
Publier et écouter — Définir le statut sur Publié, actualiser la boutique en ligne, tester la lecture.
Lorsque le texte d'un produit ou d'une page change, Smart Audio Sync peut régénérer la narration en arrière-plan. Le mappage des champs reste déterminant. qui texte et où Le joueur est en vie.
QFP
FAQ : Synthèse vocale Shopify sur les pages produits
Shopify prend-il en charge la synthèse vocale et les voix d'IA avec GSpeech ?
Oui. GSpeech ajoute Synthèse vocale Shopify Les marchands peuvent ainsi proposer des contenus audio générés par IA sur les pages produits, les descriptions, les collections et les blogs de leur boutique. L'audio est produit dans le cloud et diffusé via des widgets modernes, sans nécessiter de clés API dans votre thème.
Comment ajouter GSpeech avec theme.liquid ou un fichier Liquid personnalisé ?
Copiez le code de connexion Shopify depuis Intégrations → Shopify. Collez-le dans theme.liquid (ou Liquid personnalisé / HTML personnalisé) avant et publiez. Ajoutez ensuite un point de montage tel que <div class="gsp_full_player"></div> sur le modèle de produit et définissez l'élément de rendu sur cette classe.
Quelle est la différence entre un sélecteur de contenu et un élément de rendu sur Shopify ?
Sélecteur de contenu choisit le thème HTML à commenter — généralement .product__description or .rte. Élément de rendu choisit l'emplacement d'affichage du joueur, généralement votre support HTML personnalisé. Utilisez la liste d'exclusion pour .price, .product-formet des badges pour que les clients entendent la description et non l'interface de paiement.
Est-ce que GSpeech audio va ralentir ma boutique Shopify ?
Non. La synthèse et la mise en cache ont lieu dans le GSpeech Le contenu est hébergé dans le cloud, et non sur les serveurs de Shopify. L'intégration au thème est légère et les lecteurs audio n'apparaissent que sur les modèles où vous avez placé des éléments. Les pages produits conservent les performances normales de la boutique en ligne, tandis que la lecture audio se fait à la demande.
Ai-je besoin de clés API pour Shopify TTS ?
Non. GSpeech is Aucune clé API requise Pour Shopify. Connectez-vous à theme.liquid, configurez les widgets audio des produits dans la console Cloud et publiez. Les voix et les lecteurs sont gérés depuis un seul compte, sans avoir besoin de clés TTS tierces dans votre thème.
Aide
Besoin d'aide pour trouver des sélecteurs pour un thème Shopify ou une mise en page de produit ?
Contactez le support GSpeechEnvoyez-nous l'URL de la page et nous vous aiderons à associer le sélecteur de contenu / l'élément de rendu.
