Getting Started - BigCommerce

You've taken the first step time to start your User-Generated Content (UGC) journey.

In just a few steps we can make it happen together.

When using Stamped.io in BigCommerce, there are 2 options that you can choose from:

  1. Use the BigCommerce's Native widget, or
  2. Use Stamped.io Reviews widget
    • Blueprint Theme
    • Stencil-Based Theme

Using BigCommerce's Native widget

You can choose to use the BigCommerce's Native Widget or Stamped.io Review Widget. If you are using the BigCommerce's Native Widget, when a review is submitted via the email, the review will be pushed to the BigCommerce's Native app.

We recommend using Stamped.io Review Widget as it comes with more functionally such as Bar Graph (breakdown of star ratings), Sorting buttons, Verified Buyer, Share Links and etc, and you'll only need to manage your reviews in 1 app.

To preview:
https://www.gatomall.com/products/bellroy-elements-phone-pocket-i6-i6s-1


Using Stamped.io Reviews Widget

There are multiple benefits of using Stamped.io widgets, such as Q&A, Review Photos upload and more. To proceed with setting up Stamped.io Reviews, simply follow the installation instructions below:

Disable BigCommerce's Native Review Widget & Review Request Emails

Disable BigCommerce's widget

  1. Go to Advanced Settings › Comments.
  2. Select Built-in (or your third-party review system), then Save. Click the Built-in tab that appears along the top of the page.
  3. Check the box next to Product Reviews to enable the built-in system. To disable it, uncheck the box.
  4. Save your changes.

Disable BigCommerce's review request email

  1. Go to Store Setup › Store Settings and click on the Miscellaneous tab.
  2. Next to Product Review Emails, uncheck Product Email Reviews to disable reviews

Setting up for Blueprint Themes

1) Adding Stamped.io Scripts

  1. Go to Store Setup in BigCommerce Admin panel
  2. Click on Design
  3. Click on Edit HTML / CSS
  4. Find HTMLHead.html under the "Panels in Template" section
  5. Copy the following codes and paste it just before the "</head>" tag
<script> 
function myInit(){     
StampedFn.init({ 
apiKey: '##publicAPIKey##', // replace include # (hash)
storeUrl: '##storeUrl##' // replace include # (hash), without https:// or www (e.g. domain.com)
});
} 
</script> 
<script async onload="myInit()" type="text/javascript" src="https://cdn-stamped-io.azureedge.net/files/widget.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn-stamped-io.azureedge.net/files/widget.min.css">

Note: Replace the  ##publicAPIKey## with your account's Public API Key (pubkey-xxxxxxxxxxxxxxxxxxxxxxxxx)
##storeUrl## should be without "http" or "/"

Here's a guide to finding the API Keys in Stamped Dashboard:
How-to: Find API Keys?


2) Adding the Reviews Widget

  1. Go to Store Setup in BigCommerce Admin panel
  2. Click on Design
  3. Click on Edit HTML / CSS
  4. Find ProductDetails.html under the "Other Template Files" section
  5. Copy the following codes and paste it at the bottom of the file
<script type="text/javascript">//<![CDATA[
var div = document.createElement("div");
div.setAttribute('id', 'stamped-main-widget');
div.setAttribute('class', 'stamped-main-widget stamped-style-borderless');
div.setAttribute('data-product-id',"%%GLOBAL_ProductId%%");
div.setAttribute('data-name',"%%GLOBAL_ProductName%%");
div.setAttribute('data-url', document.URL);
div.setAttribute('data-description',"");
div.setAttribute('data-image-url', "%%GLOBAL_ThumbImageURL%%");
if ($(".stamped-main-widget-placeholder").length) {
$(".stamped-main-widget-placeholder").append(div);
} else {
$("#ProductDescription").append(div);
}
//]]></script>

3) Adding the Reviews Badge

<span class="stamped-product-reviews-badge stamped-main-badge" data-id="%%GLOBAL_ProductId%%" style="display: inline-block;"></span> 


Setting up for Stencil Themes

  1. Go to Store Design in BigCommerce Admin panel
  2. Click Design Options
  3. Click Scripts
  4. Copy the following codes and paste it at the start of Footer:

    <script> 
    (function e(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.onload=myInit,e.src="//cdn-stamped-io.azureedge.net/files/widget.min.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})();
    
    function myInit(){     
       StampedFn.init({ 
          apiKey: '##publicAPIKey##', // replace include # (hash)
          storeUrl: '##storeUrl##' // replace include # (hash), without https:// or www (e.g. domain.com)
       });
    } 
    </script>
    	
  5. For displaying of Stamped.io Reviews Widget, add this code below the scripts:
    <script type="text/javascript">//<![CDATA[ 
    var div = document.createElement("div"); 
    div.setAttribute('id', 'stamped-main-widget'); 
    div.setAttribute('class', 'stamped-main-widget stamped-style-borderless'); 
    div.setAttribute('data-product-id',"{{product.id}}"); 
    div.setAttribute('data-name',"{{product.title}}"); 
    div.setAttribute('data-url', "{{product.url}}"); 
    div.setAttribute('data-image-url', "{{getImage product.main_image 'product'}}"); 
    document.querySelectorAll('.productView')[0].appendChild(div); 
    //]]></script>
    	
  6. For displaying of Stamped.io Rating Summary, add this code below the widget's scripts:

    <script type="text/javascript">//<![CDATA[ 
    var div = document.createElement("div"); 
    div.setAttribute('id', 'stamped-badge-widget'); 
    div.setAttribute('class', 'stamped-product-reviews-badge stamped-main-badge'); 
    div.setAttribute('data-id',"{{product.id}}"); 
    document.querySelectorAll('.productView-price')[0].appendChild(div) 
    //]]></script>
    	

Note: Replace the  ##publicAPIKey## and ##storeUrl## with your account's Public API Key (pubkey-xxxxxxxxxxxxxxxxxxxxxxxxx)
##storeUrl## should be without "http" or "/"


Migrate Existing Reviews 

Do you have existing reviews from another provider? 

Please visit our for  Migration Guide details on importing the reviews into the Stamped Platform. 

Still need help? Contact Us Contact Us