How to Install Reviews for Shopify

Overview

Sendlane Reviews lets you request and respond to product reviews with Automations, use product review data to create perfectly targeted audiences, and includes widget customization options to seamlessly blend with your website's branding! Read on to learn how to install Sendlane Reviews in your Shopify store.

In This Guide

• Locate Reviews Script and Widgets Snippets
• Install the Reviews Widget Script
• Install the Reviews Main Widget Element
• Install the Reviews Star Widget Element
• Next Steps
• Troubleshooting

Locate Reviews Script and Widget Snippets

Snippets for the reviews widget script (connects your Shopify store to Sendlane), widget element (displays your reviews on product pages), and star rating widget element (displays products’ and product groups’ average star rating) are found on the Product Review page.

To access all reviews snippets:

1. Login to Sendlane 
2. Click the Reviews icon 
3. Click Product Review 
4. Click Get Widget Code 
5. Click Copy Code under the snippet you need* 

*To access the star rating widget, click the Show Star Rating Widget checkbox, then click Copy Code under Widget Element.

1

 Install the Widget Script

The reviews widget script connects your Shopify store to your Sendlane account. To install the widget script:

1. Login to Shopify
2. Click Sales Channels
3. Click Online Store
4. Click Themes
5. Click the three dot menu
6. Click Edit code
7. Search for the theme.liquid file
8. Click into the file
9. Press CTRL + F
10. Enter </head>
11. Paste the widget script on the line before the </head> tag
12. Click Save

2

 Install the Widget Element

The reviews widget element tells your Shopify store where to display reviews for individual products on your product pages. You can install the widget element in the default product page template file, and Sendlane Reviews will automatically only display reviews for the product that appears on the page.

To install the main review widget:

1. Copy the Widget Element code from the reviews page in Sendlane
2. Login to Shopify
3. Click Sales Channels
4. Click Online Store
5. Click Themes
6. Click Customize
7. From the dropdown at the top center of the screen, select Products
8. Click Default product, or the custom template you use as your default product page
9. Click Add section wherever you'd like the Reviews widget to appear (generally, this is installed at the bottom of the product page; use the preview button to see your widget's placement and make adjustments as needed)
10. Select Custom Liquid (if you don’t see Custom Liquid as an option, follow these instructions)
11. Paste the widget element code in the Custom Liquid field
12. Click Save
13. If you use more than one product page template, repeat steps 1-11 for each product page template

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.

🙋 How do I fix a reviews widget that is too wide?

If a full-width reviews widget conflicts with your store's design, you can use the div classes below, surrounding the widget element snippet, to reduce the widget's width to match the rest of your website's content. Try the second option if the first option doesn't fix your widget's width.

Option 1: <div class="page-width"> </div>. To implement this option, replace the snippet you pasted into the Custom Liquid block in step 10 above with the following:

<div class="page-width">
    <div class="sendlane-reviews" sl-product-id="{{product.id}}"></div>
</div>
	

Option 2: <div class="shopify-section"> </div>. To implement this option, replace the snippet you pasted into the Custom Liquid block in step 10 above with the following:

<div class="shopify-section">
    <div class="sendlane-reviews" sl-product-id="{{product.id}}"></div>
</div>
	

3

 Install the Star Rating Widget Element

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

Product Pages

1. Click the 
2. Copy the 
3. Login to Shopify
4. Click Sales Channels
5. Click Online Store
6. Click Themes
7. Click Customize
8. From the dropdown at the top center of the screen, select Product
9. Click Default product, or the custom template you use as your default product page
10. 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)
11. Select Custom Liquid (if you don’t see Custom Liquid as an option, follow these instructions)
12. Paste the star widget element code in the Custom Liquid field
13. Click Save
14. If you use multiple product page templates, repeat the steps above for each product page template

*If you don't see an "Add Section" option, see the video below about using the Chrome inspect tool and your theme's files to install your star rating widget

Product Collection Pages

The process for installing the star rating widget varies widely by Shopify theme and can require experimentation. We highly recommend that your store's webmaster complete this process. If you have migrated to Sendlane Reviews from another reviews platform, we highly suggest that you install the Sendlane Reviews product collection star rating widget in the same place as your existing star rating widget.

1. Login to Shopify
2. Click Sales Channels
3. Click Online Store
4. Click the three dot menu
5. Click Edit code

From here, you must search for the correct product collection file by identifying key characteristics that indicate you are in the correct file. Usually, only one product collection file will contain both titles and prices, and these files are usually named product-card.liquid, card-product.liquid, or product-card-grid.liquid, depending on your Shopify store's theme.

Determine whether you've found the correct file by clicking into the file, pressing CTRL + F, and searching for price and title. You'll find both in the correct file. If your theme does not have product-card.liquid, card-product.liquid, or product-card-grid.liquid files, try files with the words product, collection, card, or grid in their name.

You'll likely need to try pasting the star rating widget code in a few different locations before you find the right place. You can use Chrome's inspect tool to help you narrow down a location. Watch the video below for a demonstration of using the inspect tool to identify the right place for the star rating widget.

🙋  How can I change the styling of the star rating widget?

1. Open the Custom Liquid block or Liquid file where your star widget is installed
2. Copy the following snippet:

   • <style>
       .slr-widget--mini {
         margin-top: 0px;
         margin-bottom: 0px;
       }
       
       .slr-widget--mini .slr-stars svg {
         width: 20px;
         height: 20px;
       }
       .slr-widget--mini .slr-stars-score__total {
         font-size: 8px;
         color: black;
         font-family: Arial, Helvetica, sans-serif;
     
       }
     </style>
     			

3. Paste the snippet directly above the star rating widget snippet
4. Adjust the values for each property
   1. margin-top: Adds a margin above the star widget
   2. margin-bottom: Adds a margin below the star widget
   3. width and height: Determine the width and height of the widget and should always be the same number
   4. font-size: Determines the size of the font
   5. color: Determines the color of the font
   6. font-family: Determines the family of fonts and order of fonts to display
5. Click Save
6. Review your changes by clicking Preview

⏭️ Next Steps

• Check out our guide to customizing your Sendlane Reviews widgets!
• Install multiple instances of Sendlane Reviews for multiple Shopify stores!
• Uninstall your existing reviews widgets:
  • Shopify
  • Okendo*
  • Judge.me*
  • Loox
  • Stamped
  • Yotpo
  *Uninstall the widgets from the locations noted in the installation guide

Troubleshooting

The widgets aren't appearing on all pages

The widget element and star widget element must be installed separately on every product page or collection template you want them to appear on. Check that the product page you expect to see an element on contains the installation snippet.