Installing Junip via HTML is a good option if you run a headless store, have a complex theme, or want to display reviews outside the product page (ex. on a custom landing page built with a page builder app).
First steps:
Add the Junip script to your site
This script tag should be loaded on any page where Junip content is to appear.
<script type="text/javascript" async="true" src="https://scripts.juniphq.com/v1/junip_shopify.js"></script>
Add the Junip store key element
The store key element helps Junip retrieve your store configuration. As with the script tag above this element should appear on any page where you want Junip content to appear.
To retrieve your store key go to your store settings in the Junip admin.
Copy and paste the code below and insert your Junip store key where it says "ENTER YOUR STORE KEY"
<span class="junip-store-key" data-store-key="ENTER YOUR STORE KEY"></span>
Add Star Ratings
Product summary stars add a summary of the overall rating of a product. We recommend showing these stars under product titles on the collection/shop page and on the individual product pages.
Example of Summary stars on the shop/collection page:
Example of Summary stars on the product page:
To install this widget with HTML:
Get the Shopify Product ID of the appropriate product you wish to display the average rating for. You can find this on it's Product detail page located in the Products section of Junip.
Copy the following code and paste it where you want the selected product’s average rating to display. Be sure to replace "ENTER PRODUCT ID" with the appropriate product's ID.
<span class="junip-product-summary" data-product-id="ENTER PRODUCT ID"></span>
To see if the installation was successful, preview your implementation with sample data by simply adding
?junip-preview-mode=trueto your URL and reloading the page.
Add Product Review Section
The product review section displays all reviews for a given product and includes a summary of the overall rating at the top. Product reviews are generally at the bottom of the product page below the product information.
Example of a product review section:
To install this widget with HTML:
Get the Shopify Product ID of the appropriate product you wish to display the review section for. You can find this on it's Product detail page located in the Products section of Junip.
Copy the following code and paste it where you want the selected product’s reviews to display. Be sure to replace "ENTER PRODUCT ID" with the appropriate product's ID.
<span class="junip-product-review" data-product-id="ENTER PRODUCT ID"></span>
To see if the installation was successful, preview your implementation with sample data by simply adding
?junip-preview-mode=trueto your URL and reloading the page.
Add review displays to non-product pages
If you wish to display reviews outside of the product page (ex. homepage, dedicated reviews page, landing page, page built with a custom page builder app), you can do so by manually adding the Junip review section HTML.
Example of the review widget on a homepage:
To install this widget with HTML:
Insert the following code wherever you want the review display to be present:
<span class="junip-review-section" data-layout="list" data-reviews-type="all" data-show-summary="true" data-reviews-count="10"> <span class="junip-review-section-wrapper"></span> </span>
Section setting customizations:
You can customize certain elements of the display by adjusting the following attributes and updating the code:
Setting Name | Description | Values |
data-layout | controls the layout and how the reviews will be displayed | list or grid |
data-reviews | controls which type of reviews to display | product_reviews, store_reviews or all |
data-show-summary | controls whether the summary is visible | true or false |
data-reviews-counts
| controls the number of reviews to display | any number between 3-20 |