Adding Structured Data to Shopify for Google Merchant (JSON-LD)

Adding Structured Data to Shopify for Google Merchant (JSON-LD)

If you have received errors or warnings regarding missing or invalid data for prices, condition, availability, etc… Then the code below will solve this issue. Simply copy the code and paste it inside your product.liquid file using the latest JSON-LD technology. Also supports variants, while keeping the first selected product as the first iteration. Meaning if you have multiple variants such as colors, and if the second color is preselected based on the URL, then the second variant will be first listed in the structured data, followed by the other variants. This is done to follow the Google Merchant Center guidelines and while keeping SEO integrity.

This tutorial no longer supports the old Microdata technology as JSON-LD is alot faster to read for Google Bots.


Important :
It is required you remove all your old structured data coding, to avoid conflicts. If you do not know how to do this, you can ask for my help using the contact form below
<!-- Created by FeedArmy -->
<script type="application/ld+json">
{
  "@context": "http://schema.org/",
  "@type": "Product",
  "name": "{{ product.title | strip_html | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {% if current_variant.sku != blank %}
	"sku": "{{ current_variant.sku }}",
  {% endif %}
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  "description": "{{ product.description | strip_html | escape }}",
  "image": "https:{{ product.featured_image.src | img_url: 'grande' }}",
  {% if product.variants %}
    "offers": [
      {% for variant in product.variants %}
        {
          "@type" : "Offer",
          "priceCurrency": "{{ shop.currency }}",
          "price": "{{ variant.price | money_without_currency  | strip_html }}",
          "itemCondition" : "http://schema.org/NewCondition",
          "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
          "url" : "{{ shop.url }}{{ variant.url }}",
          "itemOffered" :
          {
              "@type" : "Product",
              {% if variant.image %}
                {% assign variant_image_size = variant.image.width | append: 'x' %}
                "image": "http:{{ variant.image.src | img_url: variant_image_size }}",
              {% endif %}
              {% if variant.title != blank %}
                "name" : "{{ variant.title | escape }}",
              {% endif %}
              {% if variant.sku != blank %}
                "sku": "{{ variant.sku }}",
              {% endif %}
              {% if variant.weight != blank %}
                "weight": {
                  "@type": "QuantitativeValue",
                  {% if variant.weight_unit != blank %}
                    "unitCode": "{{ variant.weight_unit }}",
                  {% endif %}
                  "value": "{{ variant.weight | weight_with_unit: variant.weight_unit }}"
                },
              {% endif %}
              "url": "{{ shop.url }}{{ variant.url }}"
          }
        }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  {% endif %}
}
</script>
<!-- Created by FeedArmy -->

Once the new coding has been added, it will take Google Merchant Center several weeks to a month before the warnings inside your diagnostic panel disappear. The reason it takes so long is that Google does not check every page every day, but over a span of 30 days.

Here is a step by step guide on how to paste the code in your products.liquid file.

Step 1

Login to your Shopify Admin Panel

Shopify Login

Step 2

Open up the theme editor

shopify how to go to edit themes

Step 3

In the top right corner click on actions. A menu will appear and click on Edit Code

Edit Shopify Theme Code

Step 4

Click on Templates > product.liquid

Shopify Product Liquid File

Step 5

Depending on how your theme is built, the recommended place to paste the code us underneath the last include, this should be very near to the top. If you have any headers included, definitely after this line. Due to so many different themes, I can not explain exactly where to place it. However, it should be inserted within the first 10 lines of code. Check that you did not break anything by checking the preview results of your product landing page.

Step 6

Verify that you have done it correctly by checking the page with Google’s Structured Data Testing Tool

As of writing, you will see 3 warnings, these are :

  • priceValidUntil
  • aggregateRating
  • review

Shopify has no default coding that can be used to fill these fields in. So simply ignore these.

Google Structured Data Testing Result

Tip

If you want the ability to edit your titles for Google Shopping but do not want to change the website, why not use FeedArmy for publishing your products to Google Shopping. You can also export variants and use import rules or manually edit data!

Need Help?