Shopify text till tal — AI-produktsida ljud via theme.liquid
Förvandla Shopifys produktbeskrivningar, kollektioner och blogginlägg till lyssningsklara ljud från produktsidan med GSpeechHandlare får naturliga AI-röster och moderna spelare medan syntesen körs i GSpeech Cloud Console - Inga API-nycklar krävs, och ingen TTS-laddning på din Shopify-temavärd.
Denna guide täcker Shopify TTS installation: klistra in anslutningskoden före in theme.liquid (eller Anpassad Liquid / Anpassad HTML), placera helsides- / knapp- / cirkelspelare på produkt- och innehållsmallar och mappa sedan Innehållsväljare och Render element så berättarröst läser beskrivningar – och uteslutningslistan hoppar över pris, formulär och märken.
tema.flytande text till tal — en inbäddad butik för produkt-, kollektions- och bloggmallar.
Molnljudgenerering — syntetisera en gång, cachelagra och spela upp mellan kunder.
Inga API-nycklar krävs — röster och spelare från en konsol.
Exkludera pris och formulär — håll kassagränssnittet tyst medan beskrivningarna talar.
Bäst för: Shopify-handlare som vill ha lyssningsklara produktbeskrivningar, kollektionsberättelser och bloggartiklar – med pris, formulär för att lägga till i varukorgen och märken exkluderade från tal.
Skapa en webbplats — om du inte har lagt till en butikswebbplats än, följ skapa en webbplats.
Öppna webbplatsen — gå till din instrumentbräda och välj Shopify-webbplatsen.
Kopiera Shopify-koden — öppen Integrationer → Shopify och kopiera anslutningskoden.
Klistra in före — infoga koden i ditt tema (vanligtvis theme.liquid, Anpassad Liquid eller Anpassad HTML) före stängningen tagga och publicera sedan.
Anslutningskoden laddas GSpeech på varje butikssida där den finns. Spelare visas bara där du placerar fästen / anpassad HTML och bara när matchande widget är publicerad och konfigurerad.
Kartläggningsmodell
theme.liquid, produktmonteringar och innehållsmappning
På Shopify, en theme.liquid embed laddar sökmotorn i hela butiken. Varje widget mappar sedan produktbeskrivningstext, kollektionstext eller blogg-HTML till en spelarmontering – utan att hårdkoda ljud i varje produkt:
1Anslutningskod
Laddar motorn från theme.liquid / Custom Liquid. Utan den förblir produktmonteringar tomma.
2Anpassad widget
Instrumentpanelkonfiguration: röst, språk, design, innehållsinställningar, URL-regler för produkter kontra bloggar.
3Montera / Anpassad HTML
En markör i en produktsektion eller ett temablock (till exempel .gsp_full_player) där spelaren visas.
4Innehållsmappning
Innehållsväljare = beskrivande text att läsa. Render element = där spelaren visas. Exkludera pris, formulär och märken.
Obegränsad widgets — separata widgetar för helsida, knapp eller cirkel för produkter, kollektioner, bloggar eller språk.
Obegränsat antal spelare per widget — en publicerad widget kan driva varje matchande montering som tillåts av Render Element + URL-reglerna.
Anpassad HTML / Liquid — på Shopify ser monteringen ut så här <div class="gsp_full_player"></div>På WordPress använder samma idé kortkoder som [gspeech].
Standardvärden kontra avancerade — standardmonteringar fungerar snabbt. Anpassade temasektioner behöver exakta värden för Content Selector / Render Element.
Spelare
Lägg till spelare med Shopify Custom HTML
Placera någon av dessa fästen där spelaren ska visas på produkt- eller innehållssidor. Klicka på ett kort för att kopiera. Ställ sedan in widgeten. Render element till samma klass.
I widgeten Innehåll flik, målproduktbeskrivning och temaomslag som kunderna ska höra – och exkludera pris, produktformulär och märken så att ljudet förblir användbart.
id → # / klass → . — HTML-attribut blir selektorer med en hash eller en punkt.
Samla bitar — Innehållsväljaren kan lista flera omslag, kommaseparerade.
Trimma bitar — Exkluderingslista använder samma # / . + kommatecken (prisformulär, märken, varukorgs-chrome).
definierar vilken text som läses uppAnvänd CSS-selektorer, kommaseparerade. Exempel:
.produkt_beskrivning, .rte, #Huvudinnehåll — läs dessa element.
.produktbeskrivning,.rte,#mitt_id,.min_klass — flera mål i ett fält.
förälderklass — läs den överordnade omslaget till monteringen (användbart för anpassad HTML inuti en produktsektion).
självklass — läs samma omslag som fästet sitter i.
Lämna tomt om du använder Innehållstext istället (fast text, inte DOM-innehåll).
RE
Render element
definierar där spelarens användargränssnitt injicerasDet måste matcha ett verkligt element på butikssidan.
För anpassade HTML-monteringar, sätt den till mount-klassen: .gsp_full_player, .gsp_knappspelare, eller .gsp_cirkel_spelare.
Du kan också rikta in dig på layoutbehållare som kropp, #Huvudinnehåll, eller .produkttitel när du inte använder ett dedikerat fäste.
Om Innehållsväljaren är korrekt men ingenting visas, är Render Element vanligtvis fel eller saknas på den sidan.
RP
Rendera position
Placerar spelaren Innan or Efter Render Element-innehållet. För en dedikerad monterings-div fungerar After/Before vanligtvis fortfarande relativt till den noden — håll monteringen tom och låt widgeten fylla den.
EX
Uteslut lista
Väljare som måste inte bli upplästa, även om de sitter i Innehållsväljaren. Samma # / . regler, kommaseparerade. Exempel: .product-form,.price,.badge,.no-speech.
TT
Titelväljare / Titeltext
Titelväljare — dynamisk titel från sidan (exempel: h1.product__title).
Titeltext — fast titel visas i spelaren. Lämna titelväljaren tom när du använder titeltext.
CT
Innehållstext
Valfri fast berättartext. När den används kan Innehållsväljaren förbli tom. Användbar för korta reklamblock på samlingssidor när produktens DOM inte ska driva ljud.
Tumregel för Shopify: Innehållsväljarens mål .product__description (eller .rte), Render Element riktar sig mot monteringen och Exclude List behåller .price och .product-form ur ljudet.
Exempel
Praktiska kartläggningsexempel för Shopify-produktsidor
Exempel A
Produktbeskrivning med helsidesspelare
Produktmallen innehåller en beskrivning och ett fäste nära köprutan:
Om fästet sitter inuti en samlingsberättelse eller en butiksblogg kan Innehållsväljaren vara relativ:
Innehållsväljare - parent_class (läser föräldern till fästet)
Render element - .gsp_full_player
Uteslut lista — håll pris och formulär tysta om de visas i samma mall
Använda self_class när själva monteringsomslaget innehåller texten som ska läsas upp.
Exempel C
Katalogövergripande produktljud med en widget
Plats .gsp_button_player på produktmallen. Widget för enknappsspelare med renderingselement .gsp_button_player kan driva varje produktsida. Skapa ytterligare widgetar endast när röst, väljare eller URL-regler måste skilja sig åt (till exempel blogg kontra produkt).
Konfigurera spelare / Design — röst, paneler, tema, bredd, marginaler.
Publicera och lyssna — ställ in Status till Publicerad, uppdatera den aktiva butiken, testa uppspelningen.
När produkt- eller sidtext ändras kan Smart Audio Sync återskapa berättarröst i bakgrunden. Mappningsfält avgör fortfarande som text och var spelaren lever.
FAQ
Vanliga frågor: Shopify text-till-tal på produktsidor
Stöder Shopify text-till-tal och AI-röster med GSpeech?
Ja. GSpeech tillägger Shopify text till tal så att handlare kan erbjuda AI-produktsidljud i beskrivningar, kollektioner och butiksbloggar. Ljud genereras i molnet och spelas upp via moderna widgetar – utan API-nycklar på ditt tema.
Hur lägger jag till GSpeech med theme.liquid eller Custom Liquid?
Kopiera Shopify-anslutningskoden från Integrationer → Shopify. Klistra in den. theme.liquid (eller Anpassad Liquid / Anpassad HTML) innan och publicera. Lägg sedan till en montering som t.ex. <div class="gsp_full_player"></div> på produktmallen och ange Render Element till den klassen.
Vad är Content Selector kontra Render Element på Shopify?
Innehållsväljare väljer vilket HTML-tema som ska berättas – vanligtvis .product__description or .rte. Render element väljer var spelaren visas – vanligtvis din anpassade HTML-montering. Använd undantagslista för .price, .product-formoch märken så att kunderna hör beskrivningen, inte kassan.
Kommer GSpeech-ljud att sakta ner min Shopify-butik?
Nej. Syntes och cachning sker i GSpeech molnet, inte på Shopify-servrar. Temainbäddningen är lätt och spelare visas bara på mallar där du placerar fästen. Produktsidor behåller normal butiksprestanda medan ljud spelas upp på begäran.
Behöver jag API-nycklar för Shopify TTS?
Nej. GSpeech is Inga API-nycklar krävs för Shopify. Anslut till theme.liquid, konfigurera produktljudwidgetar i Cloud Console och publicera. Röster och spelare hanteras från ett konto utan tredjeparts TTS-nycklar i ditt tema.
Hjälp
Behöver du hjälp med att hitta selektorer för ett Shopify-tema eller en produktlayout?
Kontakta GSpeech-supportenSkicka en sid-URL så hjälper vi dig att mappa innehållsväljaren/renderingselementet.
