How to create Rich Snippets for Shopify, Woocommerce & Bigcommerce Stores

There are plenty of e-commerce options available if you want to set up a personal online store. In fact, there are so many that it can be difficult to pick one; what follows are a handful of the most-used and recommended platforms on the market.

More important than the actual platform, however, is how you use the available web-based tools in setting up your site. We’ll cover the utility of rich snippets, and how important they are to the search engines.

Top eCommerce Platforms

The first thing you need to understand is the big e-commerce platforms. These are tailor-made to help people who aren’t yet Web-savvy enough to properly code their own website themes, make a site that performs correctly.

Here, you’ll learn an important technique that will help you gain online visibility on any of the top 4 e-commerce platforms available today:

1. Shopify
2. WooCommerce
3. BigCommerce
4. Magento

What’s the secret, then? How do you set up a website with these tools, and get people to choose your site over all the other options available? For that, we’ll take a very short side quest into the search engine.

Understanding Search Engines and Rich Snippets

The search engines – of which Google is pretty much the only game in town – scour the limitless data that inhabit cyberspace for certain attributes. Then, the websites it finds are arranged in order by the quality and quantity of those attributes. All of this is described by the general term of search engine optimization (SEO).

Think about it: this order comes in pages; is it not reasonable that the websites on the first few pages would get the most human traffic? It turns out you’re right – sites that show up on the first page and in the first few spots get the most traffic by FAR.

Rich Snippets are simply a powerful attribute that helps the search engines look at your website favorably. They are snippets of choice information about what your store offers, written and structured properly so that the search engine can find and rank them. It also draws the attention of the human readers that catch sight of your snippet and click on it more than other sites; this action drives you even further up in the rankings. See here for a more expansive review of adding rich snippets to WordPress.

Now, we’ll take a look at exactly how to go about creating rich snippets in each of the top 4 e-commerce platforms you read about above.

Shopify – Rich Snippets Creation

Shopify is one of the most popular e-commerce stores being used, with half a million applicants who generate an impressive $152 million each year, with total revenue from 2004 to 2017 of $40 billion. The company is headquartered in Canada and is known for the simplicity of its interface – which makes it a great starter software for new online store owners.

In order to create the rich snippets that are so functional for SEO, you first have to make sure you’re using a supported theme for your Shopify store. Specifically, your theme must use “structured data markup.” If your theme does not have this feature, you can find a similar theme that has this attribute – there are thousands of options. To be certain:

1. Check the theme description using the “CTRL + F” on your computer. Type in “structured data markup” in the query box – if it exists, it will be highlighted in yellow.
2. Copy and paste your Shopify product page URL into the Google Structured Data Testing Tool here. If there’s a problem, you’ll receive errors and warnings, which means you can either fix these yourself, hire a developer familiar with the Shopify platform, or get another pre-made template with the markups you need.

How to Manually Enter the Rich Snippet Code

The following is for the case where your structured data markup code is correct, and you’re ready to create the rich code snippet.

You can copy and paste this anywhere in the product page template:

{% assign current_variant = product.selected_or_first_available_variant %}

<div id=”richsnippet”>

 <div itemscope itemtype=”http://schema.org/Product”>

     <meta itemprop=”url” content=”{{ shop.url }}{{ product.url }}”>

   <meta itemprop=”image” content=”{{ product.featured_image.src | img_url: ‘grande’ }}”> 

   <meta itemprop=”name” content=”{{ product.title | escape }}”>  

   <meta itemprop=”description” content=”{{ product.description | strip_html }}”>  

{% if product.vendor %}<meta itemprop=”brand” content=”{{ product.vendor }}”>{% endif %}

     <div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>

     <meta itemprop=”priceCurrency” content=”{{ shop.currency }}”>

     <meta itemprop=”price” content=”{{ current_variant.price | money_without_currency }}”>

     <link itemprop=”availability” href=”http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}”>

     <meta itemprop=”seller” content=”{{ shop.domain }}”>

   </div>

 </div>    

</div>

It’s important to be certain that you don’t already have structured data in the template before you use this, as the duplicate will cause errors that won’t allow your page to render properly. Even if you already have markup code, if there are errors, you still won’t be able to successfully implement the above code.

