Skip to main content
Manually installing the Junip snippets
Stuart Arsenault avatar
Written by Stuart Arsenault
Updated over 2 months ago

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.

View of adding snippets from the Junip admin

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. Note: If you're working on a separate theme, use the dropdown next to your live theme name, select the desired theme, and then click "Add snippets".

{% render 'junip-store-key' %}

junip store key in Shopify, theme.liquid file


​

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 πŸŽ‰

Did this answer your question?