Shopify: Преобразование текста в речь — Аудио со страницы товара
Shopify интеграция
Shopify: преобразование текста в речь — аудио для страниц товаров с использованием ИИ (тег theme.liquid)
Превратите описания товаров, коллекции и записи в блоге магазина Shopify в готовые к прослушиванию аудиокниги. аудио на странице товара с GSpeechТорговцы получают естественные голоса ИИ и современных игроков, а синтез происходит в процессе работы. GSpeech Облачная Консоль - API-ключи не требуютсяи отсутствие загрузки TTS на вашем хостинге тем Shopify.
Это руководство охватывает Shopify TTS Настройка: вставьте код подключения перед in theme.liquid (или используйте пользовательский Liquid / пользовательский HTML), разместите полностраничные / кнопочные / круговые плееры на шаблонах товаров и контента, затем сопоставьте их. Селектор содержимого и Рендеринг элемента Таким образом, в режиме повествования читаются описания, а в режиме «Исключить список» пропускаются цены, формы и значки.
theme.liquid text to speech — Один шаблон для встраивания витрины магазина, включающий шаблоны товаров, коллекций и блога.
Генерация облачного аудио — синтезировать один раз, кэшировать и воспроизводить для разных покупателей.
API-ключи не требуются — голоса и игроки с одной консоли.
Исключить цену и бланки — Оставьте интерфейс оформления заказа без звука, пока озвучиваются описания.
Оптимально для: Продавцы Shopify, которым нужны готовые к воспроизведению описания товаров, истории коллекций и статьи для блога — с ценами, формами добавления в корзину и значками, исключенными из голосового воспроизведения.
Создать сайт — Если вы еще не добавили сайт магазина, следуйте инструкциям. создать сайт.
Откройте сайт — перейдите к своему приборная панель и выберите сайт Shopify.
Скопируйте код Shopify - открыть Интеграции → Shopify и скопируйте код подключения.
Вставить перед — вставьте код в свою тему (обычно) theme.liquid(пользовательский Liquid или пользовательский HTML) перед закрытием Сначала добавьте тег, затем опубликуйте.
Код подключения загружается GSpeech На каждой странице витрины магазина, где он присутствует. Игроки отображаются только там, где вы размещаете монтировки / пользовательский HTML-код, и только когда соответствующий виджет опубликован и настроен.
Модель отображения
theme.liquid, крепления продуктов и сопоставление контента
На Shopify один theme.liquid Функция встраивания загружает движок для всего интернет-магазина. Затем каждый виджет сопоставляет текст описания товара, текст коллекции или HTML-код блога с местом для воспроизведения — без необходимости жестко прописывать аудио в каждом товаре:
1Код подключения
Загружает движок из theme.liquid / Custom Liquid. Без него области монтирования товаров остаются пустыми.
2Пользовательский виджет
Настройки панели управления: голос, язык, дизайн, параметры контента, правила URL-адресов для товаров и блогов.
3Крепление / Пользовательский HTML
Маркер в разделе товара или тематическом блоке (например) .gsp_full_player) где появляется игрок.
4Картирование контента
Селектор содержимого = текст описания для чтения. Рендеринг элемента = место, где появляется игрок. Исключить цены, формы и значки.
Неограниченное количество виджетов — Отдельные виджеты «Полная страница», «Кнопка» или «Круг» для товаров, коллекций, блогов или языков.
Неограниченное количество игроков на один виджет — Один опубликованный виджет может обеспечить работу всех соответствующих правил монтирования, разрешенных правилами Render Element + URL.
Пользовательский HTML / Liquid — На Shopify крепление выглядит так: <div class="gsp_full_player"></div>В WordPress используется тот же принцип с помощью шорткодов, например: [gspeech].
Значения по умолчанию против расширенных настроек — Стандартные настройки работают быстро. Для пользовательских разделов темы требуются точные значения Content Selector / Render Element.
Игроки
Добавление игроков с помощью пользовательского HTML-кода Shopify
Разместите любой из этих вариантов в том месте, где должен отображаться плеер на страницах товаров или контента. Щелкните карточку, чтобы скопировать. Затем настройте виджет. Рендеринг элемента в тот же класс.
Сопоставьте текст товаров и тем оформления Shopify с плеером.
В виджете Контент Вкладка, описание целевого продукта и тематические обертки — все это покупатели должны слышать, а цена, формы заказа и значки должны быть исключены, чтобы звуковое сопровождение оставалось полезным.
CS
Селектор содержимого
Определяет Какой текст озвучен?Используйте CSS-селекторы, разделённые запятыми. Примеры:
.Описание продукта, .rte, #ОсновнойКонтент — прочтите эти элементы.
.product__description,.rte,#my_id,.my_class — несколько целей на одном поле.
родительский_класс — Прочитайте родительский контейнер элемента монтирования (полезно для пользовательского HTML-кода внутри раздела товара).
self_class — Прочитайте ту же самую обложку, в которой находится крепление.
Оставьте поле пустым, если используете Текст контента вместо этого (фиксированный текст, а не содержимое DOM).
RE
Рендеринг элемента
Определяет где внедряется пользовательский интерфейс игрокаОно должно соответствовать реальному элементу на странице витрины магазина.
Для пользовательских HTML-монтирований установите класс монтирования: .gsp_full_player, .gsp_button_player или .gsp_circle_player.
Вы также можете выбирать контейнеры макета, например... тело, #ОсновнойКонтент или .product__title когда вы не используете специальное крепление.
Если параметр Content Selector указан правильно, но ничего не отображается, это обычно означает, что параметр Render Element на этой странице указан неверно или отсутствует.
RP
Позиция рендеринга
Размещает игрока Перед тем, как or После Отображение содержимого элемента. Для выделенного div-элемента монтирования параметры After/Before обычно по-прежнему работают относительно этого узла — оставьте монтирование пустым и позвольте виджету заполнить его.
EX
Исключить список
Отборщики, которые должны не Произноситься вслух, даже если они находятся внутри селектора контента. Разделены запятыми. Пример: .product-form,.price,.badge,.no-speech.
TT
Выбор заголовка / Текст заголовка
Выбор названия — динамический заголовок со страницы (пример: h1.product__title).
Текст заголовка — В плеере отображается фиксированный заголовок. При использовании текста заголовка оставьте поле выбора заголовка пустым.
CT
Текст контента
Необязательный фиксированный текст для озвучивания. При использовании селектор контента может оставаться пустым. Полезно для коротких рекламных блоков на страницах коллекций, когда DOM продукта не должен управлять звуком.
Общее правило для Shopify: Цели селектора контента .product__description (или .rte), Render Element нацелен на точку монтирования, а Exclude List сохраняет .price и .product-form звук отсутствует.
Примеры
Практические примеры сопоставления элементов на страницах товаров Shopify.
Пример А
Описание товара с полноэкранным проигрывателем.
Шаблон товара включает описание и крепление рядом с кнопкой покупки:
Коллекция или статья в блоге с родительским классом
Если элемент управления находится внутри статьи коллекции или основного текста блога магазина, селектор контента может быть относительным:
Селектор содержимого - parent_class (читает родительский элемент крепления)
Рендеринг элемента - .gsp_full_player
Исключить список — Сохраняйте информацию о цене и формах, если они используются в одном шаблоне.
Используйте self_class когда сам контейнер mount содержит текст, который должен быть озвучен.
Пример С
Аудиоконтент для всего каталога товаров с помощью одного виджета
Место .gsp_button_player на шаблоне продукта. Виджет One Button Player с элементом рендеринга. .gsp_button_player Может использоваться на каждой странице товара. Создавайте дополнительные виджеты только в тех случаях, когда необходимо учитывать особенности стиля, селекторы или правила URL-адресов (например, для блога и страницы товара).
Публикуй и слушай — Установите статус на «Опубликовано», обновите действующий интерфейс магазина, проверьте воспроизведение.
При изменении текста товара или страницы функция Smart Audio Sync может автоматически восстанавливать озвучку в фоновом режиме. При этом полями сопоставления по-прежнему определяется их назначение. , которые текст и в котором Игрок выживает.
FAQ
Часто задаваемые вопросы: Преобразование текста в речь в Shopify на страницах товаров
Поддерживает ли Shopify преобразование текста в речь и голосовые команды ИИ с помощью GSpeech?
Да. GSpeech добавляет Shopify преобразование текста в речь Таким образом, продавцы могут добавлять аудио с использованием ИИ на страницы товаров в описания, коллекции и блоги магазинов. Аудио генерируется в облаке и воспроизводится через современные виджеты — без необходимости использования API-ключей в вашей теме оформления.
Как добавить GSpeech с помощью theme.liquid или Custom Liquid?
Скопируйте код подключения Shopify из раздела «Интеграции» → «Shopify». Вставьте его. theme.liquid (или пользовательский Liquid / пользовательский HTML) перед и опубликовать. Затем добавьте точку монтирования, например: <div class="gsp_full_player"></div> в шаблоне товара установите для параметра Render Element этот класс.
Что такое Content Selector и Render Element в Shopify?
Селектор содержимого выбирает, какой HTML-код темы озвучивать — обычно .product__description or .rte. Рендеринг элемента Выбирает место отображения плеера — обычно это ваш пользовательский HTML-код. Используйте список исключений для .price, .product-formа также значки, чтобы покупатели слышали описание, а не интерфейс оформления заказа.
Замедлит ли использование аудиофункции GSpeech работу моего магазина Shopify?
Нет. Синтез и кэширование происходят в GSpeech Облачное хранилище, а не серверы Shopify. Встраиваемая тема легковесна, и плееры отображаются только в тех шаблонах, где вы размещаете крепления. Страницы товаров сохраняют обычную производительность витрины магазина, а аудио воспроизводится по запросу.
Нужны ли мне API-ключи для Shopify TTS?
№ GSpeech is API-ключи не требуются Для Shopify. Подключитесь к theme.liquid, настройте виджеты аудио для товаров в Cloud Console и опубликуйте. Голоса и плееры управляются из одной учетной записи без использования сторонних TTS-ключей в вашей теме.
Помощь
Нужна помощь в поиске селекторов для темы Shopify или макета товара?
Обратитесь в службу поддержки GSpeechОтправьте URL страницы, и мы поможем сопоставить селектор контента / элемент рендеринга.
