Shopify5 min read

Add Product Overviews to Shopify

No app install, no monthly Shopify fee — just a small code snippet added to your product template. Once it's in, every published product gets a smart, on-brand widget automatically.

Before you start

✓A Product Overviews account with at least one published SKU
✓Shopify admin access (you'll need to edit theme code)
✓Your Shopify products must have SKU codes set — the widget uses them to identify which product to show

Publish your product in the Studio

In the Product Overviews Studio, find the product you want to enable, generate its reasoning, and click Publish. The SKU code you used when importing the product is what connects the Studio to your Shopify listing.

To make sure the SKU matches, go to your Shopify product → Inventory and check the SKU field. It must be identical to what's in the Studio.

Get your embed snippet from the Studio

Open the Studio, find your product, and click Export / Embed. Switch to the Shopify tab and copy the snippet. It looks like this:

{% comment %}Product Overviews Widget{% endcomment %}
<script>
  window.__PO_PRODUCT__ = {
    product_key: "{{ product.selected_or_first_available_variant.sku | strip }}"
  };
</script>
<div id="po-widget"></div>
<script
  src="https://api.productoverviews.com/widget/v1.js?v=product-reasoning-1"
  data-brand-id="your-workspace-id"
  data-api-base="https://api.productoverviews.com"
  data-mount="po-widget">
</script>

The Studio pre-fills data-brand-id for you. The Liquid variable {{ product.selected_or_first_available_variant.sku | strip }} automatically reads the SKU of whichever variant is selected — so one snippet covers every variant on the page.

Open your theme code in Shopify

1Log in to your Shopify admin and go to Online Store → Themes.
2Next to your active theme, click ⋯ Actions → Edit code.
3In the left sidebar, open the Sections folder and click main-product.liquid. (The exact file name may differ slightly depending on your theme — look for the file that renders your product page.)

Not sure which file to edit? Search for add_to_cart or product-form in the code editor — the product description section is usually nearby.

Paste the snippet into your product template

Find a good spot in main-product.liquid — typically right after the product description block or just above the add-to-cart form. Paste the full snippet there and click Save.

<!-- Paste this after your product description -->
{% comment %}Product Overviews Widget{% endcomment %}
<script>
  window.__PO_PRODUCT__ = {
    product_key: "{{ product.selected_or_first_available_variant.sku | strip }}"
  };
</script>
<div id="po-widget"></div>
<script
  src="https://api.productoverviews.com/widget/v1.js?v=product-reasoning-1"
  data-brand-id="your-workspace-id"
  data-api-base="https://api.productoverviews.com"
  data-mount="po-widget">
</script>

Save the file. Shopify will update your live theme immediately — no deploy or publish step required.

Verify on your storefront

Open any product page that has a published SKU in the Studio. You should see the Product Overviews widget appear with your product's name and suggested questions.

If the widget doesn't appear, here's what to check:

→SKU mismatch — Go to your Shopify product → Inventory and confirm the SKU exactly matches the one in the Studio (casing matters).
→SKU field is empty — The Liquid variable outputs an empty string if no SKU is set. Add a SKU to the variant in Shopify and publish it in the Studio.
→Product not published — The widget hides itself silently for unpublished products. Check the Studio and confirm it shows as Published.
→Wrong brand ID — Open the snippet you pasted and confirm data-brand-id matches your workspace ID from the Studio.

Common questions

Does this work with variant switching?

Yes. The Liquid variable always reads the currently selected variant's SKU, so when a shopper switches colour or size, the widget updates to reflect the correct product — as long as each variant has its own published SKU in the Studio.

Will the widget slow down my page?

The script loads asynchronously and does not block rendering. It only activates once it finds the mount element, so it has no effect on your Core Web Vitals.

Do I need to add the snippet to every product?

No — that's the beauty of editing the template. One snippet in main-product.liquid covers every product page automatically. The widget simply stays invisible on pages where no matching published SKU is found.

Can I use this with a custom Shopify theme?

Yes. The snippet is plain HTML and JavaScript with a Liquid variable — it works in any Shopify theme as long as the product object is available in the template, which it always is on a product page.

← Custom website guide Back to Support