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.
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>
Here is the price it contains. Note I have hard coded this to be in Australian Dollars (AUD). Change this to suit your own currency. And I've hard coded it to say the product is in stock.
<em itemprop="price" class="ProductPrice VariationProductPrice">%%GLOBAL_ProductPrice%%</em> <meta itemprop="priceCurrency" content="AUD" /> <link itemprop="availability" href="http://schema.org/InStock" />
<span itemprop="sku" class="VariationProductSKU">
Brand. In my case Brands were not used so I did not add this code.
<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%%">
What was the average rating.
<img itemprop="ratingValue" content="%%GLOBAL_Rating%%" width="64" height="12" src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_Rating%%.gif" alt="" /><meta itemprop="worstRating" content="1" /><meta itemprop="bestRating" content="5" />
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%%" />
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="" /> <meta itemprop="worstRating" content = "1"/>
<meta itemprop="bestRating" content = "5"/> </span> … %%LNG_PostedBy%% <span itemprop="author">%%GLOBAL_ReviewName%%</span> %%LNG_xOn%% <span itemprop="datePublished">%%GLOBAL_ReviewDate%%</span> … <p itemprop="reviewBody description" >%%GLOBAL_ReviewText%%</p>
That's it. You can check things out using the Google Rich Snippet Tool then wait with fingers crossed.