https://github.com/thewakar22/shopify-schema-markup
A guide to help you implement schema code manually to your Shopify website without relying on any 3rd party add-ons.
https://github.com/thewakar22/shopify-schema-markup
json-ld schema-org shopify
Last synced: over 1 year ago
JSON representation
A guide to help you implement schema code manually to your Shopify website without relying on any 3rd party add-ons.
- Host: GitHub
- URL: https://github.com/thewakar22/shopify-schema-markup
- Owner: thewakar22
- License: mit
- Created: 2024-07-04T07:59:01.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-07-04T09:26:23.000Z (about 2 years ago)
- Last Synced: 2025-01-26T08:14:21.344Z (over 1 year ago)
- Topics: json-ld, schema-org, shopify
- Homepage:
- Size: 65.4 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shopify: Manual Schema Markup Implementation
This repo is an example for how to implement schema code manual to your Shopify website without any 3rd party add-ons.
# Schema Markup Implementation Guide
## Overview
This repository provides a step-by-step guide for implementing manual schema markup on your website. Schema markup helps search engines understand the content and context of your web pages, leading to better visibility in search results.
## Why I created this repo?
I’m an SEO expert, and one day, I decided to explore Shopify. My mission? To manually adding schema markup. Now, I’m not a coding pro or a Shopify expert, but I wanted to learn. So, let me explain more in detail.
🔍 The Problem: I needed to find information about implementing schema markup manually on Shopify. Most tutorials were outdated and complicated—they assumed everyone was a coding genius or talked about old stuff like “product.liquid.”
🛠️ My Solution: Started experimenting with something called “liquid variables.” It sounds fancy, but it’s just a way to get info from Shopify. I figured out which variables to utilise for product details.
📂 Navigating Files: The usual “product.liquid” file wasn’t around anymore. But after editing a bunch of liquid and json files, I stumbled upon “main-product.liquid” This was the secret sauce for adding schema markup manually.
## Getting Started
Follow these steps to get started with schema markup:
1. **Understanding Schema Markup:**
- This repo is specificaly dedicated for Product schema markup implementation with rating and review.
- using Judge Reveiw plugin for creating sample reviews.
2. **Adding Schema Markup:**
- Go to shopify admin and EDit Code.
- Locate "main-product.liquid" file to add the schema markup code.
- Copy the code provided below and implement schema markup using JSON-LD. For example:
```json
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{product.title}}",
"image": "{{ shop. url }}/cdn/shop/{{ product.featured_image }}",
"description": "{{page_description}}",
"brand": {
"@type": "Brand",
"name": "{{product.vendor}}"
},
"sku": {{ product.selected_or_first_available_variant.sku | json }},
"gtin13": {{ product.variants.first.barcode | json }},
"offers": {
"@type": "Offer",
"url": "{{ canonical_url }}",
"priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | replace:'+','%20' }}",
"priceCurrency": "{{shop.currency}}",
"price": "{{product.price | money_without_currency}}",
"availability": "https://schema.org/{% if product.selected_or_first_available_variant %}InStock{% else %}OutOfStock{% endif %}",
"itemCondition": "https://schema.org/NewCondition"
},
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "{{product.metafields.reviews.rating.value}}",
"ratingCount": "{{product.metafields.reviews.rating_count}}"
}
}
```
3. **Publishing Your Changes:**
- Save the edit and preview the page.
4. **Testing Your Markup:**
- Use Google's Structured Data Testing Tool to validate your schema markup (check resources below).
## Disclaimer
This is an work in progress repo, so I will keep updating it with more information after finishing more tests.
- Known issues with code
- If your product listing doesn’t have any reviews, you might encounter an error when testing with "Google Rich Snippets testing Tool".
- You’ll see some warnings because code is missing some values related to product listing.
- Every website is unique, like snowflakes! So, this solution isn’t one-size-fits-all. But hey, before you hit that “save” button, test everything out. Make sure your website doesn’t break. And remember, I’m not a coding wizard, so if things go haywire, it’s not my fault! 😅
## Resources
- Schema.org Validator:
- Rich Snippets Testing:
- Google's Structured Data Documentation: