BigCommerce is a CMS that enables businesses to sell their products online and lets visitors write reviews on them.
Meanwhile, Google understands special html (Structured Data) 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. It relates to stores using a Blueprint theme.
We offer several BigCommerce Packages which includes a Rich Snippet package for setting this up in both Blueprint and Stencil.
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.
The following edit is only required on some older templates. 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> ...
The above code 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_RawProductPrice%%"/> <meta property="og:price:currency" content="USD" /> ...
If you use more than one currency then this will probably not work correctly. Also, the price provided is not in the required format especially if you display two prices (with and without tax). I suggest you skip this code if you cannot get it to validate correctly.
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>
Warning: If you are also setting up the Google Merchant Centre to do Google Ads Shopping ads then this price markup can sometimes cause problems. The merchant centre may look at this markup to confirm pricing is correct, however it will only see what prices are shown to your US customers. If you have multiple currencies including USD and are advertising outside the USA then it may report a problem. If so do not add the above and below code.
<em itemprop="price" content="%%GLOBAL_RawProductPrice%%" 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.
You will need to alter that code if you don't use a dot (.) as a decimal point. Replace the dot in [0-9. ] with whatever decimal point character you use.
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.
Next we want to add the products condition. If your products are always new you can add this line:
<link itemprop="itemCondition" href="http://schema.org/NewCondition"/>
Or if they are always used then this line would work:
<link itemprop="itemCondition" href="http://schema.org/UsedCondition"/>
If the conditions vary then you need to make sure you always switch on "Show the condition in the product page" for every product, then you can use this line:
<link itemprop="itemCondition" href="http://schema.org/%%GLOBAL_ProductCondition%%Condition"/>
<span itemprop="sku" class="VariationProductSKU">
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. Sometimes a template uses %%GLOBAL_ReviewLinkText%% which now includes the required markup. If not...
<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_ReviewRating%%" 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.