Junip offers additional widgets to help display your reviews. In this article, we'll walk through how to add Junip's review carousel to your storefront.
Examples:
This is an example of how Honey Swim uses the Junip Review Carousel widget on their homepage to display their product reviews.
This is an example of how Social Threads uses the Junip Review Carousel widget on their homepage to display their store reviews. For more examples, checkout our blog article here.
Using your theme customizer
You can simply add the Homepage Reviews Carousel App block to your Shopify store directly in your theme customizer.
We offer a shortcut for this installation method in your On-site section > scroll down to "Carousel" and click on "Install on home page". This will add the block on your homepage, where you can drag the block to adjust its position, and click "Save" on the top right corner.
Adding the Homepage Reviews Carousel app block:
After adding the block, you can personalize it to your preference by clicking on it.
Customization options:
Type of reviews, Product or Store reviews
Option to select a specific product to display reviews for
Enable "Show review summary" (title, rating average and reviews total)
Edit the Title (Note: the title will show only if the review summary is enabled).
Add Padding (space)
Using custom code
The widget can also be added to your Shopify store by inserting the HTML code below into your Shopify theme code. Just ensure you have the Junip script on the page along with your store key (steps 1 & 2 of this article).
We've got you covered with a shortcut for the carousel code as well. Just head over to your On-site section > select "Install with HTML" tab > and scroll down to "Carousel". Feel free to configure the available options within Junip, and then just copy the code when you're ready.
HTML sample code:
<div
class="junip-review-carousel"
data-title="See Why Customers Love Us"
data-reviews-type="product_reviews"
data-product-id=""
data-show-summary="true"
style="padding-top: 16px; padding-bottom: 16px;"
>
</div>
Customization Options:
Setting name | Values |
data-title | Optional; any text. Note this will only show if show summary is true. |
data-reviews-type | product_reviews or store_reviews |
data-product-id | Option to display reviews for a specific product by selecting a product or adding its Shopify product id within "". |
data-show-summary | true or false |