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.

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.

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.