How to integrate Google Customer Reviews in Shopify without app
If you’re running your ecommerce business on the Shopify platform, you can now integrate Google Customer Reviews directly into your Shopify store.
Follow these steps to integrate Google Customer Reviews in your Shopify store:
Step 1: Register for the program inside Google Merchant Center. Click on the three vertical ellipses in the top-right then select “Merchant Center programs”.
Step 2: Enable “Customer Reviews”. Read the agreement and continue. You should then see “Customer Reviews” on the left-side of Merchant Center. Sometimes it immediately appears. Other times, I’ve had to wait several hours:
Step 3: In the configuration of customer reviews, the default code provided will look like the following but with your merchant_id value:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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( { "merchant_id": XXXXXXXXX, "order_id": "ORDER_ID", "email": "CUSTOMER_EMAIL", "delivery_country": "COUNTRY_CODE", "estimated_delivery_date": "YYYY-MM-DD" }); }); } </script> |
Copy the following:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | {% if first_time_accessed %} <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( { "merchant_id": XXXXXXXXX, "order_id": "{{ order.name }}", "email": "{{ order.email }}", "delivery_country": "{{ shipping_address.country_code }}", "estimated_delivery_date": "{{ order.created_at | date:'%s' | plus:604800 | date:'%F' }}" }); }); } window.___gcfg = { lang: 'en_US' }; </script> {% endif %} |
Three things you will need to modify:
- Replace XXXXXXXXX with the merchant ID number from step 3.
- Change the estimated_delivery_date value of 604800 to when most customers received their order. This is when the email review gets sent out to the customer. I have a calculator created below to help you convert the number of days into seconds. 604800 seconds = 7 days. I have also provided liquid below if you want to set different delivery dates based on the customer’s shipping country. Yes, I’m helpful and you’re welcome.
- Change the lang value of en_US to the primary language of your store from the theme.liquid file. This is the language of the lightbox and survey. See the local country codes to use the right value.
You can remove the {% if first_time_accessed %} and {% endif %} portion if you want the lightbox request to be emailed for a review, whenever the thank you page is viewed.
Step 4: Paste it into the Settings > Checkout > Additional scripts section of Shopify.
How Does it Work?
After customers have made a purchase on your site, they will be presented with an option to opt-in to a receive an email from Google requesting feedback on their experience with your site.
Google notes that the survey cannot be placed directly on the confirmation page; rather it’s only available by email after a product has been received to ensure the most accurate feedback.
If you’d like to display the badge on your store, copy-and-paste the snippet before the closing </body> in your theme.liquid file. Replace XXXXXXXXX with your merchant ID. Also change the lang attribute as per the previous step if required. See Google’s badge integration if you want to change the position.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script> <script> window.renderBadge = function() { var ratingBadgeContainer = document.createElement("div"); document.body.appendChild(ratingBadgeContainer); window.gapi.load('ratingbadge', function() { window.gapi.ratingbadge.render(ratingBadgeContainer, { "merchant_id": XXXXXXXXX, "position": "BOTTOM_RIGHT" }); }); } window.___gcfg = { lang: 'en_US' }; </script> |
Hi, where should I paste the code? Is it also a the theme.liquid page or at the order confirmation page, which I can’t find. Thanks.