At Spark Pay online, we use the theme engine to apply schema markup to all our new responsive themes. You can view them at http://www.americommerce.com/ThemeGallery.html. If you install the responsive themes on your store, the information in this article is already complete. Our new themes have many benefits beyond baked in rich snippets. They are responsive across all devices, and provide greater support for custom layouts across pages and widgets.
Since Google now supports schema.org markup as well as rich snippets, this article will focus on adding schema.org markup to product pages.
For more information on what schema information is available, checkout www.schema.org.
Note: This is an advanced article and requires modifying html code.
Requirements:
- atleast a v2 theme
- html knowledge
This article will detail different spots in the theme to add certain schema.org markup.
Template
One of the most basic schemas is the WebPage schema. - http://schema.org/WebPage
The recommendation is to add this to your <body> tag.
To do this you'll need to edit the theme's template files.
Navigate to your Theme and expand the Templates section
Then you'll need to go to the HTML Editor for *each* Template in the themes.
Then insert the itemtype and itemscope code into the <body> tag
Category
The only thing necessary to markup on the category page is the breadcrumbs. This falls with the "WebPage" scope.
Add the itemprop="breadcrumb" code to the html element surrounding the Home > Online Store > Sales & Marketing > merge code. If there isn't one, you can add a <div> tag around it.
Product Page
The same markup for the breadcrumbs can apply to the Product page as well.
The next step is to wrap the entire contents of the Product page in a container <div> (if it isn't already).
NOTE: The breadcrumbs should be outside of this <div> as they belong to the WebPage, not the Product.
Most of the Product schema markup can be inserted into the existing html.
Some things aren't exposed by default. These can be added as <meta>tags inside of the product wrapper.
The following is an outline of what we chose to markup in our DejaVu and Base themes. (This represents a typical store - you can markup more or less than this)
- Product
- productID = GTIN
- image = Product Photo
- name = Product Name
- Review-aggregate
- rating = Average Rating
- count = Review Count
- Offer (this is what handles the pricing)
- seller = Store Name
- price = Price
- sku = Item Number
- manufacturer = Manufacturer/Brand
- Review (repeated for newest reviews)
- author = Review Author
- datePublished = Review Date
- name = Review Title
- description = Review Body
