Categories
Digital Marketing Google Ads Shopify Shopping

Add Microdata to your Shopify Product Pages (with variant support)

If you are using Google Merchant Center with Shopify you may have received a warning about missing micro-data on your product pages. Here is the fix.

If you are using Google Merchant Center to with Shopify then you have likely ran into an issue where Merchant Center will give you a warning that there is insufficient match of micro-data information and that automatic item updates are no longer being performed.

merchant-center-warning
Insufficient micro-data warnings in Google Merchant Center

This is generally due to incorrect or incomplete micro-data on your product page.

Product.liquid

All the required edits should be limited to your Product.liquid file. You need to define a Product itemscope which will have properties such as Product Url, Product Image, Product Title, and Product Description.

Nested within the Product will be an Offer itemscope that will contain the product variant’s price, currency, condition, and availability.

What complicates things is that most Shopify Themes will have at least a partial implementation of micro-data, and are perhaps only missing a few items, or perhaps don’t fully support variants.

A good idea would be to first run your product page through Google’s Structured Data Testing Tool to see which tags already exist.

Product ItemScope

1. Open your product.liquid file and add the Product itemscope property to the outer most div. The first line of your product.liquid should look something like this: 

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

2. Directly below this line, you should add the product variant’s url and image markup as so:

<meta itemprop="url" content="{{ shop.url }}{{ product.selected_or_first_available_variant.url }}" />
<meta itemprop="image" content="https:{{ product.selected_or_first_available_variant.image.src | product_img_url: 'grande' }}" />

3. Find where your product’s title and description are displayed, and add itemprop=name and itemprop=description attributes as shown below:

<!-- Product Title -->
<h1 itemprop="name">{{ product.title }}</h1>
<!-- Product description -->
<div class="product-description" itemprop="description">
{{ product.description }}
</div>

Offer ItemScope

4. Now you need to find the place in your product.liquid file where you display your price. Find a wrapping div tag and add the Offers itemscope attributes to the tag. The Offers itemscope MUST nested within the Product itemscope div tag.

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

5. Immediately after this line you can add the product variant’s price, currency, condition, and availability microdata as so:

<meta itemprop="priceCurrency" content="{{ shop.currency }}" />
<meta itemprop="price" content="{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}" />
<meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>
{% if product.selected_or_first_available_variant.available %}
  <link itemprop="availability" href="http://schema.org/InStock" />
{% else %}
  <link itemprop="availability" href="http://schema.org/OutOfStock" />
{% endif %}

Putting it all together

Once done, your product.liquid should have roughly the following structure.

<!-- BEGIN Product itemscope -->
<div itemscope itemtype="http://schema.org/Product">
  <meta itemprop="url" content="{{ shop.url }}{{ product.selected_or_first_available_variant.url }}" />
  <meta itemprop="image" content="https:{{ product.selected_or_first_available_variant.image.src | product_img_url: 'grande' }}" />
 
  <!-- Product Title & Description -->
  <h1 itemprop="name">{{ product.title }}</h1>
  <div class="product-description" itemprop="description">
  {{ product.description }}</div>
  <!-- BEGIN Offer itemscope -->
  <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <meta itemprop="priceCurrency" content="{{ shop.currency }}" />
    <meta itemprop="price" content="{{ product.selected_or_first_available_variant.price | money_without_currency | remove: ',' }}" />
    <meta itemprop="itemCondition" itemtype="http://schema.org/OfferItemCondition" content="http://schema.org/NewCondition"/>
    {% if product.selected_or_first_available_variant.available %}
      <link itemprop="availability" href="http://schema.org/InStock" />
    {% else %}
      <link itemprop="availability" href="http://schema.org/OutOfStock" />
    {% endif %}
  </div>
</div>

Final Steps

  1. Save and test your new product page in Google’s Structured Data Testing Tool, and fix all errors if any.
  2. Wait and check back periodically in Google Merchant center to ensure no new errors were introduced. It will take a few weeks before the “unable to update” warning disappears.

Related Reading

Leave a comment