Add a website feedback widget to Shopify
Paste the line into theme.liquid, just before </body>, on the theme you're building to keep it off the live store. Clients you invite then click anything on the site and leave a note, with a screenshot, the page and their browser attached. Everyone else sees nothing.
Updated
Before you start
- Create a free Pinnote account and add your site. Its settings show your line of code, under Install, with your own site key in place of
pk_…. - Permission to edit themes. No Shopify app to install.
<script src="https://pinnote.app/widget.js" data-project="pk_…" async></script>Add it to Shopify
- Go to Online Store › Themes, open the … menu on the theme and choose Edit code. Building a new theme for a client? Use that one, not the live theme, so the Feedback button shows only in its previews and never to shoppers.
- Under Layout, open
theme.liquid. - Paste the line just before
</body>and save. Use the plain script tag, not Liquid'sscript_tagfilter, which can't adddata-project. - To share an unpublished theme, open its … menu, choose Preview and copy the share link. Shopify's preview links stop working after a few days, so make a fresh one for each round of feedback.
Check it works
In Pinnote, open your site's settings and, under Install, click Try it on my site. It opens your site signed in as a reviewer; the Feedback button appears in the corner, and Install turns to "Installed". Then invite your client by email. They click the link and can comment straight away, with no account.
If clients review on the myshopify.com address, which theme previews use, as well as on your own domain, add it under Other addresses in your site's settings in Pinnote.
Good to know on Shopify
- A store that isn't launched yet asks visitors for its password first. Send reviewers the store password with the link; the Feedback button appears once they're in.
- Checkout and the thank-you page don't use your theme, so the Feedback button doesn't appear there. For feedback on checkout, ask reviewers to leave a general comment on the cart page.
- Updating a theme from the Shopify Theme Store gives you a fresh copy without your code edits. Paste the line into the new version's
theme.liquidagain. - When the new theme goes live, the Feedback button goes with it. Take the line out, or set visitors to No button in Pinnote so just the people you invite see it.
- Check who gets the button on your site's People page. Open the site from an invite, your share link or Try it on my site to see it as an invited person; a private window shows what visitors see.