BigCommerce: Getting Started

Welcome and thank you for starting your journey with us at Stamped! This guide will provide information on integrating Stamped with your BigCommerce store. Be sure to visit our Stamped Resource Hub for more helpful information! 

In this guide

• Disabling BigCommerce Native Widget & Migrating Reviews
• Setting Up with Blueprint Themes
• Setting Up with Stencil Themes
• Migrating Existing Reviews From Another Provider
• Setting up Product Page Rich Snippet
• Setting up conversion/revenue tracking

Disabling BigCommerce Native Widget & Migrating Reviews

Disabling 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. To disable the native product review widget, uncheck the box.
4. Save your changes.

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

Migrating your existing reviews from BigCommerce

Setting Up for Blueprint Themes

Adding Stamped Scripts

1. Go to Storefront in BigCommerce Admin panel
2. Click on My Themes
3. Click on Edit HTML / CSS
4. Find HTMLHead.html under the "Panels in Template" section
5. Copy the following code and paste it just before the "</head>" tag

<script type='text/javascript'>
{{#if page_type '===' 'product'}}
try {
    window.stamped_bigcommerce_product = {
        id: '{{product.id}}',
        title: '{{product.title}}',
        url: '{{product.url}}',
        imageUrl: '{{getImage product.main_image 'product'}}',
        brand: '{{ product.brand.name }}',
        brandUrl: '{{ product.brand.url }}',
        priceWithoutTax: '{{ product.price.without_tax.value }}',
        priceWithTax: '{{ product.price.with_tax.value }}',
        currency: '{{currency_selector.active_currency_code}}',
        sku: '{{product.sku}}',
        barcode: ''
    }
}catch(e){}
{{/if}}
</script>
<script>function myInit(){ StampedFn.init({ apiKey: '##publicAPIKey##', sId: '##storeHash##' }); }</script>
<script async onload="myInit()" type="text/javascript" src="https://cdn1.stamped.io/files/widget.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn-stamped-io.azureedge.net/files/widget.min.css">
Copy Code

Note: Replace the  ##publicAPIKey## with your account's Public API Key (pubkey-xxxxxxxxxxxxxxxxxxxxxxxxx)
##storeHash## with your Store Hash ID.

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

Adding the Main Review 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 code 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>
Copy Code

Adding the Reviews Badge

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

Setting Up For Stencil Themes

1. Go to Storefront in BigCommerce Admin panel
2. Click Script Manager
3. Ensure that a script named Stamped is showing in the script manager interface. Otherwise, head over to Stamped's dashboard under Settings - Widgets - Main Widget - Install, click on Install Main Widget to insert the init script into the script manager.
4. Create a new script
5. Choose the following options:
   1. Location on page: Footer
   2. Select pages where scripts will be added: All pages
   3. Script category: Essential
   4. Script type: Script

For displaying Stamped Main Review Widget, add this code:

<script type="text/javascript">
{{#if page_type '===' 'product'}}
var divMain = document.createElement("div"); 
divMain.setAttribute('id', 'stamped-main-widget'); 
divMain.setAttribute('class', 'stamped-main-widget stamped-style-borderless'); 
divMain.setAttribute('data-product-id',"{{product.id}}"); 
divMain.setAttribute('data-name',"{{product.title}}"); 
divMain.setAttribute('data-product-sku',"{{product.sku}}"); 
divMain.setAttribute('data-url', "{{product.url}}"); 
divMain.setAttribute('data-image-url', "{{getImage product.main_image 'product'}}"); 
document.querySelectorAll('.productView')[0].appendChild(divMain);
{{/if}}
</script>
	Copy Code

For displaying Stamped Rating Summary, add this code in another new script:

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

To add the star rating badges to the category pages, the following code will have to be manually added into the theme files (usually in templates > components > products > card.html):

<span class="stamped-product-reviews-badge" data-id="{{id}}" data-product-sku="{{sku}}" style="display:block;"></span>
	Copy Code

Remember to save the settings!

Migrate Existing Reviews From Another Provider

Do you have existing reviews from another provider? 

Please visit our Migration Guide for information on importing reviews into Stamped. 

Setting Up Product Page Rich Snippet

BigCommerce requires installation of a set of JSON-LD rich snippet codes, which Stamped makes available in the Premium plan and above.

Simply send us an email at support@stamped.io and our support team will assist you with installation of the codes.

Setting Up Conversion/Revenue Tracking

You can paste the following code in Advanced Settings > Conversion Tracking:

<img src="https://stamped.io/conversion_tracking.gif?sId=##storehash##&apiKey=##publicApiKey##&orderId=%%ORDER_ID%%&orderAmount=%%ORDER_AMOUNT%%&orderCurrency=USD" />
Copy Code

Both  ##storehash## and ##publicApiKey## can be found under API Keys page within Stamped's dashboard settings.

• Stamped Reviews 101.pdf 6 MB