How to Install Reviews for Shopify

1

 Uninstall Existing Reviews Widget

If you are using Shopify's native reviews platform, remove the reviews blocks from your Shopify theme. See Shopify's guide for more information.

If you are using another reviews platform, follow the instructions provided by your platform to uninstall. Check out the uninstallation guides for common reviews platforms here:

• Yotpo
• Stamped
• Loox
• Judge.me*
• Okendo*

*Uninstall the widgets from the locations noted in the installation guide

2

 Install the Reviews Widget Script

The product review widget script connects your Shopify store to your Sendlane account.

Copy the Reviews Widget Script

1. Login to Sendlane
2. Click the Reviews icon
3. Click Product Review
4. Click Get Widget Code
5. Under Widget Script, click Copy Code

Paste the Reviews Widget Script

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click the three dot menu
5. Click Edit code
6. Search for the theme.liquid file
7. Click into the file
8. Press CTRL + F or Command + F
9. Type ul hidden
10. Paste the product review widget script just after the <ul hidden> tag
11. Click Save

3

 Install the Main Reviews Widget

The main review widget element tells your Shopify store where to display product reviews on your product pages.

Copy the Main Review Widget Code

1. Login to Sendlane
2. Click the Reviews icon
3. Click Product Review
4. Click Get Widget Code
5. Under Widget Element, click Copy Code

Place the Main Reviews Widget in Your Product Pages

The easiest way to place the Reviews widget in your product pages is to customize your theme with a custom.liquid block. This method allows you to use the visual theme editor so you can see where your widget is being placed.

🚨 Your Shopify theme may not support custom.liquid blocks.

Shopify advises that some custom Shopify themes do not support custom.liquid blocks. If your theme does not support custom.liquid blocks, skip to Place the Reviews Widget using Your Theme's Files below.

Place the Main Reviews Widget Using a custom.liquid block

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click Customize
5. From the dropdown at the top center of the screen, select Products
6. Click Default product, or the custom template you use as your default product page
7. Click Add section wherever you'd like the Reviews widget to appear (this widget is often installed directly under the product name)
8. Select Custom Liquid
9. Paste the Reviews widget code in the Custom Liquid field
10. Click Save

Place the Main Reviews Widget Using Your Theme's Files

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click the three dot menu
5. Click Edit code
6. Search for the main-product.liquid file (if you don’t see a main-product.liquid file, search for product.liquid)
7. Click into the file
8. Paste the product review widget element code in your theme's product file
   1. A common installation location is right above the { % schema % } tag, but because every Shopify theme is different, placement will require experimentation.
9. Use the View icon to preview your widget's location
10. Click Save

To check that the review script and widget were installed correctly, click Preview Store, then click on a product and scroll down.

If you’ve imported reviews, you should see any existing reviews for the product you clicked on.

If you have not imported reviews, you should see a section to write the first review for the product you clicked on.

4

 Install the Star Widget

The star widget displays a product’s average star rating on individual product pages and on product collection pages.

The easiest way to place the star widget in your product pages is to customize your theme with a custom.liquid block. This method allows you to use the visual theme editor so you can see where your widget is being placed.

🚨 Your Shopify theme may not support custom.liquid blocks.

Shopify advises that some custom Shopify themes do not support custom.liquid blocks. If your theme does not support custom.liquid blocks, skip to Place the Star Widget using Your Theme's Files below.

Copy the Star Widget Code

1. Login to Sendlane
2. Click the Reviews icon
3. Click Product Review
4. Click Product Review
5. Click Get Widget Code
6. Click the Show mini-mode checkbox
7. Under Widget Element, click Copy Code

Place the Star Widget on Product Pages

The easiest way to place the star widget on your product pages is to customize your theme with a custom.liquid block. This method allows you to use the visual theme editor so you can see where your widget is being placed.  If your theme does not support custom.liquid blocks, skip to Place the Star Widget using Your Theme's Files below.

Place the Star Widget on Product Pages Using a custom.liquid block

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click Customize
5. From the dropdown at the top center of the screen, select Products
6. Click Default product, or the custom template you use as your default product page
7. Click Add section wherever you'd like the star widget to appear (this widget is often installed directly under the product's price or title)
8. Select Custom Liquid
9. Paste the star widget code in the Custom Liquid field
10. Click Save

Place the Star Widget on Product Pages Using Your Theme's Files

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click the three dot menu
5. Click Edit code
6. Search for the main-product.liquid file (if you don’t see a main-product.liquid file, search for product.liquid)
7. Click into the file
8. Paste the product review widget element code
   1. A common installation location is under the product's price or title. These locations can sometimes be found by searching for the following tags in your theme file:
      • Price - product__price div
      • Title - {{ product.title }}

      Because every Shopify theme is different, placement will require experimentation.

9. Use the View icon to preview your widget's location
10. Click Save

To check that the star widget was installed correctly, click Preview Store, then click on a product.

Product Collection Pages

It is optional but highly recommended to install the star rating widget on your product category pages so that customers can see the average star rating of each product as they are browsing through collections.

1. Login to Shopify
2. Click Online Store
3. Click Themes
4. Click the three dot menu
5. Click Edit Code
6. Search for the card-product.liquid file
7. Press CTRL + F or Command + F
8. Type <div class="card__content">
9. Paste the following widget code after the </h3> tag inside this <div> tag

If your Shopify theme doesn't have a <div class="card__content"> tag, try searching for title. Paste the script directly after a </h3> tag and preview your store's collection page to check the location of your star rating widget.

🌟  Want to change the size of the star rating widget? We got you!

To change the size of your star widget:

1. Open the Custom Liquid block you added to individual products page template or the card-product.liquid file for product category pages
2. Copy the following snippet:

   • <style>
       .slr-widget--mini .slr-stars svg {
         width: 20px;
         height: 20px;
       }
       .slr-widget--mini .slr-stars-score__total {
         font-size: 8px;
       }
     </style>
     			

3. Paste the snippet directly above the star rating widget code you want to modify
4. Adjust the values for width/height (should always be the same value) and font-size.
5. Click Save
6. Review your changes by clicking Preview

Troubleshooting

My product collection pages are displaying the same score in the star widget for all products!

Changing the product value in the star widget snippet may solve the issue of collection pages displaying the same star rating for all products.

Your store’s theme may not recognize the default value of product.id because your theme assigns a different value (such as product, id, or item.id) for your product elements.

Try replacing product.id in the star widget with product, id, or item.id.

My theme doesn't have any of the recommended files or tags to place a widget!

Because themes vary widely, you may have to experiment with widget placement. If you already use another reviews product, try placing your widget scripts in the exact same spot your existing widgets were installed in. Reach out to the support team of the theme you're using for the most accurate advice on where to place third party snippets!