If you run a headless Shopify store, have a complex theme, or want to display reviews on a non-product page, you might need to install Junip using HTML. These steps assume you have already signed up for Junip and linked it to your Shopify store.
Instructions to:
How to install Junip using HTML
The following will help you add summary stars on your collection/shop pages and review displays on your product pages.
1. Add the Junip script to your site
<script type="text/javascript" async="true" src="https://scripts.juniphq.com/v1/junip_shopify.js"></script>
This script tag should be loaded on any page where Junip content is to appear.
2. Add the Junip store key element
<span class="junip-store-key" data-store-key="ENTER YOUR STORE KEY"></span>
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.
3. Add product summary stars
<span class="junip-product-summary" data-product-id="ENTER THE ID OF THE PRODUCT"></span>
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.
Be sure to fill in the appropriate Shopify product ID of the product you wish to show a summary for.
Example of Summary stars on the shop/collection page:
Example of Summary stars on the product page:
4. Add product reviews
<span class="junip-product-review" data-product-id="ENTER THE ID OF THE PRODUCT"></span>
Product reviews are generally placed after information on the product page. Fill in the appropriate Shopify product ID for the product you wish to show reviews for.
5. Preview your implementation with sample data
After you've added the appropriate tags above, you can preview your implementation with sample data by simply adding ?junip-preview-mode=true to your URL and reloading the page.
That's it! You have now installed Junip via custom HTML 🎉
Add review displays to non-product pages
If you wish to display reviews outside of the product page you can do so by manually adding the Junip review section HTML.
Note: Before you add the HTML code below you'll need to make sure the Junip script tag and store key are on your site. Check out steps 1 & 2 of the install Junip using HTML section.
The code:
<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>
Be sure to fill out the proper values for each data attribute (setting) to ensure the section is looking the way you intended!
Section setting customizations:
Setting Name | Values |
data-layout
| list or grid |
data-reviews
| product_reviews, store_reviews or all |
data-show-summary
| true or false |
data-reviews-count
| any number between 3-20 |