Install Napster Agent on Shopify – Napster Help

📢 Name update: Napster Agent was formerly known as Napster Spaces. This change took effect August 2026.

This guide shows how to put Napster Agent on your Shopify storefront. It adds the agent to your website only. To let your agent show and sell your products, see How Napster Agent connects to your Shopify store.

Before you start

In Napster Agent, open your agent and go to Preview & Publish (it shows as Preview & Update once your agent is published). You can also click the ⋮ menu on your agent and choose Copy Embed Code.
Under Put your agent live, choose Agent only or Agent with cards (in the corner, iframe), Overlay agent (over your site, JavaScript) or Inline block (inside a page section, iframe). For the Overlay agent, pick the button position and theme first. See Install Napster Agent on Your Website: Choose Your Platform for help choosing.
Click Copy code and paste it exactly as it is. It contains your agent's unique ID.
You need a staff account that can edit themes.
Back up your theme first: in Shopify admin, click Online Store, click the three-dot menu (...) on your live theme and choose Duplicate.

Add the code to Shopify

Agent only, Agent with cards or Overlay agent: every page

Agent only and Agent with cards float in the corner of the browser window. The Overlay agent places a button in the corner you chose and can lay cards over the page.

In Shopify admin, click Online Store. Your themes are listed on that page.
On your live theme, click the three-dot menu (...) next to Edit theme, then choose Edit code.
Under Layout, open theme.liquid.
Scroll to the bottom and find </body>.
Paste your code on the line just above </body>.
Click Save.

Show a corner agent on one page only

In Shopify admin, click Online Store, then click Edit theme.
Use the page selector at the top to open the page where you want the agent.
In the left panel, click Add section and choose Custom Liquid.
Paste your Agent only or Agent with cards code into the Liquid code box, then click Save.

The agent still floats in the corner of the window. If it appears inside the section instead, use the every-page steps above.

Inline block: inside a page section

The Inline block is different: it sits exactly where you paste it, inside one section of one page, like a video. Use it for a dedicated agent page or a hero section.

In Shopify admin, click Online Store, then click Edit theme.
Use the page selector at the top to open the page where you want the agent.
In the left panel, click Add section where you want the agent and choose Custom Liquid.
Paste your Inline block code into the Liquid code box, then click Save.

Test it

In Shopify admin, click Online Store, then click Preview store. This opens your storefront even while it is password-protected.
Look for the agent in the corner (or in the section, for an Inline block). It can take a few seconds to appear.
Click Start and allow microphone access when asked.
Check that you can hear a reply.
To see what visitors see, open your live storefront in a private window.

Troubleshooting

Nothing appears: make sure you edited the theme that is currently published, and that the code is above </body>.
Store asks for a password: while your store is password-protected, visitors see the password page, which does not load your theme code. The agent appears once you launch the store. Until then, test it with Preview store in Online Store.
Agent doesn't show at checkout: Shopify checkout pages usually don't load theme code, so the agent appears on your storefront pages only.
Agent disappears after a theme change or update: theme updates and theme switches replace theme.liquid. Paste the code again.
The agent disappeared from every page: in Napster Agent, open Preview & Publish and check that Pause the agent on your site is turned off. Pausing hides the agent everywhere without removing your code.
Appears but never starts: see Embedding Napster Agent on Your Website (iFrame Best Practices) for microphone permissions and cookie-consent apps.

Need help?

Contact our support team with your page URL, browser details, embed code and a console screenshot. You can also use Get help in the Put your agent live panel, or Send to my developer to email the code and these instructions to whoever manages your site.