Add a feedback widget to a Shopify store

Where does the snippet go in a Shopify theme?

Put the widget script in your theme's main layout file, layout/theme.liquid, just before the closing body tag. Every storefront page renders through that file, so the floating Feedback button then appears on all of them. Open your theme's code editor from the Online Store area of the Shopify admin to find the file.

<script src="https://escutaproduto.com/widget.js" data-key="pk_your_product_key" defer></script>
</body>

Only the closing body tag is shown above so you can see where the script belongs. Keep the existing closing tags in the file and paste the script on the line before them.

Escuta Produto does not ship a Shopify app, so the snippet lives in your theme code. That works in any theme where you can edit code. It also means a theme update from the theme store can overwrite your change, which is why the next step matters.

Duplicate your theme before you edit code

Before you touch any file, duplicate the live theme from the Themes area of the admin. Edit the copy, preview it, and publish it when you are satisfied. If an update or an edit goes wrong, the previous version is one click away.

Also keep a note of the snippet's location. When you update the theme later, check that layout/theme.liquid still contains the script, because a theme update replaces files you have not customized and can drop a change you made by hand.

Identify signed-in customers with Liquid

A guest can send feedback with an email field. A signed-in customer should not have to type their email again, and their feedback is more useful tied to their account. Shopify exposes the logged-in customer in Liquid, so you can pass their details to the widget.

Add this above the widget script in theme.liquid:

{% if customer %}
<script>
  window.EscutaProduto = window.EscutaProduto || { q: [] };
  (window.EscutaProduto.q ||= []).push(["identify", [{
    email: {{ customer.email | json }},
    name: {{ customer.name | json }},
    id: {{ customer.id | json }}
  }]]);
</script>
{% endif %}

The json filter outputs a properly quoted and escaped JavaScript value, so a name with an apostrophe will not break the script. The identify call sets the email and name for every message from that visit, and it hides the email field. The id is stored as metadata, so you can match feedback to a customer record in Shopify if you need to.

Because the queue pattern works whether the widget has loaded or not, the order of these two scripts does not matter.

Allow both your domain and the myshopify address

Shoppers reach your store at your custom domain, and Shopify also serves it at a myshopify.com address. Both can show up in a visitor's browser, so add both to allowed origins in the product settings. Use the full https address for each, including the www version of your domain if it resolves.

Requests from any other origin are rejected with a 403 response. If feedback works on your domain but not on the myshopify address, the missing origin is almost certainly the cause.

Test as a guest and as a signed-in customer

Open the live store in a private window and test as a guest first. Check that the floating button appears on a product page and a collection page, and send a message. Then check the inbox to confirm the page URL shows the product.

Next, sign in with a test customer account in a normal window. The email field should be hidden and the name filled in. If the field still asks for an email, check the page source for the identify block and confirm the customer object is present for signed-in visitors.

Test on mobile too. A floating button in the corner can sit on top of a sticky add-to-cart bar, so move it with the position option if it covers a control.

Why the checkout is not a place for the widget

Shopify renders checkout separately from your theme files, so theme code does not add scripts there. That is a reasonable boundary. Keep feedback forms on product, collection, blog and account pages, where shoppers are browsing and not paying.

If a customer wants to report a checkout problem, give them a link to a page you control, such as your contact or help page, where the widget is available.

When the button is missing on one template

The snippet in layout/theme.liquid loads on every page that uses that layout, which covers the storefront templates. Some pages use a different layout file, though. The password page is one example, so a store that is locked behind a password can show no button to testers who have not entered it.

If the button is missing on one page, look at the rest of the storefront first. Check a product page, a collection page and the homepage in a private window. If only one type of page is missing the button, look at that template's layout setting, and check whether the page uses a separate layout file before you add the snippet there.

Keep the snippet itself in one place. Pasting it into several layout files creates two copies of the script, and two copies can produce two buttons.

Reading store feedback in Escuta Produto

Each store feedback item lands in the inbox of its product, with the page URL and browser saved. A bug report with a product URL points you to the exact page and variant the shopper was on. Filter by type to separate bugs, ideas and praise, and by status to track what you have decided.

Internal notes keep the reasoning private, and a rating average gives you a rough sense of satisfaction over time. For Slack or Discord alerts, add a webhook in the product settings, and each new message posts its type, rating and a link to the dashboard.

Related

• Full options and the identify call are in the widget docs.
• If you prefer a link to a feedback page, see the hosted page docs.
• For a WordPress store or site, read Add a feedback widget to a WordPress site.
• To decide what to do with what arrives, read What is feedback triage?.