Install Napster Agent on Shopify

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 Spaces, open your Space, go to Preview & Publish, choose Embeddable Module or Agent Only, and click Copy in the Embed Code box. See Install Napster Agent on your website for help choosing.
• 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

Embeddable Module or Agent Only: every page

Both options stay fixed in the bottom-right corner of the browser window.

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

Show it on one page only

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

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

Test it

1. In Shopify admin, click Online Store, then click Preview store. This opens your storefront even while it is password-protected.
2. Look for the agent in the bottom-right corner. It can take a few seconds to appear.
3. Click Start and allow microphone access when asked.
4. Check that you can hear a reply.
5. 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.
• 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.