SureDone storefronts include essential infrastructure for hosting a successful storefront. In the journey to optimize for success, social proof is one of the clearest way to establish trust with your visitors and increase conversion. There are 2 aspects to this social proof as it pertains to reviews: a) product reviews and b) store reviews.
SureDone has partnered with ShopperApproved to power these store and product reviews, read on to get your storefront setup with product and store reviews.
Getting Started:
First, create and configure an account at ShopperApproved using the SureDone sign up link.
Store Reviews:
Within the Shopper Approved app, navigate to the Merchant > Surveys page. You may accept most of the default values though we recommend choosing "Inline" for the survey code display and checking "Order Id" for auto populate values.
From there you'll copy the survey code, modify the checkout code, and set it in the thank you page as follows.
Modify the copied snippet by changing "ORDER123" to "{{data['order']}}":
<div id="outer_shopper_approved"></div><script type="text/javascript"> var sa_values = { "site":11111, "token":"xxxxx", 'orderid':'{{data['order']}}' }; 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/inline/35893.js") </script>{% set cartItems = [] %}
{% for i in range(low = 1, high = data['cart']['index'], step = 1) %}{% if data['cart'][i]['qty'] > 0 %}
{% set cartItems = cartItems|merge(["'" ~ data['cart'][i]['guid']|replace({"'":""}) ~ "':'" ~ data['cart'][i]['title']|replace({"'":""}) ~ "'"]) %}
{% endif %}{% endfor %}
<script type="text/javascript">
var sa_products = { {{ cartItems|join(',') }} };
</script>In the above, we append code from the Product Integration page so product reviews are also collected.
Now in SureDone head over to Settings > Templates and navigate to the active template - then to the file form-cartpostsale.htm. Modify the template with your Shopper Approved snippet after the payment message block.
Save the page, you can test that its working by checking out with a test product on your storefront.
Product Reviews:
Within the Shopper Approved app, navigate to the Product Reviews Code page.
From there you'll copy the Product Page Code from Step 3, modify the code, and set it in the product page as follows.
Add the reviews snippet for showing review stars under the product title (recommended):
<div id="product_just_stars" class="reg aside"></div>
Modify the copied snippet by changing "[PRODUCT ID]" to "{{data['guid']}}":
<div id="SA_review_wrapper"></div><script type="text/javascript">var sa_product = '{{ data['guid'] }}'; var sa_interval = 5000;function saLoadScript(src) { var js = window.document.createElement('script'); js.src = src; js.type = 'text/javascript'; document.getElementsByTagName("head")[0].appendChild(js); } if (typeof(shopper_first) == 'undefined') saLoadScript('//www.shopperapproved.com/widgets/39181/product/'+sa_product+'/product-widget/default.js'); </script>Now in SureDone head over to Settings > Templates and navigate to the active template - then to the file product.htm. Modify the template with your Shopper Approved snippet after the cart details block.
