> For the complete documentation index, see [llms.txt](https://docs.okendo.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.okendo.io/on-site/on-site-widgets/questions-widget.md).

# Questions Widget

## Overview

{% hint style="info" %}
The [Reviews Widget](/on-site/on-site-widgets/reviews-widget.md) can be configured to show a Questions tab as part of a combined widget. This article describes how to include a standalone Questions Widget without reviews.
{% endhint %}

The Questions Widget lists questions that customers have asked and answers you've provided to them. 

<figure><img src="/files/acwKn9t6dVRoP2DGVHCW" alt=""><figcaption></figcaption></figure>

## Installation

{% tabs %}
{% tab title="Shopify Online Store 2.0" %}
Instructions for a Shopify Online Store 2.0 installation can be found [here](https://support.okendo.io/en/articles/5537298-installing-okendo-on-shopify-online-store-2-0).
{% endtab %}

{% tab title="Shopify Vintage Theme" %}

1. Create a new liquid snippet in the snippets folder with the following name: `snippets/okendo-reviews-widget.liquid`
2. Inside your newly created liquid file, add the following HTML snippet:

   ```tsx
   <div data-oke-questions-widget></div>
   ```
3. Customize your snippet with the data attributes listed [here](#questions-widget-data-attributes).
4. Copy the following snippet and place it in your Theme Code where you would like the widget to appear: `{% render 'okendo-reviews-widget', product: product %}`

For more detailed instructions, read our [help centre article](https://support.okendo.io/en/articles/1770332-setting-up-okendo-reviews-on-shopify-vintage-themes).
{% endtab %}
{% endtabs %}

## Styling

The preferred method of configuring the Questions Widget is via the Okendo Admin which can be accessed in the Okendo app via Reviews -> On-Site Displays:

<figure><img src="/files/0WflgytBkmWDhOcfaZgf" alt=""><figcaption></figcaption></figure>

## Data Attributes

Use these data attributes on the widget markup to customize its configuration. None of these attributes are required.

| Data Attribute                             | Description                                                                                                                                            | Value Type | Supported Values                                                                        |
| ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | --------------------------------------------------------------------------------------- |
| `data-oke-reviews-product-id`              | Used to specify a Shopify Product ID with the word `shopify-` in front of it. The star snippet will only show aggregate data for a particular product. | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |
| `data-oke-reviews-group-id`                | Used to specify an Okendo Group ID so that the reviews widget only shows reviews for the specified group of products.                                  | `string`   | Any valid product group ID in a GUID format e.g. `69d2e67d-b980-4333-97b7-30411807a7b1` |
| `data-oke-reviews-ask-question-product-id` | Used to show the “Ask a Question” in the reviews widget to leave a question for the specified product.                                                 | `string`   | Any valid product ID in the format `shopify-` e.g. `shopify-1234567`.                   |

## Examples

### **Giving The Widget A Data Source**

Without specifying a data source for the questions, the widget will show **all** questions for your store. You can provide either a Product ID or a Group ID to use that as the data source for the questions.

#### **Product Widget**

If you are using **liquid** use the following snippet:

```markup
<div data-oke-questions-widget data-oke-reviews-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```html
<div data-oke-questions-widget data-oke-reviews-product-id="shopify-<PRODUCT_ID>"></div>
```

#### **Group Widget**

Learn more about Okendo Groups here:

{% embed url="<https://support.okendo.io/en/articles/3086139-understanding-okendo-groups>" %}

If you are using **liquid or general frameworks** use the following snippet:

```html
<div data-oke-questions-widget data-oke-reviews-group-id="<GROUP_ID>"></div>
```

Group ID is found in the Okendo Admin URL for a given group as described in the table above.

### Specifying a Product To Ask About

When the widget is in all-reviews or grouped mode an explicit Product ID is needed to show the "Ask a Question" button.

If you are using **liquid** use the following snippet:

```html
<div data-oke-questions-widget data-oke-reviews-ask-question-product-id="shopify-{{ product.id }}"></div>
```

The general format for other frameworks is:

```
<div data-oke-questions-widget data-oke-reviews-ask-question-product-id="shopify-<PRODUCT_ID>"></div>
```