Get Google Shopping Stars FREE for your eCommerce Store (Aka Seller Ratings)

Hey folks! Want to share some exciting news for eCommerce owners.

Google recently opened up a program called ‘Customer Reviews’. It allows store owners to collect customer reviews, which can later be used as ‘seller ratings’.

Allowing you to show “stars” in your ads, like this:

And also, allowing you to show stars in the Google Shopping comparison, to build social proof that you are a trustworthy seller:

On top of that… Google also let you add a reviews widget on your site, so you can show off to prospective customers (assuming you have a good star rating!). The badge looks like this:

This program has been live for a while. But if you had your store on Shopify you could only use it if you upgraded to Shopify Plus. This was down to a stipulation by Google that your checkout pages had to be on your domain. Until recently, all Shopify checkout URLs were on the Shopify domain (checkout.shopify.com). Fortunately they recently changed this, and your store should have its own domain in the checkout URL (you can confirm this by adding something to the cart, and seeing what the URL is when you go to checkout).

If your checkout URL is your domain; you’re good to go!

So how do you set this up?

For the self learners, here’s the Google instructions for how to implement:
https://support.google.com/merchants/answer/7124018

Come back to this post if you’re using Shopify, and want a list of the liquid variables to use.

Here’s are the basic initial steps:

Create and/or log in to your Google Merchant centre account
Ensure your Merchant Center account is verified and claimed
Click the 3-dot icon dropdown in the upper right corner
Select Merchant Center programs from the dropdown menu options
From the Merchant Center programs page, navigate to the Google Customer Reviews card
Click Get started to sign up
Agree to Google Customer Reviews program agreement
Check that Google Customer Reviews appears in your account

Next, for the code we need to add:

<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
  async defer>
</script>

<script>
  window.renderOptIn = function() { 
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render(
        {
          // REQUIRED
          "merchant_id":"MERCHANT_ID",
          "order_id": "ORDER_ID",
          "email": "CUSTOMER_EMAIL",
          "delivery_country": "COUNTRY_CODE",
          "estimated_delivery_date": "YYYY-MM-DD",

          // OPTIONAL
          "opt_in_style": "OPT_IN_STYLE"
        }); 
     });
  }
</script>
<!-- END GCR Opt-in Module Code -->

Next, we need to replace all the capitalized values that are surrounded by “<” and “>” characters.

Some of these will feature fixed values, and some will need dynamic values.

How to fill these out:

Variable	Required?	Description
`MERCHANT_ID`	Required	Your Merchant Center ID. You can get this value from the Google Merchant Center.
`ORDER_ID`	Required	A unique ID for the order. Will need a dynamic code if you’re using something like Shopify/Magento/BigCommerce
`CUSTOMER_EMAIL`	Required	The customer’s email address, in the format [email protected].
`COUNTRY_CODE`	Required	The two-letter country code identifies where the customer’s order will be delivered. This value must be in ISO 3166-1 alpha-2 format. For example, “US”.
`YYYY-MM-DD`	Required	The estimated delivery date for the order, where YYYY is the year, MM is the month, and DD is the day. For example, “2016-09-13”.
`OPT_IN_STYLE`	Optional	Specifies how the opt-in module’s dialog box is displayed. Possible values are: “CENTER_DIALOG”: Displayed as a dialog box in the center of the view. “BOTTOM_RIGHT_DIALOG”: Displayed as a dialog box at the bottom right of the view. “BOTTOM_LEFT_DIALOG”: Displayed as a dialog box at the bottom left of the view. “TOP_RIGHT_DIALOG”: Displayed as a dialog box at the top right of the view. “TOP_LEFT_DIALOG”: Displayed as a dialog box at the top left of the view. “BOTTOM_TRAY”: Displayed in the bottom of the view. The default value is “CENTER_DIALOG”.

Code for Shopify:

Code to Replace	Shopify Snippet to Use
ORDER_ID	{{order.name}}
CUSTOMER_EMAIL	{{customer.email}}
COUNTRY_CODE	{{shipping_address.country_code}}
YYYY-MM-DD	{{ order.created_at \| date:’%s’ \| plus:604800 \| date:”%F” }}

For the YYYY-MM-DD option – where you want to record the estimated shipping time. The Shopify code above basically sets a time (in this case 604800 seconds, or in other words, a week) since the date of the order. There’s 86400 seconds in a day, so you can base off that number to get a time accurate for your store.

For example, adding 5 days after order creation would look like:
{{ order.created_at | date:’%s’ | plus:432000 | date:”%F” }}

All this code needs to be added to the Shopify Admin, under Settings > Checkout > Additional Scripts.

One key thing to check is that the quotes are in plain text. Quite often when copying them, the single quotes need retyping. If they’re not in plain text, it could break the JS code. The error below is an example of a (likely) copy and paste issue:

Confirm its working by viewing the page source on one of your checkout page URLs. If you’re using AdWords conversion tracking, or a Facebook ads pixel, you should be able to retrieve a checkout URL from there. Alternatively, create a dummy order, and save the checkout URL from that.

Additionally, check the javascript by opening Console in Google Chrome’s Inspector tool.

Once you have enough reviews, you can then proceed to add the reviews badge/widget to your page using these instructions.

If someone knows the equivalent dynamic variables for Magento, BigCommerce or any other major eCommerce platform, please add it in the comments :)