Step 1 - Provide us with your product feed

To get started, we will need to collect your current product feed and map that to our system. This step is required in order to collect product reviews. Our system needs to know what products you sell along with their strong identifiers so we can pass that information off to Google.

If you have a Google shopping feed, it’s best to send that over as well for review since we want to make sure your product feed matches exactly with what Google has.

Here are the strong identifiers for a product feed:

  • Product ID

  • Product name

  • Description

  • Product URL

  • Product Image URL

  • Brand

  • Manufacturing Parts Number (MPN)

  • Global Trade Identification Number(GTIN)

  • Parent ID (item_group_id) This is used to aggregate the variations of a product so each review will aggregate on the parent level.

Note: If you don’t have a GTIN, then we must have a Brand and MPN. If you have all of these strong identifiers, it’s best to include them.

If your products are custom made and you don’t have an MPN or GTIN, you can use the product id as the MPN.

Why do we need all this information?

  1. In order for us to ask your customers for a product review, we need to know what products they purchased. We will ask your customers to review the exact product they purchased which includes the product name and image of the product making it easier for them to remember what they bought. Furthermore, when the customer leaves a review, we associate that review to the specific product.

  2. Secondly, we store the product reviews we collect on your behalf in our system and pass them to Google for syndication. In order for your review to count in Google and in your product listing ads, Google needs to know exactly what product it is and what domain it comes from. By giving us these strong identifiers, it helps Google to identify which products the reviews go to and match them to your Google shopping feed and product listing ads.

If you want to collect product reviews on all the products you sell, we will need a feed with all products. If you want to collect product reviews on only the products you have product listing ads on, the feed can be more limited.

Once you are ready to give us your product feed, you can log in to Shopper Approved and provide your product feed in one of two ways:

  1. One time feed upload: If you upload a CSV file, the file will be mapped one time. Any future products will not be included unless you upload a new file including those products.

  1. Dynamic feed (recommended): If you have a hosted URL you can provide, you can set up a scheduled export of your products. Our system will read your feed on a weekly basis and any changes you make to your feed will be automatically updated. Acceptable file types are CSV and XML.

Here is an example file for you to reference. To submit your product feed to our system, navigate to the main menu in the upper left hand corner > Setup > Product Integration.

Note: It’s always best to have one of our support members review your product feed the first time to ensure it includes everything we need.

Once you have either uploaded the one time feed or provided a dynamic URL, we will map your product feed to our system. This step must happen before you can start collecting product reviews.

Step 2 - Add the seller survey code to your order confirmation page

To begin collecting seller reviews, you will place a code snippet onto your order confirmation page. This code snippet is what populates the initial survey after a customer checks so they can leave a seller review.

You can find the code snippet in your Shopper Approved account within the top left navigation under Setup > Seller Ratings > within the “Copy and paste Initial Survey code on your ‘Thank You’ page” section (3rd section down).

<script type="text/javascript"> var sa_values = { "site":12345, "token":"1a2b3c" }; function saLoadScript(src) { var js = window.document.createElement("script"); js.src = src; js.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(js); } saLoadScript("https://www.shopperapproved.com/thankyou/rate/32943.js") </script>

The site and token variables are unique to your account. You will notice that they are prefilled for you. If you want to verify, you can check under your Account Settings by clicking on your name in the upper right hand corner under Settings > Domain Information

Note: make sure you use the initial survey token and not the API token or it will result in incorrect review submission.

We have other values you can add to this code snippet if desired. To add these variables to your code snippet, select the checkbox next to the value you would like added. You can find this under Auto Populate Values on the Seller Ratings Setup page (see image below). Selecting these checkboxes will only add the value with dummy variable data into the code snippet. Please make sure to configure the correct variables from your site.

Below you see that order id, name and email have been added to the code snippet and filled with dummy data.