Alternatively, to facilitate this process, you can search for plugins that are associated with the creation of rich snippets. They perform a similar function as the above, with the code already written in – but doing it manually gives you more control and improves your experience with behind-the-scenes alterations.

One such plugin is YotPo; for more detailed information on properly rendering rich code snippets in Shopify using this plugin, see here.

WooCommerce as an eCommerce Plugin

WooCommerce is another one of the most-used e-commerce store packages available today. It differs from Shopify in that it is more of a plugin than a standalone template, which you can incorporate into your pre-existing WordPress blog or website.

Similar to Shopify, WooCommerce is geared entirely towards rendering your products and services in an easy-to-view presentation. The product itself is center-stage, with price details and attributes positioned around it in various arrangements. You do not have to sell physical products – digital downloads are rendered just as efficiently.

Each product page allows your visitors to easily buy what they want; they are redirected to a payment page with whatever is in their cart, and taxes relevant to their area are calculated for the final tally.

One of the high-converting features of WooCommerce is the ability to have multiple products in a carousel box, where each item rotates at a prescribed rate on the same page. By having multiple related products on a single page, the likelihood that visitors buy more is higher.

The next thing you can do to increase your conversion rate is to incorporate rich snippet code into your plugin – the only requirement is that the WordPress theme you’re using is compatible with the WooCommerce plugin. Even if you already have content on it, the plugin can incorporate this into its native design.

WooCommerce Rich Snippets Creation

Since the purpose of the rich snippet is to communicate with the search engines, the necessary code is rendered in a mark-up language and is implemented behind the scenes of your WordPress template.

The human reader won’t see this code; it is incorporated into the HTML. The human reader does, however, get to see the important extra information that helps your product page stand out from all the other search results, which tends to lead to more clicks for you. What follows is the manual method for rich snippet creation; you should be well-versed in HTML and CSS to be certain of entering incorrectly:

As an example of your HTML text before you enter the rich snippet microdata, consider the following code:

Elana Smithson

<img src=”elanasmithson.jpg” alt=”Photo of Elana Smithson”/>

Network Administrator

SERPStar Enterprises

15213 Meyran Avenue

Pittsburgh PA 15213

(402) 123-4567

<a href=”mailto:elanasmithson@testing.com”>elanasmithson@testing.com</a>

Website:

<a href=”http://pinstor.us“>http://pinstor.us</a>

In the following, you’ll see the structure of the microdata as Google will see it. When formulated properly, it will factor into what position your website shows up in the Search Results Pages (SERPS).

The above data is nestled in the markup code, which serves the nestled data up as viable for rich code snippet consideration:

<div vocab=”http://schema.org/” typeof=”Person”>

 <span property=”name”>Network Administrator</span>

 <img src=”elanasmithson.jpg” property=”image” alt=”Photo of Elana Smithson”/>

 <span property=”jobTitle”>Network Administrator</span>

 <div property=”address”  typeof=”PostalAddress”>

   <span property=”streetAddress”>

      15213 Meyran Avenue

Pittsburgh PA 15213

   </span>

   <span property=”addressLocality”>Pittsburgh</span>,

   <span property=”addressRegion”>PA</span>

   <span property=”postalCode”>15213</span>

 </div>

 <span property=”telephone”>(402) 123-4567</span>

 <a href=”mailto:elanasmithson@testing.com” property=”email”>elanasmithson@testing.com</a>

Website

 <a href=”http://example.com” property=”url”>testing.com</a>

</div>

If you feel more comfortable using widgets to implement your rich snippets code, then these are plentiful. Here are a handful of rich snippets plugins that are specifically tailored for use in WordPress.

BigCommerce – A Premier Online Shopping Platform

This top eCommerce shopping platform is headquartered in Austin, Texas and, although it’s relatively new insofar as its latest incarnation is concerned (2015), it powers over 95,000 online stores as of late 2017. This is a paid shopping cart manager, although there is a trial period that allows you to gauge its success.

Although BigCommerce is less robust than Shopify, it occupies a sort of middle ground between the former and WordPress’ WooCommerce plugin. You can actually build a store of products from the ground up with BigCommerce. With more than $9 billion in transactions since its inception, many store owners just like you are finding big success with it.

