如何用 ElevenLabs API 为 Shopify 商店集成语音 AI

Why Add Voice AI to a Shopify Store?

E‑commerce is getting louder—literally. Shoppers are increasingly using smart speakers, earbuds, and voice assistants to browse products, compare prices, and even place orders. By giving your Shopify store a voice‑first interface you can:

• Boost accessibility for users who prefer listening over reading.
• Increase engagement—audio can convey tone, excitement, and brand personality that static copy can’t.
• Differentiate from competitors who are still stuck in the text‑only world.

In this post we’ll walk through a practical way to add Text‑to‑Speech (TTS) and voice‑cloning to a Shopify store using the ElevenLabs API. By the end you’ll have a small Flask service that generates product‑description audio on‑the‑fly, and a snippet you can drop into a Shopify theme to play it back.

Getting Started with ElevenLabs

ElevenLabs provides a high‑quality, low‑latency TTS service with optional voice cloning. Sign up through their affiliate link to get an API key:

https://try.elevenlabs.io/kr07zfuqn1bp

Once you have the key, you’ll be able to call two main endpoints:

Both return an MP3 stream that you can serve directly to browsers.

Building a Tiny Flask Service

Below is a minimal Python Flask app that:

1. Receives a Shopify product ID.
2. Pulls the product’s title & description via the Storefront API.
3. Sends the text to ElevenLabs for synthesis.
4. Streams the MP3 back to the client.

# app.py
import os
import requests
from flask import Flask, request, Response, abort
from shopify import ShopifyAPI  # pseudo‑module for illustration

app = Flask(__name__)

ELEVEN_API_KEY = os.getenv("ELEVEN_API_KEY")
ELEVEN_TTS_URL = "https://api.elevenlabs.io/v1/text-to-speech"

# Use a default voice; you can replace it with a cloned voice_id later.
DEFAULT_VOICE_ID = "21m00Tcm4TlvDq8ikWJ"

def synthesize(text, voice_id=DEFAULT_VOICE_ID):
    url = f"{ELEVEN_TTS_URL}/{voice_id}"
    headers = {
        "xi-api-key": ELEVEN_API_KEY,
        "Content-Type": "application/json",
    }
    payload = {
        "text": text,
        "voice_settings": {"stability": 0.75, "similarity_boost": 0.85},
    }
    r = requests.post(url, json=payload, headers=headers, stream=True)
    if r.status_code != 200:
        abort(502, description="ElevenLabs TTS failed")
    return r.iter_content(chunk_size=8192)

@app.route("/product-audio/<int:product_id>")
def product_audio(product_id):
    # 1️⃣ Pull product data from Shopify
    product = ShopifyAPI.get_product(product_id)
    if not product:
        abort(404, "Product not found")

    # 2️⃣ Build the narration text
    narration = f"{product.title}. {product.body_html}"

    # 3️⃣ Stream back the MP3
    return Response(
        synthesize(narration),
        mimetype="audio/mpeg",
        headers={"Content-Disposition": f'inline; filename="{product.handle}.mp3"'}
    )

if __name__ == "__main__":
    app.run(host="0.0.0.0", port=8080)

Note: The shopify import is a placeholder. In a real project you can use the official shopifyapi Python package or a simple GraphQL query with requests.

Deploying

• Heroku / Render / Fly.io – all support a free tier that’s enough for low‑traffic stores.
• Docker – wrap the app in a container if you prefer Kubernetes or a custom VPS.

docker build -t shop-voice .
docker run -e ELEVEN_API_KEY=your_key -p 8080:8080 shop-voice

Adding Voice Cloning for a Brand‑Specific Tone

If your brand already has a distinctive voice (e.g., a podcast host or a mascot), you can clone it with ElevenLabs. Here’s a quick curl example that uploads a 30‑second WAV file and returns a new voice_id.

curl -X POST "https://api.elevenlabs.io/v1/voice-clone" \
  -H "xi-api-key: $ELEVEN_API_KEY" \
  -H "Content-Type: multipart/form-data" \
  -F "name=MyBrandVoice" \
  -F "samples=@/path/to/sample.wav"

The response looks like:

{
  "voice_id": "abcd1234efgh5678ijkl",
  "status": "queued"
}

Once the status is ready, replace DEFAULT_VOICE_ID in the Flask code with the new ID. Your product narration will now sound exactly like your brand’s human voice.

Hooking the Audio Into a Shopify Theme

Shopify themes can load external scripts via a script_tag. Add the following snippet to theme.liquid (or any section that renders a product page).

{% if template == 'product' %}
  <div id="voice-player" style="margin-top: 1rem;"></div>
  <script>
    async function loadAudio() {
      const productId = {{ product.id }};
      const audioUrl = `https://YOUR_HOSTNAME/product-audio/${productId}`;
      const container = document.getElementById('voice-player');

      const audio = document.createElement('audio');
      audio.controls = true;
      audio.src = audioUrl;
      container.appendChild(audio);
    }

    // Load after the DOM is ready
    document.addEventListener('DOMContentLoaded', loadAudio);
  </script>
{% endif %}

When a shopper lands on a product page, the script fetches the MP3 from your Flask service and injects a native HTML5 audio player. No extra plugins, no heavy JS frameworks—just a few lines of code.

Going Further: Voice‑Enabled Search

If you want to let users speak their search query, combine the ElevenLabs TTS with a speech‑to‑text service like Whisper or Google Speech API. The flow would be:

1. Capture microphone input with the Web Speech API.
2. Convert speech → text (STT).
3. Use the text to query Shopify’s Storefront API.
4. Return results, optionally reading them out with the TTS endpoint we built.

Because the Flask service already streams MP3, you can reuse it for both product descriptions and search result snippets.

Security & Performance Tips

Wrap‑Up

Adding voice AI to a Shopify store isn’t a massive engineering effort�just a few lines of Python, a tiny Flask wrapper, and a couple of theme edits. The biggest payoff comes from the human touch that a well‑crafted voice brings to product storytelling.

Ready to give your store a voice? Grab an ElevenLabs API key through the affiliate link below, spin up the Flask service, and start delighting shoppers with audible product descriptions.