If you run a headless Shopify store or have a complex theme 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.
Note: the following will help you add summary stars and a review display to your product pages. If you're looking to add a general review section (for a homepage or dedicated reviews page), you'll want to check out this guide.
1. Add the Junip script to your site
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.
Summary stars on the shop/collection page
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 🎉