Integrating Loox with Shogun

Loox allows you to display Loox widgets on product pages created through your Shogun page-builder app.

This is done by inserting an HTML element and placing the relevant Loox code in that element.

In this article, we'll go over the steps required to display the Loox reviews widget or star ratings on your Shogun product pages.

IN THIS ARTICLE


Adding an HTML Element in Shogun

In order to add an HTML element to your Shogun product pages, follow these steps:

  1. Add an HTML element and drag-and-drop it where you want to display the Loox widget:
  2. Double-click the HTML element to open the HTML text box:

Displaying the Star Ratings

To integrate a product's star  ratings  widget, follow these steps:

  1. Copy the following code:
  2. <a href="#looxReviews">
    <div class="loox-rating" data-id="XXXXXXXXXX" data-fetch></div>
    </a><br>
    	
  3. Replace the XXXXXXXXXX with the relevant product ID (here's how to find it).
  4. Save and publish your page. The star ratings will be displayed on the live page you've placed them in:


Displaying the Reviews Widget

To integrate a product's reviews widget, follow these steps:

  1. Copy the following code:
  2. <div id="looxReviews" data-product-id="XXXXXXXXXX"></div><br>
    	
  3. Replace the  XXXXXXXXXX with the ID of the product that you'd like to display reviews for (Here's how to find it).
  4. Save and publish your page. The reviews widget will be displayed on the live page you've placed it in:

Note: To integrate a widget that displays all your store's reviews use the code below:
<div id="looxReviews" data-loox-aggregate></div>

To integrate the Loox carousel widget, follow these steps:

  1. Copy the following code:
  2. <div id="looxCarousel" data-show-more="true"></div>
    	
  3. Save and publish your page. The widget will be displayed on the live page you've placed it in:

If you wish to integrate any of the Loox widgets to non-product Shogun pages, you will need to add the following code before any of the above codes:

<script async src="//loox.io/widget/loox.js?shop=STORE.myshopify.com"></script>

Replace STORE.myshopify.com with your .myshopify store URL. 

If you need any assistance implementing Loox widgets on your Shogun pages, contact our support team and we'd be more than happy to help!