Bigcommerce is a CMS that enables businesses to sell their products online and lets visitors write reviews on them.
Meanwhile, Google understands special html that helps it gather information on products and reviews. This information may result in Google directly showing review ratings and product prices in it's search results. Just like the examples to the right. These enhanced listings can help you stand out in the search results and attract more clicks.
This article explains a way to enhance Bigcommerce so that it contains the required html to get those enhanced listings in Google.
I do offer SEO Services which include work such as inserting and testing this code.
This is advanced stuff. I'd recommend only people very familiar with editing templates should try this. And back all the files up first. All the following instructions relate to editing template files:
Defining a Product
The first thing we want to do is make the product pages say they are Product pages.
Make the following additions (in red) to the template file:
Note: it seems newer templates have changed things. If you don't see the code shown below then ignore this and follow the later instructions fro the newer templates.
... <div class="Content" id="LayoutColumn2"> %%Panel.ProductBreadcrumb%% <div itemscope itemtype="http://schema.org/Product"> %%Panel.ProductDetails%% %%Panel.ProductTabs%% %%Panel.ProductDescription%% %%Panel.ProductVideos%% %%Panel.ProductWarranty%% %%Panel.ProductOtherDetails%% %%Panel.SimilarProductsByTag%% %%Panel.ProductByCategory%% %%Panel.ProductVendorsOtherProducts%% %%Panel.ProductReviews%% %%Panel.SimilarProductsByCustomerViews%% </div> </div> ...
This bit of code change wraps the products content in a div that defines the content as being a Product. Thanks to Karen S for coming up with this solution which is a lot cleaner than my original hacky one.
Note that the Breadcrumb panel is excluded. This is because its content is not really about the Product but the page structure. I also provide instructions on How To Add Breadcrumb Markup .
Marking up the Product Details (Panels/ProductDetails.html)
It is very hard to create these instructions as I'm sure most templates are different and therefore will need to be enhanced in different ways. However all the changes are additions to the existing template file, so if you can find the right bit of code you can enhance it.
I may not have associated the right properties with the right information. And there may be more that can be mapped. The important thing is that it includes enough to get the rich snippet results in Google.
I have provided line numbers and surrounding code from the template I edited to help you find roughly where to make the edits.
These two lines are for Pinterest which supports product markup via open graph (og) like Facebook. Inserting these two extra meta lines to the start of the file should get things working. Make sure you set the currency to the 3 letter code for your own currency, like USD. Once done use the Pinterest Validator to check it is working. Thanks to Islamic Art for posting this solution in the comments. I also had to move the tags into this file so that Bigcommerce would insert the right value.
<meta property="og:price:amount" content="%%GLOBAL_ProductPrice%%"/> <meta property="og:price:currency" content="AUD" /> ...
If you ignored the first step in this article because you have a newer template then you need to make this change. Find the first <div> in the file and add the code highlighted here.
... <div class="Block Moveable Panel PrimaryProductDetails" id="ProductDetails" itemscope itemtype="http://schema.org/Product"> ...
Tell Google what the product is called.
<h1 itemprop="name" >%%GLOBAL_ProductName%%</h1>
Define an Offer which will contain the price of the product.
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer" class="DetailRow PriceRow" style="%%GLOBAL_HidePrice%%"> <div class="Label">%%GLOBAL_PriceLabel%%:</div>
<em itemprop="price" class="ProductPrice VariationProductPrice">%%GLOBAL_ProductPrice%%</em> <meta itemprop="priceCurrency" content="USD"/> <link itemprop="availability" href="http://schema.org/InStock"/>
<div id="AllPricesAreInCurrency" style="display: none;">%%GLOBAL_AllPricesAreInCurrency%%</div>
In reality you probably only need to hard code the currency to what people in the US see. This is because Googlebot is typically in the US and Bigcommerce detects this and provides them with the appropriate currency for there. Change the USD to your own default currency if you don't sell in USD.
If any of your currencies use commas (,) in place of full stops (.) for the decimal point then you will have to alter the code to clean up the price. Maybe .replace(/[^0-9,]*/g, "").replace(",", ".") will work.
The availability code sets itself to OutOfStock if the stock level reaches zero and to PreOrder if there is an expected release date. It does not test for any other availability signals.
<span itemprop="sku" class="VariationProductSKU">
<a itemprop="brand" href="%%GLOBAL_BrandLink%%">%%GLOBAL_BrandName%%</a>
Starting the reviews section.
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="DetailRow" style="display: %%GLOBAL_HideRating%%">
And how many people wrote reviews.
<a itemprop="reviewCount" content="%%GLOBAL_ProductNumReviews%%" href="#reviews" onclick="%%GLOBAL_ReviewLinkOnClick%%">
If you can't find the above line or one similar to use, you will have to add the count as a meta tag like the following code. I'm currently not sure if this will work as Google does not like this sort of information to be hidden from users.
<meta itemprop="reviewCount" content="%%GLOBAL_ProductNumReviews%%"/>
End of File
In a second we will be adding markup for each of the reviews. Unfortunately Bigcommerce does not provide the review dates in the correct format. This code is designed to fix that for us:
Marking up the Product Description (Panels/ProductDescription.html)
This time we need to create the span tag so we can add the markup around the description.
Marking up the Product Image (Snippets/ProductThumbImage.html)
Use the thumbnail as the official product image.
<img itemprop="image" src="%%GLOBAL_ThumbImageURL%%" alt="%%GLOBAL_ImageDescription%%" title="%%GLOBAL_ImageDescription%%" />
Marking up the Product Reviews (Snippets/ProductReviewItem.html)
This snippet repeats for each review. These edits will mark up each one.
<li itemprop="review" itemscope itemtype="http://schema.org/Review" class="%%GLOBAL_AlternateReviewClass%%"> … <span itemprop="name">%%GLOBAL_ReviewTitle%%</span>
<span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <img itemprop="ratingValue" content="%%GLOBAL_Rating%%" width="64" height="12" src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ReviewRating%%.gif" alt="" /> </span> … %%LNG_PostedBy%% <span itemprop="author" itemscope="" itemtype="http://schema.org/Person"> <span itemprop="name">%%GLOBAL_ReviewName%%</span> </span> %%LNG_xOn%% <time itemprop="datePublished">%%GLOBAL_ReviewDate%%</time> … <p itemprop="reviewBody" >%%GLOBAL_ReviewText%%</p>
That's it. You can check things out using the Google Rich Snippet Tool then wait with fingers crossed.