---
title: "Displaying a Separate Q&A Widget"
slug: "displaying-a-separate-qa-widget"
tags: ["Reviews ", "Shopify Plus", "Shopify", "Adobe Commerce (Magento)", "BigCommerce", "WooCommerce", "Volusion", "Salesforce Commerce Cloud", "Custom"]
updated: 2024-04-02T05:23:57Z
published: 2024-04-02T05:23:57Z
canonical: "support.yotpo.com/displaying-a-separate-qa-widget"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://support.yotpo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Displaying a Separate Q&A Widget (Legacy)

Products

			
				
					
						  

					
					Reviews
		
			

				

###### Supported plans

				

Pro, Premium, Enterprise

			
			

				

###### eCommerce Platform

				

Shopify, Shopify Plus, Adobe Commerce (Magento), BigCommerce, WooCommerce, Volusion, Salesforce Commerce Cloud, Custom

			

This feature allows you to use the Q&A section separately from the [Reviews Widget](/v1/docs/adding-the-reviews-widget). By default, the two appear together, however you may want to have individual tabs or only the Q&A widget without the Reviews widget.

	
	Is this article for me?
	If you're using the new version of the Q&A Widget, see [Customizing the Q&A Widget](/v1/docs/customizing-the-qa-widget-30)

	
	Please note:
	The look and feel of the Q&A dedicated widget is controlled by the Reviews Widget, even if you do not use the Reviews Widget.

## Displaying the Q&A widget separately

1. From your Yotpo Reviews main menu, go to [**On-Site Widgets**](https://reviews.yotpo.com/#/display-reviews/on-site-widgets).
2. Click **Q&A.**
3. Check the **I’d like to have a separated Q&A widget** checkbox.
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/9390abf7-88dc-48af-8a60-b3bc83db619e.png?sv=2026-02-06&spr=https&st=2026-11-09T09%3A19%3A04Z&se=2026-11-09T10%3A19%3A04Z&sr=c&sp=r&sig=YA5RPhHSR%2BIr5R22RSE%2BifPVwr96jD%2BDQOCXr8Iqlq0%3D)
4. Click **Generate Code.**
5. **Copy** the code snippet.
6. Paste the code in the desired place in your store.
7. Make sure to **save the changes.**

	
	Please note:
	Replace the values in the code snippet with the appropriate values for your website and products.The data-product-id attribute only supports alphanumeric (a...z, A...Z, 0...9) and "_" and "-" symbols

## BigCommerce instructions

1. Log into your BigCommerce admin.
2. Click **Script Manager.**
		  
![](https://cdn.document360.io/f3c2ab59-fe4c-4f93-9614-2872f40e8aa7/Images/Documentation/b9a75bca-b581-44e6-bf18-e228386bddc9.png?sv=2026-02-06&spr=https&st=2026-11-09T09%3A19%3A04Z&se=2026-11-09T10%3A19%3A04Z&sr=c&sp=r&sig=YA5RPhHSR%2BIr5R22RSE%2BifPVwr96jD%2BDQOCXr8Iqlq0%3D)
3. Click **Create a Script**.
4. Choose the following options:
  - Location on Page - **Footer**
  - Select pages where script will be added - **All pages** (recommended)
  - Script Category - **Essential** (recommended)
  - Script Type - **Script**
5. Paste the following code in the open script fields:
		
			JavaScriptJavaScript
			 
		
			

```javascript
<script type="text/javascript">//<![CDATA[
             var div = document.createElement("div");
             div.setAttribute('class', 'yotpo yotpo-main-widget');
             div.setAttribute('data-product-id',"{{product.id}}");
             div.setAttribute('data-name',"{{product.title}}");
             div.setAttribute('data-url', document.URL);
             div.setAttribute('data-description',"");
             div.setAttribute('data-image-url', "{{getImage product.main_image 'product'}}");
             div.setAttribute('data-mode', "questions");
             document.querySelectorAll('.productView')[0].appendChild(div)
             //]]>
             </script>
```
6. Click **Save.** Your customers will now see a dedicated widget for questions and answers.

## Volusion instructions

1. Copy the code snippet and paste it in your **product pages.**
2. Click **Save Changes** at the bottom of the screen.

## Generic platform instructions

1. Copy the code snippet and paste it in your **product pages.**
2. Click **Save Changes** at the bottom of the screen.

## Related

- [Q&A Widget Overview (Legacy)](/qa-widget-overview-legacy.md)
- [Adding the Q&A Widget to Shopify](/adding-the-qa-widget-to-shopify.md)