This guide will walk you through adding Junip to your Online store 2.0 theme on Shopify. If you are on a traditional Shopify theme, check out this help doc on how to add Junip to your site.
To add Junip to a 2.0 theme, there are two main steps:
There are three different blocks that we'll cover adding to your theme, as follows:
1. Enable the Junip App Embed
To start, you'll want to visit your On-site section, and click "Enable app embed" button.
We'll take you to your active theme where you can confirm that the app embed is enabled, then click Save in the top right corner of the screen to update your theme. If you're working on a separate theme, use the dropdown next to your live theme name, select the desired theme, and click "Enable app embed".
2. Adding the Junip blocks to your theme
Adding the "Product Reviews section" block
We've provided a shortcut in the On-site section--simply click on "Install on product page" under the Product reviews box. This will take you to a default product page where you can drag the block to adjust its position, and click "Save" on the top right corner. Note: we dynamically display product specific reviews, so there's no need to manually select a product when adding the block.
Option to add it directly from your theme editor by clicking on Add section > Apps > Product Reviews Section.
You'll notice that I made a quick adjustment to show the section at full width, and then dragged the section higher on the page. Make sure to click Save in the top right to record your changes.
Adding the "Product Summary Stars" block
Same as above, there's a shortcut you can use in the On-site section. Click on "Install on product page" under the Star ratings box. This will take you to a default product page where you can drag the block to adjust its position, and click "Save" on the top right corner. Note: we dynamically display product specific reviews, so there's no need to manually select a product when adding the block.
If you want to add it from your theme editor, you'll want to click Add block under the "Product Information" section > select Product Summary Stars > adjust its position, and click "Save". We suggest placing these stars above or below the title. Make sure to click Save to register your changes.
Note: you've just made these changes to your "Default product" template, if you have other product templates setup in your theme, then you'll want to switch to those templates (by clicking the dropdown at the top of the page) and make the same changes.
Summary stars on collection pages
If your theme supports editing collection pages, we also recommend adding the summary stars under your product title in the grid. Some themes won't support adding Junip's stars here using blocks (like you did on the product pages). In these cases, they will need to be added manually using code. More on that below.
We've recorded a video that walks through the process to do this, you can also find detailed instructions and the code to use below.
Instructions:
Go to your theme code editor
Find the appropriate file name where the collection cards are pulling from (each theme will vary, but some common examples are product-grid.liquid, product-item.liquid, product-card.liquid, card-product.liquid, or product-thumbnail.liquid)
Copy the code provided below
Find the appropriate place to paste this code in the file. Normally, we're looking to paste it between the "product.title" and "product price" snippets. You can use Ctrl+F to search for these keywords when locating them
Paste this code and save your changes
Preview your site to see how it went - can you see the stars showing on collection pages now? You may need to adjust the exact position of the code
If no changes have been made, you may want to confirm that the liquid object is correct (see note in green below). Alternatively, you may also want to try a different file to paste this code
Here is the code to manually add to your collection files:
<script type="text/javascript" async="true" src="https://widgets.juniphq.com/v1/junip_shopify.js"></script>
<span class="junip-store-key" data-store-key="{{shop.metafields.junip.store_key}}"></span>
<span class="junip-product-summary" data-product-id="{{ product.id }}" data-product-rating-count="{{ product.metafields.junip.rating_count }}" data-product-rating-average="{{ product.metafields.junip.rating_average }}"> </span>
Important: if you are editing the correct collection file and the summary stars are not appearing when you insert the code above, your theme may be using a different liquid object to reference your product, ie. "card-product.title" instead of "product.title". Adding the "card-" to any mentions of the liquid object in the code provided (like we do in the video above) can resolve this issue.
Adding "Reviews page (storewide)" block
There's a block that can be added to different pages on your site, like your homepage or a dedicated reviews page.
To add this block to an existing page like a homepage: navigate to that page in your Theme Editor, scroll to the bottom of the left-hand menu and click Add section. Then select Reviews page (storewide). Make sure to click Save to register these changes.
You'll notice that when you click on the block, there will be a number of customization options that you can configure, like displaying product and/or store reviews, review summary, etc.
To add this block to a new page like a dedicated reviews page, go to your Shopify Admin > Online Store > Pages and then click Add Page.
Then you'll want to go back into your Theme Editor, navigate to the page that you just created, and add the Reviews page (storewide) block (like the step above).
That's it! You've now added Junip to your Online store 2.0 theme 🎉
When you're happy with your displays, you can enable them for everyone to see live on your website! At the top of the On-site section, you'll see a yellow banner saying 'Review displays are disabled.' Just click 'Enable', and your displays will be live on your site.
You can also visit the Branding section of the Junip admin to customize your colors and your On-site settings to customize the look and feel of your reviews widget.