Custom Store Project
Design and launch a bespoke store.
We are a Shopify Agency, who design, develop, support & grow Shopify &
Shopify Plus stores. Get in touch today.
Nic Dunn |
CEO - Charle AgencySchema Markup commonly referred to as structure data is a special type of code that is added to webpages that help search engines to understand the content of the page but also the context of the page too. Schema Markup is a standardised way of writing structured data that is recognised by major search engines. Google, for example, uses schema to understand a page but also to learn more about the page so it can rank that page most accurately. Search Engines also share schema information amongst search results to help customers understand the page better. For example, this might be the the price of a product or the review ratings of the product which are then displayed directly in search results. We'll explore different types of Schema Markup recognised by search engines later in this article.
Schema markup is a set of tags known as structured data that is added to a web page's codebase and is then read by search engines when they crawl the website. The search will of course read the entire page to gain an understanding of the page, however, it will associate the additional pieces of data such as its content and context to the page. When it begins to index the page in its search results it will call upon the data it found in the schema markup to display alongside the results. When a search engine understands a page better it has a higher chance of ranking for relevant search terms but also appears in specific areas such as "rich-text snippets" or the Shopping tab. Finally, this data may also be used to enhance standard results by showing price, stock or star ratings below the search result. Schema Markup takes the guesswork out for search engines to find vital information - for ecommerce, this might be the product name, price, rating and category it falls within.
Google recognises a large number of different types of structured data depending on the type of page it is crawling. For example, Google shares guidance on a schema that is recognised for articles, job postings, events, the list goes on. For this article, we'll only be exploring those that are relevant to a Shopify merchant. This mainly includes Schema for products and collections plus a few extras for bonus points. We recommend you ensure you share the following structured data with search engines, we'll explore each of these in detail throughout this article.
By adding product-specific schema markup directly to your product pages on Shopify you are providing rich information about the products directly signally to search engines that the page is a product but also providing key pieces of data that Google can display in results. We recommend including the following product structured data:
Here you can find an example code snippet of a product page schema markup. Whilst you can use this template, we always recommend you to consult a professional before editing the code of your store.
{
"@context": "https://schema.org",
{%- assign days_product_price_valid_until = 10 | times: 86400 -%}
"@type": "Product",
"productID": {{ product.id | json }},
"offers": [
{%- for variant in product.variants -%}
{
"@type": "Offer",
"name": {% if product.has_only_default_variant %}{{ product.title | json }}{% else %}{{ variant.title | json }}{% endif %},
"availability": {%- if variant.available -%}"https://schema.org/InStock"{%- elsif variant.incoming -%}"https://schema.org/BackOrder"{% else %}"https://schema.org/OutOfStock"{%- endif -%},
"price": {{ variant.price | divided_by: 100.0 | json }},
"priceCurrency": {{ cart.currency.iso_code | json }},
"priceValidUntil": "{{ 'now' | date: '%s' | plus: days_product_price_valid_until | date: '%Y-%m-%d' }}",
"priceSpecification": {
"@type": "PriceSpecification",
"price": {{ variant.price | divided_by: 100.0 | json }},
"priceCurrency": {{ cart.currency.iso_code | json }},
"valueAddedTaxIncluded": true
},
{%- if product.metafields.product.sku != blank -%}
"sku": {{ product.metafields.product.sku | json }},
{%- endif -%}
{%- if shop.refund_policy.body != blank -%}
"hasMerchantReturnPolicy": {
"merchantReturnLink": {{ shop.refund_policy.url | prepend: request.origin | json }}
},
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
"shippingDetails": {
"shippingSettingsLink": {{ shop.shipping_policy.url | prepend: request.origin | json }}
},
{%- endif -%}
"url": "{{ shop.url }}{{ product.url }}?variant={{ variant.id }}"
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
],
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"name": {{ product.title | json }},
"description": {{ product.description | strip_html | json }},
"category": {{ product.type | json }},
"url": "{{ shop.url }}{{ product.url }}",
"image": {
"@type": "ImageObject",
"url": "https:{{ page_image | image_url: width: 1024 }}",
"image": "https:{{ page_image | image_url: width: 1024 }}",
"name": {{ page_image.alt | json }},
"width": "1024",
"height": "1024"
}
}
By adding collection-specific schema markup directly to your collection pages on Shopify you are providing rich information about the collection directly signally to search engines that the page is a collection but also providing key pieces of data that Google can display in results. We recommend including the following collection page structured data:
Here you can find an example code snippet of a collection page schema markup. Whilst you can use this template, we always recommend you to consult a professional before editing the code of your store.
{
"@context": "https://schema.org",
"@type": "CollectionPage",
"name": {{- collection.title | json -}},
"description": {{- collection.description | json }},
"url": "{{- shop.url }}{{- collection.url -}}",
"image": "{{- collection_image | remove: '&width=1024' -}}",
"mainEntity": {
"@type": "ItemList",
"itemListElement": [
{%- for product in collection.products -%}
{%- assign product_image = product.featured_image | image_url: width: '1024' -%}
{
"@type": "ListItem",
"position": {{ forloop.index }},
"item": {
"@type": "Product",
...
}
}{% if forloop.last == false %},{% endif %}
{%- endfor -%}
]
}
}
A review snippet is a short excerpt of a review or a rating from a review website, usually an average of the combined rating scores from many reviewers. When Google finds valid reviews or ratings markup, it may show a rich snippet that includes stars and other summary info from reviews or ratings. When combined with product schema Google will typically show star ratings and reviews within search results as a star and also on Google Shopping product cards. It's vital that reviews and ratings are honest otherwise you could be penalised with a manual action. We recommend including the following reviews structured data:
Here you can find an example code snippet of reviews schema markup. Whilst you can use this template, we always recommend you to consult a professional before editing the code of your store.
{
"@context": "https://schema.org",
{%- assign days_product_price_valid_until = 10 | times: 86400 -%}
"@type": "Product",
{%- liquid
assign reviews_average = product.metafields.custom.reviews_average | times: 1
assign reviews_count = product.metafields.custom.reviews_count | times: 1
-%}
{%- if reviews_average != blank and reviews_count > 0 -%}
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{ reviews_average }}",
"reviewCount": "{{ reviews_count }}"
}
{%- endif -%}
}
Adding schema about your business, known as organisation schema, helps Google to understand your business in better detail. This helps good understand what your business is about, and receive your social media platforms and contact information too - this helps Google validate you as a trustworthy company. We recommend including the following organisation structured data on all pages of your store:
Here you can find an example code snippet of organisation schema markup. Whilst you can use this template, we always recommend you to consult a professional before editing the code of your store.
{
"@context": "https://schema.org",
"@type": "Organization",
"name": {{ shop.name | json }},
{%- if shop.brand.logo -%}
"logo": {{ shop.brand.logo | image_url: width: shop.brand.logo.width | prepend: "https:" | json }},
{%- endif -%}
{%- if shop.brand.short_description -%}
"description": {{ shop.brand.short_description | json }},
{%- endif -%}
{%- if shop.brand.slogan -%}
"slogan": {{ shop.brand.slogan | json }},
{%- endif -%}
{%- if shop.brand.metafields.social_links.size > 0 -%}
"sameAs": [
{%- for social_link in shop.brand.metafields.social_links -%}
{{- social_link.last.value | json -}}{%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
],
{%- endif -%}
"url": {{ shop.url | append: page.url | json }}
}
Blog schema markup is great for giving search engines detailed information about your blog and the contents that it includes. When search engines like Google receive this information it helps them to accurately rank your article which can improve visibility in search results. We recommend including the following blog structured data:
Here you can find an example code snippet of blog page schema markup. Whilst you can use this template, we always recommend you to consult a professional before editing the code of your store.
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"mainEntityOfPage": "{{ shop.url }}{{ article.url }}",
"articleSection": {{ blog.title | json }},
"keywords": "{{ article.tags | join: ', ' }}",
"headline": {{ article.title | json }},
"description": {{ article.excerpt_or_content | strip_html | truncatewords: 25 | json }},
"dateCreated": "{{ article.created_at | date: '%Y-%m-%dT%T' }}",
"datePublished": "{{ article.published_at | date: '%Y-%m-%dT%T' }}",
"dateModified": "{{ article.updated_at | date: '%Y-%m-%dT%T' }}",
"image": {
"@type": "ImageObject",
"url": "https:{{ page_image | image_url: width: 1024 }}",
"image": "https:{{ page_image | image_url: width: 1024 }}",
"name": {{ page_image.alt | json }},
"width": "1024",
"height": "1024"
},
"author": {
"@type": "Person",
"name": "{{ article.user.first_name | escape }} {{ article.user.last_name | escape }}",
"givenName": {{ article.user.first_name | json }},
"familyName": {{ article.user.last_name | json }}
},
"publisher": {
"@type": "Organization",
"name": {{ shop.name | json }}
},
"commentCount": {{ article.comments_count }},
"comment": [
{%- for commentObj in article.comments limit: 5 -%}
{
"@type": "Comment",
"author": {{ commentObj.author | json }},
"datePublished": "{{ commentObj.created_at | date: '%Y-%m-%dT%T' }}",
"text": {{ commentObj.content | json }}
}{%- unless forloop.last -%},{%- endunless -%}
{%- endfor -%}
]
}
Adding schema markup and structured data to Shopify essential requires you to write the code you need as we've discussed earlier in the article, adding the code to each relevant page on your Shopify store, validating the code to ensure you've not made any mistakes and it's working correctly and running a final test of your website. Let's dive into those steps of adding schema markup to your Shopify store in a little more detail. Please note this should only be done by professional developers, mistakes can lead to your website breaking, inability to sell or negatively impact your marketing strategy.
Adding schema markup to a Shopify store, requires you to add some additional code to the template directly. So, the first step is to locate your store's theme code. You can do this by logging into the Shopify admin, clicking 'Online Store', then next to the store theme you wish to edit press the three dots and then finally press 'Edit Code'.
Next up, you need to find the correct template file for the page that you require. Typically you should add markup schema JSON with variables within it so that you can apply it to one template that will then be used to all pages with that template rather than completed for each individual. For example, if you want to add product schema, find the product.liquid or product-template.liquid file. If you want to add article schema, look for the article.liquid file.
Now you need to create the schema markup that you require for each page, you can use the example template we've given however it's important to review Google's documentation to ensure you are including all of the information you wish to use.
It's vital that you validate your schema markup to ensure that you have not made any mistakes. Google has provided two different validator tools for Schema Markup that help you identify any errors. You can use either Google's Schema Markup Validator to ensure your code is error-free or Google's Rich Results tool. This will help you identify any errors or issues that need to be fixed. Finally, use Google's Rich Results Test tool to test whether your page is error-free and eligible for product or merchant listing snippets.
Now it's time to add the schema code to the code files you found earlier. This involves adding a schema script tag with the “@context” and “@type” attributes, followed by the structured data properties that you require into the correct .liquid file, based on the schema type. Some examples include: Product schema into the product.liquid, Organisation schema into the header.liquid, Article schema into the article.liquid, or similar. Place it at the top of your chosen .liquid file and don’t forget to save.
Once you've added your structured data and schema markup to your Shopify code files, it's vital to conduct a final test. Firstly, head back to your Google Schema Markup Validator and Rich Result Tool and ensure that your URL passes the test without errors. Conduct a final review of Google's structured data documentation to ensure you are providing all the data you should. Lastly, test the website itself to ensure the code has not broken the user experience.
There you have it!
Now you can use the templates we've provided, or alternatively, you can leverage an online schema markup template generator to produce the code you need for your store. Note you will need to add dynamic variables as the values rather than the page names and details themselves.
To use these tools, simply work through the steps, adding the dynamic variables for each of the data points. You'll need to use variables from Shopify's liquid documentation.
Alternatively, there are a number of approved Shopify apps that you can use to automatically generate the schema markup for your store. Note this approach will attract a fee whereas if you complete it using the code then once implemented it's unlikely you'll need to update it frequently.
To use these apps, head to the Shopify app store, install the app and follow the steps.
Error-free and accurate schema markup is vital for search engines to fully understand your Shopify store. However, errors are common and you must double you've not made any mistakes. Common errors include:
Consult a professional and use validation tools to minimise the risk of errors. Google Search Console typically will alert you of any major scheme errors too.
By adding valid schema markup to your Shopify store, you are providing search engines will valuable data about each page of your website. This data allows search engines to rank your store in the most appropriate places, improve visibility and show your store in other search tools such as rich snippets and product tabs. The key benefits of adding schema markup and structured data to your store include:
Adding schema markup and structured data to your Shopify store is a critical step for merchants looking to improve their ecommerce marketing and achieve sustained growth. By leveraging schema types like JSON-LD and customizing block settings, you can ensure your storefront outputs accurate and detailed information to search engines, improving visibility and click-through rates. Whether you're using themes or building a headless storefront with Shopify CLI, schemas can be integrated anywhere, helping merchants showcase products, variants, bundles, and subscriptions effectively.
Shopify's flexibility, through features like the GraphQL Product APIs, storefront APIs, and Hydrogen, allows users to design tailored solutions that match their business needs. With blocks, presets, and schema %, you can customize your shop to handle inventory, discounts, and fulfillment accounting seamlessly. Community-driven tools like the Q&A forum topics and discussions provide troubleshooting suggestions and answers to common questions, while resources in English, 日本, français, and Brasil ensure accessibility for a global audience.
Integrating schema isn't just about SEO—it's a step towards better organization, improved field matches, and alignment with user expectations. By optimizing your schema fields and linking them with your promotions, videos, and events blog, you’ll connect better with people during key times, like the holiday season, and drive growth. Be sure to bookmark community resources and mark topics for easy reference during your trial or ongoing theme development.
With a focus on settings, blocks, and links, schema implementation can transform your Shopify store into a well-oiled machine for ecommerce success. Thanks to tools like metafields, webhooks, and RSS feeds, merchants can streamline their operations, print reports, and even enhance their fulfillment workflows. As you navigate schema types, from cache management to promoting events in your community blog, remember to adapt your store design for long-term results.
Bespoke Shopify Plus Websites