In this doc we will walk through manually installing Junip on your Shopify store. Normally Junip's automatic installation is sufficient but if you have a complicated theme or wish to do some further customization a manual installation is what you will be looking for.
If you are running a headless store or a site that doesn't use liquid check out this doc on how to install Junip via HTML.
1. Add the Junip JavaScript
To start off we need to make sure the Junip JavaScript file is added to your site.
Go to your Junip Admin > On-site > under the 'Install with snippets' tab, click Add snippets.
This method will load the Junip javascript the traditional way, using Shopify's script injector. Double check if the Junip store key snippet has been added to your main theme.liquid, if it's not there add it.
{% render 'junip-store-key' %}
2. Add product reviews
To display product reviews at the bottom of your product page, you want to add the code below to your product page file. Our product page file is called main-product.liquid and the code was added right at the bottom, after the main product section.
{% render 'junip-product-review', product: product %}
3. Add product summary stars
Product summary stars add a summary of the overall rating of a product. We recommend adding the code under product titles on individual product pages and collection/shop page.
{% render 'junip-product-summary', product: product %}
For our theme we added this snippet under the product title in main-product.liquid and card-product.liquid (for collection/shop page). Other names we've seen for these files are product-template.liquid, product-card-grid.liquid, and product-card-list.liquid.
Example of Summary stars on the product page:
Example of Summary stars on the shop/collection page:
4. Preview your implementation with sample data
You can preview your implementation with sample data by simply adding ?junip-preview-mode=true&junip-break-cache=true to your URL and reloading the page.
That's it! You have now installed Junip 🎉