# Inspiration

### Create a Reviews Page With a Product/Group Review Switcher

This recipe will guide you through setting up a dedicated page which can switch between showing reviews for different products or groups.

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

1\. Navigate to the store's theme: Sales Channels -> Online Store -> Themes and press the menu item with the three vertical dots. Press "Edit Code" from the menu which appears:![](/files/EoWrbpbZUtnixAeW6893)

2\. Create a new file in the `page` folder of your theme called `page.okendo-reviews-switcher` (This will be the template name for your dedicated reviews page template).

3\. Copy/paste the markup below:

```
<style type="text/css">
.reviews-page-wrapper {
  padding-top: 2em;
}

.orc-allReviewsCollections .orc-collectionControlsLabel {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.orc-allReviewsCollections .orc-collectionControls {
    -ms-flex-align: stretch;
    align-items: stretch;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: -3px -9px
}

.orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
    -ms-flex-align: center;
    align-items: center;
    border: 1px solid #c2c2c2;
    border-radius: 4px;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 0;
    padding: 8px 16px;
    text-align: center
}

.orc-allReviewsCollections .orc-collectionControls-item-input--checked+.orc-collectionControls-item-label,.orc-allReviewsCollections .orc-collectionControls-item-input:checked+.orc-collectionControls-item-label {
    border: 1px solid #535565;
    box-shadow: 0 0 0 1px #535565
}

.orc-allReviewsCollections .orc-collectionControls-item {
    box-sizing: border-box;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    padding: 3px 9px
}

.orc-allReviewsCollections .orc-collectionControls-item-label-heading {
    display: block;
    -ms-flex-preferred-size: 66.66%;
    flex-basis: 66.66%;
    font-size: 18px;
    font-weight: 400;
    text-align: left
}

.orc-allReviewsCollections .orc-collectionControls-item-input {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px
}

.orc-allReviewsCollections .orc-collectionControls-item-label-background {
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    -ms-flex-preferred-size: 33.33%;
    flex-basis: 33.33%;
    height: 50px;
    margin: 0
}

@media only screen and (min-width: 800px) {
    .orc-allReviewsCollections .orc-collectionControls {
        margin:-9px
    }

    .orc-allReviewsCollections .orc-collectionControls-item {
        -ms-flex: 1 1 50%;
        flex: 1 1 50%;
        padding: 9px
    }

    .orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
        -ms-flex-align: stretch;
        align-items: stretch;
        -ms-flex-direction: column;
        flex-direction: column;
        height: auto;
        padding: 16px
    }

    .orc-allReviewsCollections .orc-collectionControls-item-label-heading {
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        margin-bottom: 16px;
        text-align: center
    }

    .orc-allReviewsCollections .orc-collectionControls-item-label-background {
        background-position: 50%;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
        height: 150px;
        margin-top: auto;
        width: auto
    }
}

@media only screen and (min-width: 1200px) {
    .orc-allReviewsCollections .orc-collectionControls-item {
        -ms-flex:1 1 25%;
        flex: 1 1 25%
    }
}

@media all and (min-width: 1200px) {
    .orc-allReviewsCollections .orc-collectionControls-item {
        -ms-flex: 1 1 25%;
        flex: 1 1 15%;
    }

    .orc-allReviewsCollections .orc-collectionControls-item-label-heading {
        font-size: 16px;
    }
}

.orc-allReviewsCollections .orc-collectionControls .orc-collectionControls-item-label {
    border: 0;
}

#orc-collection-control {
  margin-bottom: 4em;
}
</style>
<div class="reviews-page-wrapper">
  <div class="orc-allReviewsCollections">
      <div id="orc-collection-control" style="display: none">
          <div id="orc-collection-controls-label" class="orc-collectionControlsLabel">Select a product range</div>
          <div class="orc-collectionControls" role="radiogroup" aria-labelledby="orc-collection-controls-label">
              <div class="orc-collectionControls-item">
                  <input
                      id="orc-reviews-control-0"
                      class="orc-collectionControls-item-input orc-collectionControls-item-input--checked js-orc-collectionRadio"
                      type="radio"
                      checked
                      value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
                      name="orc-reviews-collection-control"
                  />
                  <label for="orc-reviews-control-0" class="orc-collectionControls-item-label">
                      <span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
														***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
                      <span
                          class="orc-collectionControls-item-label-background"
                          style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
                      ></span>
                  </label>
              </div>
              <div class="orc-collectionControls-item">
                  <input
                      id="orc-reviews-control-1"
                      class="orc-collectionControls-item-input js-orc-collectionRadio"
                      type="radio"
                      value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
                      name="orc-reviews-collection-control"
                  />
                  <label for="orc-reviews-control-1" class="orc-collectionControls-item-label">
                      <span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
													***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
                      <span
                          class="orc-collectionControls-item-label-background"
                          style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
                      ></span>
                  </label>
              </div>
              <!-- Add More orc-collectionControls-item elements if you want to switch between more items -->
          </div>
      </div>
      **<!-- SET THE data-oke-reviews-product-id attribute to shopify-<YOUR PRODUCT ID> OR data-oke-reivews-group-id to the GUID you wish to default the widget to when the page loads (usually the first radio value in the list above -->**
      <div id="orc-widget-snippet" class="drp-okendo-reviews" data-oke-widget data-oke-reviews-group-id="<**YOUR DEFAULT GROUP ID GOES HERE>**"></div>
  </div>
  <script type="text/javascript">
  ((document, window) => {
    const okeRenderedHandler = function(e) {
        if (e.detail.widget === 'reviews-widget') {
         setupCollectionControls();
       }
    }
  
    document.addEventListener('oke-rendered', okeRenderedHandler);
  
    if (!String.prototype.startsWith) {
        Object.defineProperty(String.prototype, 'startsWith', {
            value: function(search, rawPos) {
                var pos = rawPos > 0 ? rawPos|0 : 0;
                return this.substring(pos, pos + search.length) === search;
            }
        });
    }
  
    function setupCollectionControls() {
        const snippetEl = document.querySelector('#orc-widget-snippet');
        const controlEl = document.querySelector('#orc-collection-control');
        const collectionRadioElements = Array.prototype.slice.call(document.querySelectorAll('.js-orc-collectionRadio'));
        controlEl.style.display = 'block';
        collectionRadioElements.forEach(function (radioElement) {
            radioElement.addEventListener('change', function () {
            if (radioElement.value) {
              if(radioElement.value.toLowerCase().startsWith('shopify-')) {
                snippetEl.removeAttribute('data-oke-reviews-group-id');
                window.okeWidgetApi.setProduct(snippetEl, radioElement.value);
              }
              else {
                snippetEl.removeAttribute('data-oke-reviews-product-id');
                window.okeWidgetApi.setGroup(snippetEl, radioElement.value);
              }
            } else {
              snippetEl.removeAttribute('data-oke-reviews-group-id');
              snippetEl.removeAttribute('data-oke-reviews-product-id');
              snippetEl.innerHTML = '';
              window.okeWidgetApi.initWidget(snippetEl, true);
            }

            collectionRadioElements.forEach(function (element) {
                element.classList.remove('orc-collectionControls-item-input--checked');
            });
            radioElement.classList.add('orc-collectionControls-item-input--checked');
          });
        });
  
      document.removeEventListener('oke-rendered', okeRenderedHandler);
    }
  })(document, window);
  </script>
```

