Microdata Rich Snippets in your Custom Template

Have you ever noticed that some search engine search results have review stars, the product brand listed, or even the product price? This information is displayed in search results because of the microdata on the page itself. You can add these same rich snippets to your ShopSite custom template so that your products show up in search results with as much detail as necessary to help entice customers to come to your website.

Below is an example of the rich snippet microdata that is displayed by a search engine. You will notice that the product review rating, number of reviews, price and stock status are all listed in the search result display.

Example search result displaying microdata snippets

If you are using a ShopSite built in theme that was added in version 12 or later, your store should already include microdata rich snippets. If you are using a built-in theme that was added earlier than version 12, or you are creating your own custom template, then you may want to add microdata rich snippets to your store. This article will show you how do add microdata to your custom product template.

Microdata for a Product Detail Page

The code below is an example of how your product code may appear after being published by ShopSite.

<div>
<h1>Aviator Sunglasses</h1>
By LoFlare
$89.99
Condition: New
in stock

Buy these classic aviator sunglasses today! Choose between black or brown lens metal frame aviators with a double nose bridge.
</div>

After you have added the microdata snippets, your resulting code would look similar to the following.

<div itemscope itemtype="http://data-vocabulary.org/Product">
<h1 itemprop="name">Aviator Sunglasses</h1>
By <span itemprop="brand">LoFlare</span>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
$<span itemprop="price">89.99</span>
Condition: <span itemprop="condition" content="new">New</span>
<span itemprop="availability" content="in_stock">in stock</span>
</span>

<span itemprop="description">Buy these classic aviator sunglasses today! Choose between black or brown lens metal frame aviators with a double nose bridge.</span>
</div>

Microdata Breakdown with ShopSite Tags

Product Name: <span itemprop="name">[-- PRODUCT.Name REMOVE_HTML --]</span>

Brand: <span itemprop="brand">[-- PRODUCT.Brand --]</span>

Image: <img itemprop="image" [-- PRODUCT.MoreInformationGraphic REMOVE_HTML --]>

Description: <span itemprop="description">[-- PRODUCT.MoreInformationText --]</span>

SKU: <span itemprop="identifier" content="mpn:[-- PRODUCT.Sku --]">[-- PRODUCT.SKU --]</span>

Reviews: All ShopSite review tags can include microdata automatically. Add product review tags to your custom templates.

Price, Seller, Condition and Stock Status:

<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    
   <meta itemprop="currency" content="USD" />
    
   [-- STORE.CurrencySymbol --]<span itemprop="price">[-- IF PRODUCT.SaleAmount --][-- PRODUCT.SaleAmount NO_SYMBOL --][-- ELSE --][-- PRODUCT.Price NO_SYMBOL --][-- END_IF --]</span>
    
   Available from: <span itemprop="seller">[-- STORE.Name REMOVE_HTML --]</span>
    
   Condition: <span itemprop="condition" content="[-- PRODUCT.GoogleCondition --]">[-- PRODUCT.GoogleCondition --]</span>
    
   <span itemprop="availability" content="[-- PRODUCT.GoogleAvailability --]">[-- PRODUCT.GoogleAvailability --]</span>
  
</span>

Testing and Additional Resources

Once you have added your microdata rich snippets, you can test them using Google's Structure Data Testing Tool.