The huge advantage that BigCommerce has over other store options is the available help – it is very targeted, and doesn’t require you to hunt through many different forums piecing together information. There’s actually a BigCommerce University; which means that when you’re ready to implement code snippets, it will be easier to get started. Many of the features you’ll need are already built into the platform, in fact.

Code Snippets With BigCommerce

Make sure you have a theme that supports the placement of rich snippet code via structured data. With BigCommerce themes like the Stencil-based and Blueprint-based ones, the necessary microdata is already programmed to be read as rich snippets; so, for a very easy time of it, choose among their many options before building your store.

Much like the other eCommerce platforms, you can enter the rich snippet code manually into the appropriate places within your website template. It’s a long process – the details are here. You copy the data and make sure your original product page data is nestled within this new data, so that Google can recognize the product pages from which it is to draw the information you want to be displayed in the snippet.

There’s another very easy way to render the snippet code if you don’t go for a theme that has microdata calls already built-in – just use the relevant app.

Magento as an eCommerce Platform

Magento is a robust eCommerce platform programmed in PHP, and has been around for nearly a decade – although it underwent a redesign a couple of years ago as Magento version 2.0. Among the benefit of Magento is the plenitude of templates and themes it offers for starting your online store, the flexibility of payment options and inventory management.

One thing that newcomers to Magento should keep in mind, however, is that as the number of products increases, you may notice some lag in site navigation. This is because Magento is not a managed hosting service like Shopify is. It takes quite a few products before you’d notice the lag, however.

Magento SEO and Rich Code Snippets

Magento has a multitude of plugins and apps that can serve to really drive your search engine optimization efforts further. The interface also allows for easy alteration of the HTML and CSS code, which is essential for manually entering rich code snippets for search engine recognition. This recognition leads to the attractive information you want being placed underneath your search engine listing – which includes starred reviews, ratings, product cost, etc – and demonstrably leads to higher click rates.

If you want to enter rich code snippets into Magento manually, this comprehensive guide from certified a Magento consultant shows how to do it for all schema mark-ups and data classes.

Before you delve into that long article, familiarize yourself with the following basic mark-up alteration to pre existing HTML code:

<body itemscope itemtype=”http://schema.org/WebPage”>

…

<div itemprop=”breadcrumb”>

<a href=”category/books.html”>Books</a> >

<a href=”category/books-literature.html”>Science Fiction</a> >

<a href=”category/books-classics”>Classics</a>

</div>

<div itemscope itemtype=”http://schema.org/Book”>

<img itemprop=”image” src=”the-mote-in-god’s-eye.jpg” />

<span itemprop=”name”>The Mote in God’s Eye</span> –

<link itemprop=”bookFormat” href=”http://schema.org/Paperback”>Mass Market Paperback

by <a itemprop=”author” href=”/author/robert_heinlein.html”>Robert Heinlein</a>

<div itemprop=”aggregateRating” itemscope itemtype=”http://schema.org/AggregateRating”>

<span itemprop=”ratingValue”>4</span> stars –

<span itemprop=”reviewCount”>3077</span> reviews

</div>

<div itemprop=”offers” itemscope itemtype=”http://schema.org/Offer”>

Price: <span itemprop=”price”>$8.99</span>

<meta itemprop=”priceCurrency” content=”USD” />

<link itemprop=”availability” href=”http://schema.org/InStock”>In Stock

</div>

Information on the different classes can be found at schema.org, which is the organization that defines them for web users. Your beginning code should be nestled within the “div” class in order to tell the search engines to read everything inside as fuel for rich snippet rendering.

Lastly, if you aren’t a power user of the Magento eCommerce platform, you can simply use the Rich Snippet Suite to power your Magento online store. It’s an extension that contains several mark-ups that facilitate the rendering of rich snippet code. Once added, this suite will handle the code for every single one of your products. It is being updated and improved all the time, so expect more features to be available as long as it continues to command support from Magento users.

Back to you

Whichever e-commerce platform you use rich snippets can set you apart from others on SERPs.

To summarize what we covered in this article, here is the table of contents:

This is not as hard as you think – take the platform you have and start, then you will see how it can change your organic rankings.