Shopify tekst til tale – lyd fra AI-produktsiden via theme.liquid
Gjør Shopify-produktbeskrivelser, kolleksjoner og blogginnlegg i butikken klare for lytting lyd fra produktsiden med GSpeechSelgere får naturlige AI-stemmer og moderne spillere mens syntese kjører i GSpeech Cloud Console - Ingen API-nøkler kreves, og ingen TTS-innlasting på Shopify-temaverten din.
Denne guiden dekker Shopify TTS oppsett: lim inn tilkoblingskoden før in theme.liquid (eller Custom Liquid / Custom HTML), plasser helsides- / knapp- / sirkelspillere på produkt- og innholdsmaler, og tilordne dem deretter Innholdsvelger og Gjengi element så fortellerstemme leser beskrivelser – og ekskluderingslisten hopper over pris, skjemaer og merker.
tema.flytende tekst til tale – én innebygd butikkfront for produkt-, kolleksjons- og bloggmaler.
Skybasert lydgenerering – syntetisere én gang, mellomlagre og spille av på tvers av kunder.
Ingen API-nøkler kreves — stemmer og spillere fra én konsoll.
Ekskluder pris og skjemaer — la kassegrensesnittet være stille mens beskrivelsene leses opp.
Best for: Shopify-selgere som ønsker produktbeskrivelser, kolleksjonshistorier og bloggartikler klare til bruk – med pris, skjemaer for å legge til i handlekurven og merker ekskludert fra tale.
Lag et nettsted — hvis du ikke har lagt til en butikkside ennå, følg opprett et nettsted.
Åpne nettstedet — gå til din dashbord og velg Shopify-nettstedet.
Kopier Shopify-koden — åpen Integrasjoner → Shopify og kopier tilkoblingskoden.
Lim inn før — sett inn koden i temaet ditt (vanligvis theme.liquid, Custom Liquid eller Custom HTML) før avslutningen tagg, og publiser deretter.
Tilkoblingskoden lastes inn GSpeech på alle butikkfrontsider der den er tilstede. Spillere vises bare der du plasserer monteringer / tilpasset HTML og bare når den matchende widgeten er publisert og konfigurert.
Kartleggingsmodell
theme.liquid, produktmonteringer og innholdskartlegging
På Shopify, én theme.liquid embed laster inn søkemotoren i hele nettbutikken. Hver widget tilordner deretter produktbeskrivelsestekst, kolleksjonstekst eller blogg-HTML til en spillermontering – uten å hardkode lyd inn i hvert produkt:
1Tilkoblingskode
Laster inn motoren fra theme.liquid / Custom Liquid. Uten den forblir produktmonteringene tomme.
2Tilpasset widget
Dashbordkonfigurasjon: stemme, språk, design, innholdsinnstillinger, URL-regler for produkter kontra blogger.
3Monter / Tilpasset HTML
En markør i en produktseksjon eller temablokk (for eksempel .gsp_full_player) der spilleren vises.
4Innholdskartlegging
Innholdsvelger = beskrivende tekst å lese. Gjengi element = der spilleren vises. Ekskluder pris, skjemaer og merker.
Ubegrensede widgets – separate helside-, knapp- eller sirkel-widgeter for produkter, samlinger, blogger eller språk.
Ubegrenset antall spillere per widget — én publisert widget kan drive alle matchende monteringer som er tillatt av Render Element + URL-regler.
Tilpasset HTML / Liquid — på Shopify ser monteringen slik ut <div class="gsp_full_player"></div>På WordPress bruker den samme ideen kortkoder som [gspeech].
Standard kontra avansert – standardmonteringer fungerer raskt. Tilpassede temaseksjoner trenger presise verdier for innholdsvelger/gjengivelseselement.
Spillere
Legg til spillere med Shopify Custom HTML
Plasser et av disse festene der spilleren skal vises på produkt- eller innholdssider. Klikk på et kort for å kopiere. Deretter angir du widgeten. Gjengi element til samme klasse.
Tilordne Shopify-produkt og tematekst til spilleren
I widgeten Innhold fane, målproduktbeskrivelse og temainnpakninger som kundene bør høre – og ekskluder pris, produktskjemaer og merker slik at lyden forblir nyttig.
id → # / klasse → . — HTML-attributter blir selektorer med en hash eller et punktum.
Samle bitene — Innholdsvelgeren kan liste opp flere innpakningspakker, kommaseparerte.
Trim stykker — Ekskluderingsliste bruker det samme # / . + komma (prisskjemaer, merker, handlekurv-chrome).
definerer hvilken tekst som blir lest oppBruk CSS-selektorer, kommaseparert. Eksempler:
.produkt_beskrivelse, .rte, #Hovedinnhold – les disse elementene.
.produkt_beskrivelse,.rte,#min_id,.min_klasse – flere mål i ett felt.
foreldreklasse — les den overordnede wrapperen til monteringen (nyttig for tilpasset HTML i en produktseksjon).
self_class – les den samme innpakningen som festet sitter i.
La stå tomt hvis du bruker Innhold Tekst i stedet (fast tekst, ikke DOM-innhold).
RE
Gjengi element
definerer hvor spillerens brukergrensesnitt injiseresDet må samsvare med et ekte element på butikkfrontsiden.
For tilpassede HTML-monteringer, sett den til monteringsklassen: .gsp_full_player, .gsp_knapp_spillereller .gsp_sirkel_spiller.
Du kan også målrette layoutbeholdere som kroppen, #Hovedinnholdeller .produkt_tittel når du ikke bruker et dedikert feste.
Hvis innholdsvelgeren er riktig, men ingenting vises, er gjengivelseselementet vanligvis feil eller mangler på den siden.
RP
Gjengi posisjon
Plasserer spilleren Før or Etter Render Element-innholdet. For en dedikert monterings-div fungerer After/Before vanligvis fortsatt i forhold til den noden – hold monteringen tom og la widgeten fylle den.
EX
Ekskluder liste
Velgere som må ikke bli sagt, selv om de sitter i Innholdsvelgeren. Samme # / . regler, kommaseparert. Eksempel: .product-form,.price,.badge,.no-speech.
TT
Tittelvelger / Titteltekst
Tittelvelger — dynamisk tittel fra siden (eksempel: h1.product__title).
Titteltekst — fast tittel vist i spilleren. La tittelvelgeren stå tom når du bruker titteltekst.
CT
Innhold Tekst
Valgfri, fast fortellertekst. Innholdsvelgeren kan forbli tom når den brukes. Nyttig for korte reklameblokker på samlingssider når produkt-DOM ikke skal drive lyd.
Tommelfingerregel for Shopify: Mål for innholdsvelger .product__description (eller .rte), Render-elementet er rettet mot monteringen, og Exclude List beholder .price og .product-form ut av lyden.
Eksempler
Praktiske kartleggingseksempler for Shopify-produktsider
Eksempel A
Produktbeskrivelse med fullsidesspiller
Produktmalen inneholder en beskrivelse og et feste i nærheten av kjøpsboksen:
Hvis monteringen sitter i en samlingshistorie eller en butikkblogg, kan innholdsvelgeren være relativ:
Innholdsvelger - parent_class (leser forelderen til monteringen)
Gjengi element - .gsp_full_player
Ekskluder liste — hold pris og skjemaer stille hvis de vises på samme mal
Bruk self_class når selve monterings-wrapperen inneholder teksten som skal leses opp.
Eksempel C
Produktlyd for hele katalogen med én widget
Sted .gsp_button_player på produktmalen. Widget for én knapps avspiller med gjengivelseselement .gsp_button_player kan drive alle produktsider. Opprett kun ekstra widgeter når stemme, selektorer eller URL-regler må være forskjellige (for eksempel blogg kontra produkt).
Konfigurer spiller / Design — stemme, paneler, tema, bredde, marginer.
Publiser og lytt — sett Status til Publisert, oppdater den aktive butikkfronten, test avspilling.
Når produkt- eller sidetekst endres, kan Smart Audio Sync generere fortellerstemme i bakgrunnen. Tilordningsfelt avgjør fortsatt hvilken tekst og hvor spilleren lever.
FAQ
Vanlige spørsmål: Shopify tekst-til-tale på produktsider
Støtter Shopify tekst-til-tale og AI-stemmer med GSpeech?
Ja. GSpeech legger Shopify tekst til tale slik at selgere kan tilby lyd fra produktsider med kunstig intelligens i beskrivelser, kolleksjoner og butikkblogger. Lyd genereres i skyen og spilles av via moderne widgeter – uten API-nøkler på temaet ditt.
Hvordan legger jeg til GSpeech med theme.liquid eller Custom Liquid?
Kopier Shopify-tilkoblingskoden fra Integrasjoner → Shopify. Lim den inn. theme.liquid (eller Tilpasset Liquid / Tilpasset HTML) før og publiser. Legg deretter til en montering, for eksempel <div class="gsp_full_player"></div> på produktmalen og sett Render Element til den klassen.
Hva er Content Selector kontra Render Element på Shopify?
Innholdsvelger velger hvilket HTML-tema som skal fortelles – vanligvis .product__description or .rte. Gjengi element velger hvor spilleren vises – vanligvis din tilpassede HTML-montering. Bruk ekskluderingsliste for .price, .product-formog merker slik at kundene hører beskrivelsen, ikke brukergrensesnittet ved kassen.
Vil GSpeech-lyd gjøre Shopify-butikken min tregere?
Nei. Syntese og mellomlagring skjer i GSpeech skyen, ikke på Shopify-servere. Temainnbyggingen er lett, og avspillere vises bare på maler der du plasserer fester. Produktsider beholder normal butikkytelse mens lyd spilles av på forespørsel.
Trenger jeg API-nøkler for Shopify TTS?
Nei. GSpeech is Ingen API-nøkler kreves for Shopify. Koble til theme.liquid, konfigurer produktlyd-widgeter i Cloud Console og publiser. Stemmer og avspillere administreres fra én konto uten tredjeparts TTS-nøkler i temaet ditt.
Hjelp
Trenger du hjelp med å finne selektorer for et Shopify-tema eller produktlayout?
Kontakt GSpeech-støtteSend en URL til siden, så hjelper vi deg med å tilordne innholdsvelgeren/gjengivelseselementet.
