How to add schema markup to Shopify: A Complete Guide
If you're aiming to boost your Shopify store’s visibility on search engines like Google or ChatGPT, implementing schema markup is a powerful and often overlooked strategy. Schema markup is a special kind of structured data that helps search engines better understand your site’s content resulting in richer, more informative search listings. From displaying product ratings and pricing to breadcrumbs and FAQs, schema can significantly improve your store’s click-through rates and credibility.
In this complete guide, we’ll walk you through everything you need to know about adding schema markup to your Shopify store, including what schema is, why it’s important, how Shopify handles it by default, and step-by-step methods (manual and via apps) to add both static and dynamic schema effectively.
Let’s get started.
What is Schema Markup?
Schema markup is a code that you add to your website to help search engines provide more informative and relevant results for users. It provides search engines with detailed information about your content, such as product details, reviews, pricing, and more. By implementing schema markup, you can improve your site's visibility and attract more qualified traffic. For example here how it looks in the product page liquid file(main-product.liquid).
<script type="application/ld+json">
{{ product | structured_data }}
</script>
Why is Schema Markup Important for Shopify Stores?
For Shopify store owners, adding schema markup can have a significant impact on their search engine rankings. By providing search engines with structured data, you make it easier for them to understand and index your content. This, in turn, can lead to higher visibility in search results, increased click-through rates, and ultimately, more conversions.
Why is it important for SEO?
Schema markup doesn’t directly boost your site ranking but it plays a vital role in improving site visibility, click through rate(CTR) on search engine results. Here is why it's important.
-
Improves Click-Through Rates (CTR)
-
Helps Google Understand Your Content
-
Builds Trust & Authority
Shopify Schema Markup types
There are different types of schema markup. Below is the list of all available schema is Shopify.
- Product
- Offer
- Organization
- AggregateRating
- Review
- FAQPage
- Article
- BreadcrumbList
- LocalBusiness
- Website
Product Schema
For product schema add this code into product.liquid file.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
BreadcrumbList Schema
Breadcrumb schema is also very improvement it can very from page to page for example to add schema in different pages follow these steps.
For Collection Template
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "{{ collection.title }}",
"item": "{{ shop.url }}{{ collection.url }}"
}
]
}
</script>
For Product Template
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "{{ product.title }}",
"item": "{{ shop.url }}{{ product.url }}"
}]
}
</script>
For Page Template
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "{{ shop.url }}"
},
{
"@type": "ListItem",
"position": 2,
"name": "{{ page.title }}",
"item": "{{ shop.url }}{{ page.url }}"
}]
}
</script>
Review Schema
Review schema is the type of Sructure data that helps serach engines to show the review schema in the google rich results. Review schema is very much improved for product pages here;s how it will look in google search results.
How Shopify Handles Schema By Default
Shopify provides basic structure data support in themes, especially in Online Store 2.0 like Dawn.Basic structure data doesn’t include Shipping details etc. Custom structure data implementation provides more flexibility.
Methods of Schema Markup.
There are two methods for adding Shopify Schema in your Shopify store.
- Add schema markup manually.
- Add schema markup using Shopify apps.
Shopify Static Schema Markup vs Dynamic Markup Schema
Static Schema
Static schema uses hardcoded values in JSON-LD. The content doesn’t update automatically unless you update it manually. This is useful for some pages like about us FAQs page where content don't updates on regular basis.
Pros:
- It is easy to implement.
- It is good for fixed/static content like About us pages.
Cons:
- Outdated and inaccurate structure data.
- Not suitable for pages like product, collection, articles etc.
How to add a Static Schema
Static schema is the hard coded schema values that you add in the desired page. Its settings and attributes remains fixed unless you manually updates it. To add the static schema in Shopify follow these steps.
Step 1: Navigate to Online Store > Themes > Edit Code
Step 2: Navigate to the main-product.liquid file (different from theme to theme)
Step 3: Add following code there
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "The 3p Fulfilled Snowboard",
"url": "https:\/\/test-shop-schema-markup.myshopify.com\/products\/the-3p-fulfilled-snowboard",
"image": [
"https:\/\/test-shop-schema-markup.myshopify.com\/cdn\/shop\/files\/Main_b9e0da7f-db89-4d41-83f0-7f417b02831d.jpg?v=1753344646\u0026width=1920"
],
"description": "",
"sku": "sku-hosted-1",
"brand": {
"@type": "Brand",
"name": "Test Shop Schema Markup"
},
"offers": [
{
"@type" : "Offer","sku": "sku-hosted-1","availability" : "http://schema.org/InStock",
"price" : 2629.95,
"priceCurrency" : "PKR",
"url" : "https:\/\/test-shop-schema-markup.myshopify.com\/products\/the-3p-fulfilled-snowboard?variant=52590250197364"
}
]
}
</script>
Step 4: After adding schema click save.
Dynamic Schema
Dynamic schema uses shopify variables or metafields to populate dynamic content. It automatically updates the changes from Shopify admin like Pricing, Inventory, product description etc.Dynamic data in schema depends on the Shopify liquid variables for your product, collection,articles and other store data. It automatically updates data like title, price, inventory etc. This ensures your schema markup stays accurate without needing manual edits every time some update or changing happens in your store.
How to add Dynamic Schema
Dynamic schema is used for pages like product, collection etc where data can be change in future for example product data when you update the product details like description, price etc it automatically updates in the product schema. You don;t need to manullay update each product.
Step 1: Navigate to Online Store > Themes > Edit Code
Step 2: Navigate to the main-product.liquid file (different from theme to theme)
Step 3: Add following code there
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
Step 4: After adding schema, click save.
How to generate a Shopify markup schema
There are different tools available to generate schema markup. Use schema.org to generate schema for different pages. Different pages have different types of schema. Decide which schema you need based on the page. Follow this Guide to generate schema markup.
Step 1: Choose the page whose schema you want to add
Step 2: Add necessary details for respective page
Step 3: Copy the schema from the tool and paste into your .liquid file for example (main-product.liquid).
Step 4: File names can be vary from theme to theme.
How to validate Shopify markup schema
After adding Shopify schema markup to your Shopify store it's essential to validate that search engines can read and use it effectively. To validate the schema follow these steps. Here is the final result, check the GIF below to see how it will look before we go through the steps.
Method 1: Use Google’s Rich Results Test
Google rich results gives you the detailed report about your schema applied. you can see any suggestions or improvements that needs to be done to improve your schema. Be carefull to add the schema because it plays a vital rule in SEO optimizations.
Step 1: Go to the richtext validator.
Step 2: Add the url of the page like the Product page.
Step 3: Click the Test URL button.
Step 4: Validate the detected schema types and fix any errors or warnings.
Step 5: You can paste your raw code to test your JSON-LD schema snippet.
Step 6: Liquid variables in the direct code not actually understood by the validator you have to convert this dynamic data into static one to test that each attribute is working fine. No error or warning occurs. For example you can extract the static schema by following these steps for your product page
Step 7: After adding the schema go to your website.
Step 8: Right click on the website and click Inspect
Step 9: Press CTRL + F on Windows or Command + F on Mac
Step 10: Search for application/ld+json in the search bar and look for the json file with schema code of type product
Step 11: Copy the whole script file and repeat the same process mentioned above.
Method 2: Schema Markup Validator
This is also the website where you can test your schema using the url or directly add the code snippet to test the schema. Follow these steps to test the schema using the markup Validator.
Step 1: Navigate to Schema Markup Validator Website.
Step 2: Paste your page URL or raw JSON-LD snippet for validation.
Step 3: Click Run Test.
Step 4: Check for any issues and warnings and fix them.
Steps for Schema Markup
For Product Page
Follow these steps to add product schema in the product template.
Step 1: Navigate to Online Store > Themes > Edit Code
Step 2: Navigate to the main-product.liquid or product-template.liquid file.
Step 3: Use schema markup generator tools to generate a code snippet file with the required fields/attributes.
Step 4: Copy the JSON+ld schema code and paste into the main-product.liquid file.
Step 5: To make it dynamic add Shopify variables instead of fixed text or fields.
Step 6: Paste this code in your theme file.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": {{ product.title | json }},
"url": {{ request.origin | append: product.url | json }},
{% if seo_media -%}
"image": [
{{ seo_media | image_url: width: 1920 | prepend: "https:" | json }}
],
{%- endif %}
"description": {{ product.description | strip_html | json }},
{% if product.selected_or_first_available_variant.sku != blank -%}
"sku": {{ product.selected_or_first_available_variant.sku | json }},
{%- endif %}
"brand": {
"@type": "Brand",
"name": {{ product.vendor | json }}
},
"offers": [
{%- for variant in product.variants -%}
{
"@type" : "Offer",
{%- if variant.sku != blank -%}
"sku": {{ variant.sku | json }},
{%- endif -%}
{%- if variant.barcode.size == 12 -%}
"gtin12": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 13 -%}
"gtin13": {{ variant.barcode }},
{%- endif -%}
{%- if variant.barcode.size == 14 -%}
"gtin14": {{ variant.barcode }},
{%- endif -%}
"availability" : "http://schema.org/{% if variant.available %}InStock{% else %}OutOfStock{% endif %}",
"price" : {{ variant.price | divided_by: 100.00 | json }},
"priceCurrency" : {{ cart.currency.iso_code | json }},
"url" : {{ request.origin | append: variant.url | json }}
}{% unless forloop.last %},{% endunless %}
{%- endfor -%}
]
}
</script>
For Collection Page
Follow these steps to add schema markup in the collection template.
Step 1: Navigate to Online Store > Themes > Edit Code
Step 2: Navigate to the main-collection.liquid or main-collection-product-grid.liquid file(Different from theme to theme)
Step 3: Use schema markup generator tools to generate a code snippet file with the required fields/attributes.
Step 4: Copy the JSON+ld schema code and paste into the main-product.liquid file.
Step 5: To make it dynamic add Shopify variables instead of fixed text or fields.
Step 6: Paste this code in your theme file.
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "CollectionPage",
"mainEntity": {
"@type": "ItemList",
"name": {{ collection.title | json }},
{% if collection.description != blank %}
"description": {{ collection.description | strip_html | json }},
{% endif %}
"url": {{ collection.url | prepend: request.origin | json }},
"numberOfItems": {{ collection.products_count }},
{% if collection.products_count > 0 %}
"itemListElement": [
{% for product in collection.products %}
{
"@type": "Product",
"name": {{ product.title | json }},
"description": "{{ product.description | strip_html | strip_newlines | escape }}",
"image": {{ product.featured_image | img_url: '1024x1024' | prepend: 'https:' | json }},
"url": {{ product.url | prepend: request.origin | json }},
"sku": {{ product.variants.first.sku | json }},
"offers": {
"@type": "Offer",
"priceCurrency": {{ shop.currency | json }},
"price": {{ product.price | divided_by: 100 }},
"availability": "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
"priceValidUntil": "{{ last_day_of_year }}",
"hasMerchantReturnPolicy": {
"@type": "MerchantReturnPolicy",
"returnPolicyCategory": "https://schema.org/MerchantReturnFiniteReturnWindow",
"url": "{{ shop.url }}/pages/returns-exchange",
"applicableCountry": "PK",
"merchantReturnDays": 28,
"returnMethod": "https://schema.org/ReturnByMail",
"returnFees": "https://schema.org/FreeReturn"
},
"shippingDetails": {
"@type": "OfferShippingDetails",
"shippingRate": {
"@type": "MonetaryAmount",
"value": "0.00",
"currency": "{{ shop.currency }}"
},
"deliveryTime": {
"@type": "ShippingDeliveryTime",
"handlingTime": {
"@type": "QuantitativeValue",
"minValue": 1,
"maxValue": 2,
"unitCode": "DAY"
},
"transitTime": {
"@type": "QuantitativeValue",
"minValue": 2,
"maxValue": 5,
"unitCode": "DAY"
}
},
"shippingDestination": {
"@type": "DefinedRegion",
"addressCountry": "PK"
}
}
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "5",
"ratingCount": "475",
"reviewCount": "475",
"bestRating": "5",
"worstRating": "1"
}
}{% unless forloop.last %},{% endunless %}
{% endfor %}
]
{% endif %}
},
"breadcrumb": {
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": {{ shop.url | json }}
},
{
"@type": "ListItem",
"position": 2,
"name": {{ collection.title | json }},
"item": {{ collection.url | prepend: request.origin | json }}
}
]
}
}
</script>
Add schema markup using Shopify apps
Don't want to touch code. Install Shopify apps from shopify webstore and add schema in your website. There are different apps available to perform that for you. Follow these steps to add Shopify apps for schema.
Step 1: Navigate to Shopify Admin > Apps
Step 2: Click on the all recommended apps button.
Step 3: Click on the Shopify app store link.
Step 4: Search for the app you want to install for example Sherpas: Smart SEO
Step 5: Click on the install button.
Step 6: Again click on Install button.
Step 7: Click on Manage.
Step 8: Make sure the app is checked true and click Save.
Step 9: Navigate to the JSON-LD tab and then customize according to your need.
Popular apps for schema markup are as follows.
Bottom Line
Adding schema markup to your Shopify store is one of the most effective ways to improve your search presence, enhance how your pages appear on Google and ChatGPT, and ultimately boost your store’s credibility and click-through rates. Whether you use static or dynamic schema, implement it manually, or rely on Shopify apps, structured data helps search engines better understand and present your content. By following this guide and validating your markup properly, you'll ensure your store is optimized for rich results, setting you apart from competitors.
If you need help implementing schema markup or fixing errors in your Shopify theme, feel free to contact Ecomx Agency.
Frequently Asked Questions
Live Chat