var sa_values = { "site":12345, "token":"1a2b3c", 'orderid':'ORDER123', 'name':'John Doe', 'email':'john.doe@gmail.com' }

We recommend selecting the following:

  • Order id: Attaching an order id to a review makes it easier for you to cross-reference the order with a customer review. It is especially useful when you are searching for a particular review.

  • Name: The customer's name will be auto-filled in the name field, making it easier for your customer to fill out the survey. The name will be attached to the review. Note: If the customer doesn’t add a name, or removes the name, the review will show “Anonymous Customer”.

  • Email: The customer's email address will also be auto-filled in the email field on the survey. In order for us to send a follow-up email to your customers, we must have their email address. This is also a required value if you want us to send emails to all customers who place an order on your site whether they fill out the initial survey or not. If you are interested in this, make sure you have “email all” turned on and that your privacy policy states you will share information with a third party.

Optional Values

  • Country

  • State/Province

  • Days to delivery: This dynamically allocates the days to delivery based on a dynamic value.

After selecting the values you want, copy the code snippet to your site. Remember to replace the dummy data with data from your checkout page using your cart’s variables.

Note: If you are not able to auto-populate any of the variables such as order id, name and email address from your cart/platform, the survey code will still populate a survey. Make sure that the values that you are not able to fill, are not selected so they are not included in the code snippet. Remember to include the site ID and token. If the email variable is not passed, this will prohibit you from using the email-all feature and may lead to a lower review conversion rate.

Step 3 - Add the product bolt-on code to your order confirmation page

In order to send our system the information about what products a customer purchased, you will add the product bolt-on code. This code populates the product information into the sa_products object on your order confirmation page.

Example code can be found on the Setup > Product Integration page.

<script> var sa_products = { 'productid1':'Product Name 1', 'productid2':'Product Name 2', 'productid3':'Product Name 3' }; </script>

The best way to accomplish this would be to use a loop to go through the products that were purchased and then populate the key-value pairs of product id and product name into sa_products. Please see below for an example.

<script>

var sa_products = {};

for (i = 0; i < products.length; i++) {

sa_products[products[i].id]=products[i].name;

}

</script>

Best Practices

  • Pass the CHILD variant ID. Passing the parent ID can cause syndication issues in most circumstances and could break Shopper Approved's ability to syndicate or display your product reviews.

  • Escape Product Names. Failure to do so will break the script resulting in no feedback collection.

  • Make sure the variable will be ready and populated with data when the survey script loads. If the data is not present, a product review section cannot be offered in the survey.

Step 4 - Place a Test Order (and set the follow-up days)

Once you have added the code snippet to your order confirmation page with the correct values, you will want to place a test order to ensure the survey submission passes the correct values onto the review.

After checking out, you should see this survey on your order confirmation page.

Note: If you have uploaded your logo in your settings, your logo will appear on the top.

If you are passing the order id, name and email, the name and email should be auto-filled in the fields.

Fill out the survey as if you were a customer and submit the review.

To verify the review came through with the correct values, log in to your Shopper Approved account to see your review under the main navigation > Seller Ratings > Manage Seller Ratings.

You should see a review similar to this with the values. You want to make sure the products purchased are attached to the review.

Please note that if your review is not marked as “test”, you should reach out to support@shopperapproved.com to prevent any issues with your account.

To test the follow-up email, you can set the follow-up days to 0 days before submitting the initial review. This will send a follow-up email right away to the email address from the survey. You can fill out the full survey as well.

Note: After placing a successful test order, you will want to change the follow-up days to a number of days after purchase where the customer has already received their product. Keep in mind these are calendar days.

Step 5 - Add a seller reviews page

Now that your customers can leave a seller review, you will want to display these reviews on your site. Adding a dedicated seller reviews page to your site gives you an organic search result in Google and drives traffic directly to your site.

Start by creating a new page on your website titled “Reviews” and add a link to your site footer.

Here is what a reviews page will look like:

