Install on Shopify

The recommended path for Shopify is the theme snippet — a single Liquid file that isolates the widget from your theme’s other code so it survives theme updates.

Option A — Theme snippet (recommended)

1. Copy the snippet

   From the Spelo dashboard: Install → Shopify → Copy snippet. The snippet looks like:

   {% comment %} Spelo voice widget {% endcomment %}
   <script
     src="https://spelo.ai/spelo.js"
     data-site-id="YOUR_SITE_ID"
     async
   ></script>

2. Open the theme editor

   Shopify admin → Online Store → Themes → ⋯ (Actions) → Edit code.

3. Add a new snippet

   In the left pane, under Snippets, click Add a new snippet. Name it voice-widget. Paste the Liquid snippet and Save.

4. Render the snippet in your layout

   Open Layout → theme.liquid. Scroll to the bottom and find </body>. Just before it, add:

   {% render 'voice-widget' %}
   </body>

   Click Save.

5. Verify

   Open your storefront. The orb should appear at the bottom center. Click it, allow mic, speak.

Tip

Theme updates will keep your snippet file. If you switch themes, re-add the {% render 'voice-widget' %} line to the new theme’s theme.liquid.

Option B — Shopify App (easier for non-developers)

If your team does not edit theme code, install the Spelo app from the Shopify App Store. It handles the snippet automatically.

1. Shopify admin → Apps → Shopify App Store → search Spelo
2. Add app → Install
3. Enter your site_id → Save

The app adds a ScriptTag that loads the widget site-wide. Uninstalling the app removes it cleanly.

Option C — theme.liquid direct paste

Skip the snippet and paste the <script> tag directly in theme.liquid just before </body>. Works, but a theme update wipes it. Prefer Option A.

Connect your product catalog

Spelo comes with a first-class Shopify adapter — plug in your Storefront API token and the AI can search, filter, and describe products by voice.

1. Dashboard → Data → Shopify
2. Either click Connect with Shopify (OAuth, recommended), or paste a Storefront API token manually
3. Click Test connection. You should see “OK” and your product count.

Full instructions: Shopify adapter.

Shopify-specific notes

• Sections Everywhere / Online Store 2.0 — the widget works with every 2.0 theme (Dawn, Sense, Craft, Studio, Colorblock, Taste, Crave, Ride, etc.).
• Shopify Hydrogen (headless) — install via the React guide or the Next.js guide instead.
• App Embed blocks — we publish a theme app extension that shows up as an App embed. Enable it from Customize theme → App embeds.
• Page caching — not an issue. The widget fetches config at runtime.
• hide_unless_on_collection — the widget respects the disabled_pages patterns configured in the dashboard. Point to pages where you do not want the orb (e.g. checkout).
• Checkout pages — widgets are not allowed on Shopify checkout. Spelo detects /checkouts/ URLs and self-disables.

Verify the install

DevTools → Network. Filter for spelo.js and spelo.ai. You should see:

• 200 spelo.ai/spelo.js on page load
• 200 api.spelo.ai/v1/<site_id>/config
• 200 api.spelo.ai/v1/<site_id>/token after you click the orb

Troubleshooting

• Orb missing → Orb not appearing
• CORS error → your domain in the Spelo dashboard must exactly match the Shopify storefront URL (include subdomain). See CORS errors.
• Widget appears on checkout → already prevented, but file an issue if you see it.

Install on another platform

Raw HTML WordPress Webflow Wix Squarespace Framer Next.js React Vue / Nuxt Angular SvelteKit Astro