Star Ratings & Prices

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.

Layouts/product.html

Make the following additions (in red) to the template file:

Please provide feedback if you have any issues.

...
<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.

Line 1

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" />
...

Line 31

Tell Google what the product is called.

<h1 itemprop="name" >%%GLOBAL_ProductName%%</h1>

Line 66

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>

Line 69

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" />

Line 77

The SKU.

<span itemprop="sku" class="VariationProductSKU">

Line 93

Brand. In my case Brands were not used so I did not add this code.

<a itemprop="brand" href="%%GLOBAL_BrandLink%%">%%GLOBAL_BrandName%%</a>

Line 113

Starting the reviews section.

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating" class="DetailRow" style="display: %%GLOBAL_HideRating%%">

Line 116

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" />

Line 118

And how many people wrote reviews.

<a itemprop="reviewCount" content="%%GLOBAL_ProductNumReviews%%" href="#reviews" onclick="%%GLOBAL_ReviewLinkOnClick%%">

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.

<span itemprop="description">%%GLOBAL_ProductDesc%%</span>

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>
            <img itemprop="reviewRating" content="%%GLOBAL_Rating%%" width="64" height="12" src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ReviewRating%%.gif" alt="" />
…
           %%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.