4\. Modify the product/group IDs in the markup. For each group or product you wish to filter the reviews down by you will create a new `orc-collectionControls-item`. The value of the radio button will be either the Group ID (a group ID is in the form of a GUID) or the Product ID (a product ID is in the format `shopify-<YOUR PRODUCT ID>`:

```html
<div class="reviews-page-wrapper">
  <div class="orc-allReviewsCollections">
      <div id="orc-collection-control" style="display: none">
          <div id="orc-collection-controls-label" class="orc-collectionControlsLabel">Select a product range</div>
          <div class="orc-collectionControls" role="radiogroup" aria-labelledby="orc-collection-controls-label">
              <div class="orc-collectionControls-item">
                  <input
                      id="orc-reviews-control-0"
                      class="orc-collectionControls-item-input orc-collectionControls-item-input--checked js-orc-collectionRadio"
                      type="radio"
                      checked
                      value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
                      name="orc-reviews-collection-control"
                  />
                  <label for="orc-reviews-control-0" class="orc-collectionControls-item-label">
                      <span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
														***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
                      <span
                          class="orc-collectionControls-item-label-background"
                          style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
                      ></span>
                  </label>
              </div>
              <div class="orc-collectionControls-item">
                  <input
                      id="orc-reviews-control-1"
                      class="orc-collectionControls-item-input js-orc-collectionRadio"
                      type="radio"
                      value="<YOUR GROUP ID OR PRODUCT ID GOES HERE>"
                      name="orc-reviews-collection-control"
                  />
                  <label for="orc-reviews-control-1" class="orc-collectionControls-item-label">
                      <span class="orc-collectionControls-item-label-heading"> **<!-- YOUR GROUP NAME OR PRODUCT NAME GOES HERE .e.g Rings -->** </span>
													***<!-- OPTIONAL ADD AN IMAGE FOR THE GROUP/PRODUCT - IF NOT NEEDED, DELETE THE SPAN TAG BELOW -->***
                      <span
                          class="orc-collectionControls-item-label-background"
                          style="background-image: url('{{ 'ADD AN ASSET IMAGE URL.jpg' | asset_img_url: '150x' }}')"
                      ></span>
                  </label>
              </div>
              <!-- Add More orc-collectionControls-item elements if you want to switch between more items -->
          </div>
      </div>
      **<!-- SET THE data-oke-reviews-product-id attribute to shopify-<YOUR PRODUCT ID> OR data-oke-reivews-group-id to the GUID you wish to default the widget to when the page loads (usually the first radio value in the list above -->**
      <div id="orc-widget-snippet" class="drp-okendo-reviews" data-oke-widget data-oke-reviews-group-id="<**YOUR DEFAULT GROUP ID GOES HERE>**"></div>
  </div>
```

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

5\. Save the page template and exit the theme code editor.

6\. Navigate to Online Store -> Pages and assign the page template to a given page in the Shopify: Admin:

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

7\. View the page and confirm the switching is correct:

<figure><img src="/files/6N6Mgm6VzoGC6e5QzOjV" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.okendo.io/on-site/storefront-javascript-api/inspiration.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.