Shopify text to speech — AI product page audio via theme.liquid
Turn Shopify product descriptions, collections, and store blog posts into listen-ready product page audio with GSpeech. Merchants get natural AI voices and modern players while synthesis runs in the GSpeech Cloud Console — No API Keys Required, and no TTS load on your Shopify theme host.
This guide covers Shopify TTS setup: paste the connection code before </body> in theme.liquid (or Custom Liquid / Custom HTML), place Full Page / Button / Circle players on product and content templates, then map Content Selector and Render Element so narration reads descriptions — and Exclude List skips price, forms, and badges.
theme.liquid text to speech — one storefront embed for product, collection, and blog templates.
Cloud Audio Generation — synthesize once, cache, and replay across shoppers.
No API Keys Required — voices and players from one console.
Exclude price and forms — keep checkout UI silent while descriptions speak.
Best for: Shopify merchants who want listen-ready product descriptions, collection stories, and blog articles — with price, add-to-cart forms, and badges excluded from speech.
Create a website — if you have not added a store site yet, follow create a website.
Open the site — go to your dashboard and select the Shopify site.
Copy the Shopify code — open Integrations → Shopify and copy the Connection code.
Paste before </body> — insert the code in your theme (typically theme.liquid, Custom Liquid, or Custom HTML) before the closing </body> tag, then publish.
The connection code loads GSpeech on every storefront page where it is present. Players appear only where you place mounts / Custom HTML and only when the matching widget is published and configured.
Mapping model
theme.liquid, product mounts, and content mapping
On Shopify, one theme.liquid embed loads the engine storefront-wide. Each widget then maps product description text, collection copy, or blog HTML to a player mount — without hardcoding audio into every product:
1Connection code
Loads the engine from theme.liquid / Custom Liquid. Without it, product mounts stay empty.
2Custom widget
Dashboard config: voice, language, design, Content settings, URL rules for products vs blogs.
3Mount / Custom HTML
A marker in a product section or theme block (for example .gsp_full_player) where the player appears.
4Content mapping
Content Selector = description text to read. Render Element = where the player appears. Exclude price, forms, and badges.
Unlimited widgets — separate Full Page, Button, or Circle widgets for products, collections, blogs, or languages.
Unlimited players per widget — one published widget can power every matching mount allowed by Render Element + URL rules.
Custom HTML / Liquid — on Shopify the mount looks like <div class="gsp_full_player"></div>. On WordPress the same idea uses shortcodes such as [gspeech].
Defaults vs advanced — default mounts work quickly. Custom theme sections need precise Content Selector / Render Element values.
Players
Add players with Shopify Custom HTML
Place any of these mounts where the player should appear on product or content pages. Click a card to copy. Then set the widget Render Element to the same class.
In the widget Content tab, target product description and theme wrappers shoppers should hear — and exclude price, product forms, and badges so audio stays useful.
id → # / class → . — HTML attributes become selectors with a hash or a dot.
Gather pieces — Content Selector can list several wrappers, comma-separated.
Trim pieces — Exclude List uses the same # / . + commas (price forms, badges, cart chrome).
Defines what text is spoken. Use CSS selectors, comma-separated. Examples:
.product__description, .rte, #MainContent — read those elements.
.product__description,.rte,#my_id,.my_class — multiple targets in one field.
parent_class — read the parent wrapper of the mount (useful for Custom HTML inside a product section).
self_class — read the same wrapper the mount sits in.
Leave empty if you use Content Text instead (fixed text, not DOM content).
RE
Render Element
Defines where the player UI is injected. It must match a real element on the storefront page.
For Custom HTML mounts, set it to the mount class: .gsp_full_player, .gsp_button_player, or .gsp_circle_player.
You can also target layout containers such as body, #MainContent, or .product__title when you are not using a dedicated mount.
If Content Selector is correct but nothing appears, Render Element is usually wrong or missing on that page.
RP
Render Position
Places the player Before or After the Render Element content. For a dedicated mount div, After/Before usually still works relative to that node — keep the mount empty and let the widget fill it.
EX
Exclude List
Selectors that must not be spoken, even if they sit inside Content Selector. Same # / . rules, comma-separated. Example: .product-form,.price,.badge,.no-speech.
TT
Title Selector / Title Text
Title Selector — dynamic title from the page (example: h1.product__title).
Title Text — fixed title shown in the player. Leave Title Selector empty when using Title Text.
CT
Content Text
Optional fixed narration text. When used, Content Selector can stay empty. Useful for short promo blocks on collection pages when product DOM should not drive audio.
Rule of thumb for Shopify: Content Selector targets .product__description (or .rte), Render Element targets the mount, and Exclude List keeps .price and .product-form out of the audio.
Examples
Practical mapping examples for Shopify product pages
Example A
Product description with Full Page Player
Product template includes a description and a mount near the buy box:
If the mount sits inside a collection story or store blog body, Content Selector can be relative:
Content Selector — parent_class (reads the parent of the mount)
Render Element — .gsp_full_player
Exclude List — keep price and forms silent if they appear on the same template
Use self_class when the mount wrapper itself contains the text that should be narrated.
Example C
Catalog-wide product audio with one widget
Place .gsp_button_player on the product template. One Button Player widget with Render Element .gsp_button_player can power every product page. Create additional widgets only when voice, selectors, or URL rules must differ (for example blog vs product).
Select the website — open the Shopify store you connected.
Add new widget — Widgets → Add new widget → choose type (Full Player, Button, Circle, …) → Create.
Configure Content — set Content Selector, Render Element, Exclude List (price / forms), titles.
Configure Player / Design — voice, panels, theme, width, margins.
Publish & listen — set Status to Published, refresh the live storefront, test playback.
When product or page text changes, Smart Audio Sync can regenerate narration in the background. Mapping fields still decide which text and where the player lives.
FAQ
FAQ: Shopify text to speech on product pages
Does Shopify support text to speech and AI voices with GSpeech?
Yes. GSpeech adds Shopify text to speech so merchants can offer AI product page audio on descriptions, collections, and store blogs. Audio is generated in the cloud and played through modern widgets — without API keys on your theme.
How do I add GSpeech with theme.liquid or Custom Liquid?
Copy the Shopify connection code from Integrations → Shopify. Paste it in theme.liquid (or Custom Liquid / Custom HTML) before </body> and publish. Then add a mount such as <div class="gsp_full_player"></div> on the product template and set Render Element to that class.
What is Content Selector vs Render Element on Shopify?
Content Selector chooses which theme HTML to narrate — usually .product__description or .rte. Render Element chooses where the player appears — usually your Custom HTML mount. Use Exclude List for .price, .product-form, and badges so shoppers hear the description, not checkout UI.
Will GSpeech audio slow down my Shopify store?
No. Synthesis and caching happen in the GSpeech cloud, not on Shopify servers. The theme embed is lightweight, and players appear only on templates where you place mounts. Product pages keep normal storefront performance while audio plays on demand.
Do I need API keys for Shopify TTS?
No. GSpeech is No API Keys Required for Shopify. Connect with theme.liquid, configure product audio widgets in the Cloud Console, and publish. Voices and players are managed from one account without third-party TTS keys in your theme.
Help
Need help finding selectors for a Shopify theme or product layout?
Contact GSpeech support.
Send a page URL and we will help map Content Selector / Render Element.