Add the code snippet located under Seals and Widgets > Review Page Widget to your newly created Reviews page.

<script type="text/javascript"> var sa_review_count = 20; var sa_date_format = 'F j, Y'; function saLoadScript(src) { var js = window.document.createElement("script"); js.src = src; js.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(js); } saLoadScript("https://www.shopperapproved.com/merchant/29967.js"); </script><div id="shopper_review_page"><div id="review_header"></div><div id="merchant_page"></div><div id="review_image"><a href="https://www.shopperapproved.com/reviews/DunderMifflin.com/" target="_blank" rel="nofollow"></a></div></div>

This will automatically add all your seller reviews to this page. You can change the default sort order and choose to hide the customer location.

Note: It’s recommended to add the reviews page after you have received 5 reviews or more since the reviews page will be an average of all seller reviews.

Step 6 - Add a seal

The seal is very beneficial to add to your site because it shows Google the relationship between your certificate page and your website when they crawl your site, helping you rank higher in Google. It is also used as social proof. The certificate page also gives your organic stars in Google. Your customers can also click on the seal and be directed to the certificate page to see reviews.

To find the seal code, navigate to Seals and Widgets > Manage Seals in your Shopper Approved account. There are a variety of customizations you can make such as color, style, width and more. The seal can either be dynamic, rotating between your review count and overall rating, or static. A preview of your seal will display on the right hand side as you customize your settings.

Once you are done customizing to your liking, copy and paste the code onto the desired location on your site. The most common locations are in the header and/or footer of your website.

We have found that clients get the best conversion when they place the seal somewhere in the top right of their website in the header. You can also create a floating seal so the seal is always visible on your site when a customer scrolls.

Here is an example code snippet:

<a href="https://www.shopperapproved.com/reviews/DunderMifflin.com" class="shopperlink new-sa-seals placement-380"><img src="//www.shopperapproved.com/seal/29967/380-sa-seal.gif" style="border-radius: 5px;" alt="Customer Reviews" oncontextmenu="var d = new Date(); alert('Copying Prohibited by Law - This image and all included logos are copyrighted by Shopper Approved \251 '+d.getFullYear()+'.'); return false;" /></a><script type="text/javascript">(function() { var js = window.document.createElement("script"); js.innerHTML = 'function openshopperapproved(o){var e="Microsoft Internet Explorer"!=navigator.appName?"yes":"no",n=screen.availHeight-90,r=940;return window.innerWidth<1400&&(r=620),window.open(this.href,"shopperapproved","location="+e+",scrollbars=yes,width="+r+",height="+n+",menubar=no,toolbar=no"),o.stopPropagation&&o.stopPropagation(),!1}!function(){for(var o=document.getElementsByClassName("shopperlink"),e=0,n=o.length;e<n;e++)o[e].onclick=openshopperapproved}();'; js.type = "text/javascript"; document.getElementsByTagName("head")[0].appendChild(js);var link = document.createElement('link');link.rel = 'stylesheet';link.type = 'text/css';link.href = "//www.shopperapproved.com/seal/380.css";document.getElementsByTagName('head')[0].appendChild(link);})();</script>

Note: For security, the seal should never be placed on pages where credit card information is entered.

Step 7 - Add product ratings to collection pages

Once you start collecting product reviews, you will want to display the star ratings and review count on your site. One location where you can display the product ratings is underneath the product on a collections page on a per product level.

You will add code to the collection page once and then add divs to each category so the star rating and review count appear below each product. You can find this code under Setup > Product Reviews Code > Category Code. The code below will be loaded on the page one time.

<script type="text/javascript"> function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(js); } saLoadScript("https://shopperapproved.com/widgets/group2.0/99459.js"); </script>

You will then place the code below on each category listing replacing product_id_here with the product ID for the respective product.

<div class="star_container product_id_here"></div>

Once you place the code, the category pages should display the star rating and review count.

