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 the collection view, we also recommend adding the summary stars under your product titles in your grids.
Some 2.0 themes won't allow you to add Junip's stars to collection pages in your Theme Editor. In this case, you might be able to enable the theme's review stars to show on these pages. If you want to add Junip's stars instead, you can do so manually by adding the following code 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>
Collection file names will differ by theme, but they usually look something like product-grid.liquid, product-item.liquid, product-card.liquid, or product-thumbnail.liquid. Normally these code snippets will go between the product title and product price.
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.