In this doc, we'll walk through how to add 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.
*Optional* Remove snippets from your 2.0 theme
If you've added the Junip snippets to your 2.0 theme via the "Add snippets" button in Junip admin, you'll want to remove them first before proceeding. Simply visit your Store settings and remove Junip from your 2.0 theme.
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:
Enable the Junip App Embed
To start, you'll want to visit your Store settings and click this 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.
Adding the Junip blocks to your theme
The next step is to visit your Shopify theme editor and add the Junip Product Summary Stars and the Product Reviews blocks to your theme.
Just like the first step, we've offered you a shortcut in your Store settings by clicking this button.
You'll be taken to a default product page where you can add the following blocks:
Adding the "Product Reviews section" block
You'll want to scroll down and click Add section, then let the options load before scrolling to the bottom to click 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
The process for adding summary stars is similar as the one above, but instead of clicking Add section, you'll want to click Add block under the "Product Information" section where your product's title, price, and other details are displayed.
After selecting Product Summary Stars, you'll want to drag them from the bottom of the section all the way to the top. 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://scripts.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 🎉
You'll see that preview mode will automatically shows you what these displays will look like using sample reviews, but to show them live on-site, make sure to Enable on-site experience in your On-site settings.
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.