Shopify chuyển văn bản thành giọng nói — Âm thanh trang sản phẩm bằng AI thông qua theme.liquid
Chuyển đổi mô tả sản phẩm, bộ sưu tập và bài đăng trên blog cửa hàng Shopify thành nội dung sẵn sàng để nghe. âm thanh trang sản phẩm với GSpeechCác thương nhân có được giọng nói AI tự nhiên và người chơi hiện đại trong khi quá trình tổng hợp diễn ra. GSpeech Bảng điều khiển đám mây - Không cần khóa APIvà không cần tải TTS lên máy chủ theme Shopify của bạn.
Hướng dẫn này bao gồm Shopify TTS thiết lập: dán mã kết nối trước in chủ đề thanh khoản (hoặc Custom Liquid / Custom HTML), đặt các trình phát Full Page / Button / Circle lên các mẫu sản phẩm và nội dung, sau đó lập bản đồ. Bộ chọn nội dung và Phần tử kết xuất Vì vậy, phần tường thuật sẽ đọc các mô tả — và Danh sách loại trừ sẽ bỏ qua giá cả, biểu mẫu và huy hiệu.
theme.liquid text to speech — Một mẫu nhúng cửa hàng dành cho sản phẩm, bộ sưu tập và blog.
Tạo âm thanh đám mây — Tổng hợp một lần, lưu vào bộ nhớ đệm và phát lại cho nhiều người mua sắm khác nhau.
Không cần khóa API — giọng nói và người chơi từ cùng một máy chơi game.
Không bao gồm giá cả và biểu mẫu. — Giữ cho giao diện thanh toán im lặng trong khi phần mô tả vẫn hiển thị nội dung.
Tốt nhất cho: Các nhà bán hàng trên Shopify muốn có mô tả sản phẩm, câu chuyện bộ sưu tập và bài viết blog ở định dạng âm thanh — với giá cả, biểu mẫu thêm vào giỏ hàng và huy hiệu được loại trừ khỏi giọng nói.
Tạo một trang web — Nếu bạn chưa thêm trang cửa hàng, hãy làm theo hướng dẫn sau. tạo một trang web.
Mở trang web — hãy đến chỗ của bạn bảng điều khiển và chọn trang web Shopify.
Sao chép mã Shopify - mở Tích hợp → Shopify và sao chép mã kết nối.
Dán trước — Chèn đoạn mã vào giao diện của bạn (thường là...) chủ đề thanh khoản(Custom Liquid, hoặc Custom HTML) trước thẻ đóng Gắn thẻ, sau đó xuất bản.
Mã kết nối được tải GSpeech Trên mọi trang cửa hàng có hiển thị. Người chơi chỉ xuất hiện ở những nơi bạn đặt thú cưỡi / HTML tùy chỉnh và chỉ khi tiện ích tương ứng được xuất bản và cấu hình.
Mô hình ánh xạ
theme.liquid, các điểm gắn kết sản phẩm và ánh xạ nội dung
Trên Shopify, một chủ đề thanh khoản Chức năng nhúng tải công cụ lên toàn bộ cửa hàng. Mỗi widget sau đó sẽ ánh xạ văn bản mô tả sản phẩm, nội dung bộ sưu tập hoặc HTML bài đăng blog vào một trình phát âm thanh — mà không cần mã hóa cứng âm thanh vào từng sản phẩm:
1Mã kết nối
Tải engine từ theme.liquid / Custom Liquid. Nếu không có nó, các thư mục sản phẩm sẽ vẫn trống.
2Tiện ích tùy chỉnh
Cấu hình bảng điều khiển: giọng nói, ngôn ngữ, thiết kế, cài đặt nội dung, quy tắc URL cho sản phẩm so với bài đăng blog.
3Gắn kết / HTML tùy chỉnh
Một dấu hiệu đánh dấu trong phần sản phẩm hoặc khối chủ đề (ví dụ: .gsp_full_player) nơi người chơi xuất hiện.
4Bản đồ nội dung
Bộ chọn nội dung = Văn bản mô tả để đọc. Phần tử kết xuất = vị trí hiển thị của người chơi. Không bao gồm giá cả, biểu mẫu và huy hiệu.
Không giới hạn vật dụng — Các widget riêng biệt như Full Page, Button hoặc Circle dành cho sản phẩm, bộ sưu tập, blog hoặc ngôn ngữ.
Số lượng người chơi không giới hạn cho mỗi tiện ích — Một widget đã được xuất bản có thể cung cấp năng lượng cho mọi điểm gắn kết phù hợp được cho phép bởi các quy tắc Render Element + URL.
HTML/Liquid tùy chỉnh — Trên Shopify, giá đỡ trông như thế này <div class="gsp_full_player"></div>Trên WordPress, ý tưởng tương tự được thực hiện bằng cách sử dụng shortcode, ví dụ như... [gspeech].
Cài đặt mặc định so với cài đặt nâng cao — Các mount mặc định hoạt động nhanh chóng. Các phần theme tùy chỉnh cần các giá trị Content Selector / Render Element chính xác.
Người chơi
Thêm người chơi bằng HTML tùy chỉnh của Shopify
Đặt bất kỳ vị trí nào trong số này vào nơi người chơi nên xuất hiện trên các trang sản phẩm hoặc nội dung. Nhấp vào một thẻ để sao chép. Sau đó thiết lập tiện ích. Phần tử kết xuất cùng lớp.
Ánh xạ văn bản sản phẩm và chủ đề Shopify vào trình phát
Trong tiện ích Nội dung Tab, mô tả sản phẩm mục tiêu và trình bao bọc chủ đề mà người mua hàng nên nghe — và loại trừ giá cả, biểu mẫu sản phẩm và huy hiệu để âm thanh vẫn hữu ích.
CS
Bộ chọn nội dung
Xác định Văn bản nào được nói?Sử dụng bộ chọn CSS, phân cách bằng dấu phẩy. Ví dụ:
.product__description, .rte, #NộiDungChính — hãy đọc những yếu tố đó.
.product__description,.rte,#my_id,.my_class — Nhiều mục tiêu trong cùng một khu vực.
lớp cha — Đọc phần tử bao bọc cha của phần tử được gắn kết (hữu ích cho HTML tùy chỉnh bên trong phần sản phẩm).
tự_lớp — hãy đọc cùng một nội dung trên bao bì mà giá đỡ được đặt bên trong.
Để trống nếu bạn sử dụng nội dung văn bản thay vào đó (văn bản cố định, không phải nội dung DOM).
RE
Phần tử kết xuất
Xác định nơi giao diện người dùng của người chơi được chèn vàoNó phải khớp với một phần tử thực trên trang cửa hàng.
Đối với các phần tử gắn kết HTML tùy chỉnh, hãy đặt nó thành lớp gắn kết: .gsp_full_player, .gsp_button_player, hoặc là .gsp_circle_player.
Bạn cũng có thể nhắm mục tiêu vào các vùng chứa bố cục như thân hình, #NộiDungChính, hoặc là .product__title khi bạn không sử dụng giá đỡ chuyên dụng.
Nếu Content Selector chính xác nhưng không có gì hiển thị, thì thường là Render Element bị sai hoặc thiếu trên trang đó.
RP
Vị trí kết xuất
Đặt người chơi Trước or Sau Nội dung của Render Element. Đối với một div được gắn kết riêng, After/Before thường vẫn hoạt động tương đối so với nút đó — hãy để phần gắn kết trống và để widget tự điền vào.
EX
Danh sách loại trừ
Các bộ chọn phải không Có thể được đọc, ngay cả khi chúng nằm bên trong Content Selector. Phân cách bằng dấu phẩy. Ví dụ: .product-form,.price,.badge,.no-speech.
TT
Bộ chọn tiêu đề / Văn bản tiêu đề
Bộ chọn tiêu đề — Tiêu đề động từ trang (ví dụ: h1.product__title).
Tiêu đề văn bản — Tiêu đề cố định hiển thị trong trình phát. Để trống ô Chọn tiêu đề khi sử dụng Văn bản tiêu đề.
CT
nội dung văn bản
Văn bản tường thuật cố định tùy chọn. Khi được sử dụng, Trình chọn nội dung có thể để trống. Hữu ích cho các khối quảng cáo ngắn trên các trang bộ sưu tập khi DOM sản phẩm không nên điều khiển âm thanh.
Nguyên tắc chung khi sử dụng Shopify: Bộ chọn nội dung nhắm mục tiêu .product__description (Hoặc .rte), Render Element nhắm mục tiêu vào điểm gắn kết, và Exclude List giữ nguyên .price và .product-form ngoài phần âm thanh.
Các ví dụ
Ví dụ thực tế về cách lập bản đồ cho trang sản phẩm Shopify
Ví dụ A
Mô tả sản phẩm kèm trình phát toàn màn hình
Mẫu sản phẩm bao gồm mô tả và giá đỡ gần hộp mua hàng:
Bộ chọn tiêu đề - h1.product__title (Không bắt buộc)
Ví dụ B
Bộ sưu tập hoặc bài viết blog có parent_class
Nếu phần tử gắn kết nằm bên trong bài viết về bộ sưu tập hoặc nội dung bài đăng trên blog của cửa hàng, thì Content Selector có thể được sử dụng theo cách tương đối:
Bộ chọn nội dung - parent_class (đọc thông tin từ thư mục cha của thư mục)
Phần tử kết xuất - .gsp_full_player
Danh sách loại trừ — Không hiển thị giá và biểu mẫu nếu chúng xuất hiện trên cùng một mẫu.
Sử dụng self_class khi chính trình bao bọc gắn kết chứa văn bản cần được tường thuật.
Ví dụ C
Hiển thị âm thanh sản phẩm trên toàn danh mục với một tiện ích duy nhất.
Nơi .gsp_button_player trên mẫu sản phẩm. Tiện ích One Button Player với Render Element .gsp_button_player Có thể cung cấp năng lượng cho mọi trang sản phẩm. Chỉ tạo thêm widget khi cần có sự khác biệt về giọng nói, bộ chọn hoặc quy tắc URL (ví dụ: blog so với sản phẩm).
Chọn trang web — Mở cửa hàng Shopify mà bạn đã kết nối.
Thêm tiện ích mới — Tiện ích → Thêm tiện ích mới → chọn loại (Trình phát đầy đủ, Nút, Hình tròn, …) → Tạo.
Cấu hình nội dung — Thiết lập Bộ chọn nội dung, Phần tử hiển thị, Danh sách loại trừ (giá/biểu mẫu), tiêu đề.
Cấu hình trình phát / Thiết kế — giọng nói, bảng điều khiển, chủ đề, chiều rộng, lề.
Xuất bản & nghe — Đặt Trạng thái thành Đã xuất bản, làm mới trang cửa hàng trực tuyến, kiểm tra phát lại.
Khi văn bản sản phẩm hoặc trang thay đổi, Smart Audio Sync có thể tự động tạo lại phần tường thuật trong nền. Các trường ánh xạ vẫn quyết định điều này. cái nào văn bản và Ở đâu Người chơi vẫn còn sống.
FAQ
Câu hỏi thường gặp: Tính năng chuyển văn bản thành giọng nói trên trang sản phẩm của Shopify
Shopify có hỗ trợ chuyển văn bản thành giọng nói và giọng nói AI với GSpeech không?
Vâng. GSpeech thêm Chuyển văn bản thành giọng nói của Shopify Nhờ đó, các nhà bán lẻ có thể cung cấp âm thanh AI cho trang sản phẩm trong phần mô tả, bộ sưu tập và blog cửa hàng. Âm thanh được tạo ra trên đám mây và phát qua các tiện ích hiện đại — mà không cần khóa API trên giao diện của bạn.
Tôi có thể thêm GSpeech bằng theme.liquid hoặc Custom Liquid như thế nào?
Sao chép mã kết nối Shopify từ mục Tích hợp → Shopify. Dán mã đó vào chủ đề thanh khoản (hoặc Custom Liquid / Custom HTML) trước đó và xuất bản. Sau đó thêm một điểm gắn kết như sau: <div class="gsp_full_player"></div> Trên mẫu sản phẩm, hãy đặt Render Element thành lớp đó.
Content Selector khác với Render Element như thế nào trên Shopify?
Bộ chọn nội dung chọn chủ đề HTML nào để tường thuật — thường là .product__description or .rte. Phần tử kết xuất Chọn vị trí hiển thị của trình phát — thường là vị trí gắn kết HTML tùy chỉnh của bạn. Sử dụng Danh sách loại trừ cho .price, .product-formvà các huy hiệu để người mua hàng nghe được phần mô tả, chứ không phải giao diện thanh toán.
Liệu việc sử dụng âm thanh GSpeech có làm chậm cửa hàng Shopify của tôi không?
Không. Quá trình tổng hợp và lưu trữ diễn ra trong... GSpeech Trên nền tảng đám mây, không phải máy chủ Shopify. Việc nhúng giao diện rất nhẹ, và trình phát chỉ xuất hiện trên các mẫu mà bạn đã đặt các điểm gắn kết. Trang sản phẩm vẫn giữ hiệu suất bình thường của cửa hàng trong khi âm thanh phát theo yêu cầu.
Tôi có cần khóa API cho Shopify TTS không?
STT GSpeech is Không cần khóa API Dành cho Shopify. Kết nối với theme.liquid, cấu hình tiện ích âm thanh sản phẩm trong Cloud Console và xuất bản. Giọng nói và trình phát được quản lý từ một tài khoản duy nhất mà không cần khóa TTS của bên thứ ba trong giao diện của bạn.
Trợ giúp
Bạn cần trợ giúp tìm các bộ chọn cho giao diện Shopify hoặc bố cục sản phẩm?
Liên hệ bộ phận hỗ trợ GSpeechHãy gửi URL của trang và chúng tôi sẽ giúp bạn ánh xạ Bộ chọn nội dung / Phần tử hiển thị.