Step 8 - Add Product Star Rating and Review Count Code to Product pages

You can find this code snippet under Setup > Product Reviews Code > Product Code under Step 1 - Copy and Place “Price Stars” Tag. This code is only for one product on a product page.

<div id="product_just_stars" class="reg"></div>

Notice the placeholder value for the product ID sa_product = '[PRODUCT ID]'. This will need to be replaced with the product ID for that particular product.

Step 9 - Customize your product review settings

Under Setup > Product Reviews Code > Step 2 - Configure the Widget, customize your settings to fit what you would like to display on your site. You will want to go through your settings as well to determine how many product reviews you’d like to collect before displaying the product reviews. The Merchant Fallback setting allows you to display Seller Reviews until reaching the threshold of Product Reviews you select in these settings.

Schema Setting

Note the setting, "Inject JSON-LD schema into product page using the product widget:".

If the schema on your site is currently in JSON-LD format and you have an @id attribute that contains the product URL, enable this setting to have the product review widget automatically inject the Aggregate Rating schema onto your product pages.

Note: Turning this feature on will enable your product reviews to be crawled by Google so your ratings will show up in organic searches. Prior to turning this feature on, all non_json_ld schema on your product pages should be removed.

If you are not sure about your existing schema or have any other questions related to schema, please reach out to support@shopperapproved.com and our dedicated support team can advise you on what needs to be done to benefit from this schema.

Step 10 - Add Product Review Code

Now that you have your settings configured, you can add the product reviews code to your product pages in the location where you want the product reviews displayed. You can find this code under Setup > Product Reviews Code > Step 3 - Copy the Product Reviews Widget Tag

<script type="text/javascript"> var sa_products_count = 3; var sa_date_format = 'F j, Y'; var sa_product = '[PRODUCT ID]'; (function(w,d,t,f,o,s,a){ o = 'shopperapproved'; if (!w[o]) { w[o] = function() { (w[o].arg = w[o].arg || []).push(arguments) }; s=d.createElement(t), a=d.getElementsByTagName(t)[0];s.async=1;s.src=f;a.parentNode.insertBefore(s,a)} })(window,document,'script',"//sidebar.shopperapproved.com/product/99459/"+sa_product+".js"); </script> <div id="shopper_review_page"><div id="review_header"></div><div id="product_page"></div><div id="review_image"><a href="https://sidebar.shopperapproved.com/reviews/dashboardtestco3.com/" onclick="var nonwin=navigator.appName!='Microsoft Internet Explorer'?'yes':'no'; var certheight=screen.availHeight-90; window.open(this.href,'shopperapproved','location='+nonwin+',scrollbars=yes,width=620,height='+certheight+',menubar=no,toolbar=no'); return false;" target="_blank" rel="nofollow"></a></div></div>

Note: You will have to replace the [PRODUCT ID] placeholder anywhere you place this code. Also, some carts will strip div tags with empty content. If this is the case put a ` ` in the empty divs to keep it from doing so

Once your code is placed, you will see the product reviews widget on the product page.

Step 11 - Add a rotating widget

This is optional but gives you the option to highlight some of your best seller reviews on your site. You can select 5-star reviews, 4- and 5-star reviews or your favorite reviews. To learn how to favorite a review, reach out to your onboarding specialist to get a walk-through of that feature.

Note: Only reviews with comments can be displayed.

To find the code for the rotating widget, navigate to Seals & Widgets > Rotating Widget. From here, go through the settings and customizations and just like the reviews page and seal, copy and paste the code to the location on your home page.

Step 12 - Add a milestone award

Once you collect a certain amount of reviews with us, you will see a Milestone Award under Seals & Widgets. If you want to add the milestone to your site, select your desired style and copy and paste the code in the desired location of your site.

You’re all set! If you have any questions about your integration, please reach out to support@shopperapproved.com.

Happy Collecting!

Did this answer your question?