Builder — Product Q&A Install

The Product Q&A block answers shopper questions on a product page. This article explains how to install the block on your site, and how to control where it appears.

Prerequisites

You need an agent with the Product Q&A deployment type. Open the agent in the builder. Click Publish, then open the Product Q&A tab.

Product Q&A requires a separate agent from On-page, Owned web, or Sitewide widget. Its launcher and placement settings belong to the product-page block. The Sitewide widget corner launcher has separate Design controls and install instructions; see Publish & Deploy.

Choose your install method

The tab asks How do you want to install it? and offers three methods. Pick one. The tab then shows only the snippets and the settings that your method needs.

Method	Use it when
Shopify	Your store runs on Shopify.
Any website	You cannot edit your product page template.
Custom template	You can edit your product page template.

Method 1: Shopify

Shopify needs no code.

1. In your Shopify admin, go to Online Store → Themes → Customize.
2. Open a product page template.
3. Click Add block.
4. Choose the Product Q&A block.

The block reads the product from the page it sits on. You need no further setup.

If you built your theme by hand, open Using a custom theme? in the builder to copy the raw block markup.

Method 2: Any website

This method places the block next to an element that your product page already has.

1. Pick the Any website method.
2. Click Copy script.
3. Paste the script anywhere on your product page, or into your tag manager.
4. In the Where it appears field, enter a CSS selector that matches an element on your product page. The element around your product description is a good choice.
5. In the Position field, choose where the block goes relative to that element.

The script finds a product page on its own. It reads the product information that your site already publishes. It shows the block only on the pages where it finds a match.

The block needs the selector. If you leave the field empty, the builder warns you, and the block does not appear on your site.

Method 3: Custom template

This method places the block at an exact spot that you choose in your template.

1. Pick the Custom template method.
2. Click Copy script.
3. Paste the script anywhere on your product page.
4. Click Copy mount point.
5. Paste the mount point into your product page template, at the spot where the block belongs.
6. Replace the YOUR_PRODUCT_ID value with your platform's product-ID variable, so each page carries its own product.

This method needs no selector. The mount point already names the spot and the product.

The script names your organization

The scripts you copy for Any website and for Custom template carry a data-vwam-org attribute that names your organization. Always copy the snippet from the Product Q&A tab rather than retyping it or reusing an old one.

If your product pages still run an older snippet without that attribute, the block keeps working and you see no error. But page views are not captured, so no agent can personalize on what a shopper browsed. Recopy the script and replace the tag on your pages.

Check that your products can be found

The Any website method matches your products to your product pages by URL. The builder shows a notice for that method.

• A green notice means that most of your products have a URL on file, so the block can match pages automatically.
• A yellow notice means that many of your products have no URL. Switch to the Custom template method and set the data-vwam-product-ref attribute on your mount point, so the block still finds the right product.

Single-page sites

Some sites change the product shown without a page reload. These sites are single-page applications. On such a site the block does not update on its own. Ask your developer to call window.vwam.refresh() after each product change. The block then shows the new product.