Flawsnap
Free trial

Install Flawsnap on a Shopify store

Add the widget to your theme layout once, and shoppers or testers can circle a broken product page and send it with the console and network calls attached.

Steps

  1. 1

    Allow your store domains

    In Flawsnap, open the project’s Security settings and add your your-store.myshopify.com address and your custom domain (with and without www. if both load) under Allowed domains.

  2. 2

    Duplicate your theme

    In Shopify admin go to Online Store → Themes. On your live theme, open the actions menu and choose Duplicate, so you can test without touching the live store.

  3. 3

    Open the theme code

    On the duplicate, open the actions menu and choose Edit code. Under Layout, open theme.liquid.

  4. 4

    Paste the snippet before </head>

    Find the closing </head> tag and paste the Flawsnap snippet just above it. Save.

  5. 5

    Preview, then publish

    Preview the duplicate theme, send a test report, and publish the theme when you are happy with it.

Where the snippet goes in theme.liquid

layout/theme.liquid wraps every storefront page that uses your theme, so one tag covers the home page, collections, products, cart and account pages. Paste it just before </head>:

layout/theme.liquid
    {{ content_for_header }}
    <!-- Flawsnap bug reports -->
    <script src="https://backend.flawsnap.com/widget.js" data-key="pk_…" async></script>
  </head>

The code lives in one theme. If you switch to another theme or install a fresh copy of yours, add the tag again.

What Shopify pages it will not reach

Shopify's checkout is not rendered from theme.liquid, so the widget will not appear there. Reports cover the storefront up to the cart.

Do not paste the tag into Customer events as a custom pixel. Pixels run in a sandbox, away from your page, so the widget could not see or mark up the store.

Let testers report without showing the button to shoppers

Testing a new theme or a sale before it goes live is a good use of Flawsnap. Keep the snippet on the unpublished duplicate only, and share that theme's preview link with your testers. Shoppers on the live theme never see the button.

Once live, you can keep the widget for customers or hide it. The project setting Show on website (under Report a bug button) hides the button while the script stays loaded, so a "Report a problem" link in your footer can still call window.Flawsnap?.open().

Prefill logged-in customers and tag the page type

Liquid knows when a customer is signed in. Set window.FlawsnapConfig before the widget script so their name and email are filled in, and attach the template name so you can tell a product page report from a cart report at a glance.

layout/theme.liquid (above the Flawsnap snippet)
<script>
  window.FlawsnapConfig = {
    metadata: { template: {{ template.name | json }} },
    {% if customer %}
    reporter: { name: {{ customer.name | json }}, email: {{ customer.email | json }} },
    {% endif %}
  };
</script>

The json filter quotes and escapes the values, so a name with an apostrophe cannot break the script.

Checking it and fixing common problems

  • In Flawsnap, the project page shows Widget detected with the store address once the widget has loaded on an allowed domain.
  • Console says [flawsnap] widget disabled:: the host in the address bar is not on Allowed domains. Shared theme preview links open on a …shopifypreview.com address, so add that exact host (and your myshopify.com address) while testing.
  • Nothing in the page source: you edited a different theme from the one you are previewing. Check the theme name in the editor.
  • The button overlaps your chat or cart drawer: set the position to left with data-position="left", or change it for everyone in the project settings.
  • A report from a sale shows failed calls in the network tab: Flawsnap records method, URL, status and timing, never request or response bodies, so payment details are not captured.

Questions

Do I need a Shopify app to use Flawsnap?
No. There is no app to install from the Shopify App Store. It is a script tag in your theme's layout file.
Will the widget slow down my store?
The tag uses async, so the browser keeps building the page while it downloads. The button appears once the project settings have loaded.
Can shoppers report bugs without an account?
Yes. Anyone on an allowed domain can send a report. The form has optional name and email fields, which you can prefill for logged-in customers.

Try it on your own site

7-day free trial, then $9 a month for Starter or $19 for Pro, per organization, with unlimited team members.

Start free trial Try the live demo

Related

Updated