The Variant Challenge: When Schema Doesn’t Match Selected Options
This is the most complex price mismatch scenario: your ShoppingFeeder data accurately reflects variant-specific pricing, but your product page schema only shows information for the default variant. When customers (or Google’s crawlers) view different variants, the schema doesn’t update to reflect the selected option’s pricing.
Why Static Variant Schema Causes Problems
Most standard Shopify schema implementations use product.selected_or_first_available_variant, which defaults to the first variant in your product configuration. This creates issues when:
- Your feed contains separate entries for each variant with different prices
- Customers can select variants that have different pricing
- Google crawls your page when a non-default variant is selected or referenced
- Your product page URL includes variant parameters that don’t update the schema
Understanding Shopify’s Variant System
Shopify handles variants in several ways that affect schema implementation:
URL-Based Variant Selection: URLs like product-page?variant=123456789 should trigger schema updates for that specific variant.
JavaScript-Based Selection: Most themes use JavaScript to update pricing and availability when customers select different options.
Default Variant Display: Without specific variant selection, pages show the first available variant’s information.
The Dynamic Schema Solution
To properly handle variant-specific pricing that matches your ShoppingFeeder data, you need dynamic schema that updates based on the selected variant.
Implementation: Dynamic JSON-LD Updates
Step 1: Enhanced Base Schema
Replace or modify your existing product schema with this variant-aware version:
<script type="application/ld+json" id="product-schema">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ product.title | escape }}",
"description": "{{ product.description | strip_html | strip_newlines | escape }}",
"sku": "{{ current_variant.sku | default: product.selected_or_first_available_variant.sku }}",
"mpn": "{{ current_variant.barcode | default: product.selected_or_first_available_variant.barcode }}",
"brand": {
"@type": "Brand",
"name": "{{ product.vendor | escape }}"
},
"image": [
{% assign current_variant = product.selected_or_first_available_variant %}
{% if current_variant.featured_image %}
"{{ current_variant.featured_image | img_url: 'master' }}"
{% endif %}
{% for image in product.images limit: 5 %}
"{{ image | img_url: 'master' }}"{% unless forloop.last %},{% endunless %}
{% endfor %}
],
"offers": {
"@type": "Offer",
"url": "{{ shop.url }}{{ product.url }}{% if current_variant %}?variant={{ current_variant.id }}{% endif %}",
"priceCurrency": "{{ cart.currency.iso_code }}",
"price": "{{ current_variant.price | default: product.selected_or_first_available_variant.price | money_without_currency }}",
"priceValidUntil": "{{ 'now' | date: '%Y' | plus: 1 }}-12-31",
"availability": "{% if current_variant.available %}https://schema.org/InStock{% else %}https://schema.org/OutOfStock{% endif %}",
"itemCondition": "https://schema.org/NewCondition",
"seller": {
"@type": "Organization",
"name": "{{ shop.name | escape }}"
}
}
}
</script>Step 2: JavaScript for Real-Time Updates
Add this JavaScript to handle dynamic schema updates when customers select different variants:
<script>
function updateProductSchema(variant) {
const schemaScript = document.getElementById('product-schema');
if (!schemaScript || !variant) return;
const schemaData = {
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{ product.title | escape }}",
"description": "{{ product.description | strip_html | strip_newlines | escape }}",
"sku": variant.sku,
"mpn": variant.barcode,
"brand": {
"@type": "Brand",
"name": "{{ product.vendor | escape }}"
},
"image": [
{% for image in product.images limit: 5 %}
"{{ image | img_url: 'master' }}"{% unless forloop.last %},{% endunless %}
{% endfor %}
],
"offers": {
"@type": "Offer",
"url": "{{ shop.url }}{{ product.url }}?variant=" + variant.id,
"priceCurrency": "{{ cart.currency.iso_code }}",
"price": (variant.price / 100).toFixed(2),
"priceValidUntil": "{{ 'now' | date: '%Y' | plus: 1 }}-12-31",
"availability": variant.available ? "https://schema.org/InStock" : "https://schema.org/OutOfStock",
"itemCondition": "https://schema.org/NewCondition",
"seller": {
"@type": "Organization",
"name": "{{ shop.name | escape }}"
}
}
};
schemaScript.textContent = JSON.stringify(schemaData, null, 2);
}
// Listen for variant changes
document.addEventListener('DOMContentLoaded', function() {
// Hook into your theme's variant selection mechanism
// This example assumes standard Shopify theme structure
const variantSelectors = document.querySelectorAll('[name="id"]');
variantSelectors.forEach(selector => {
selector.addEventListener('change', function() {
const selectedVariantId = this.value;
const variant = {{ product.variants | json }}.find(v => v.id == selectedVariantId);
if (variant) {
updateProductSchema(variant);
}
});
});
});
</script>Handling URL-Based Variant Selection
For direct variant URLs (like those in your ShoppingFeeder), ensure your schema reflects the URL parameter:
{% assign url_variant_id = false %}
{% if request.path contains '?variant=' %}
{% assign url_variant_id = request.query_parameters.variant | plus: 0 %}
{% endif %}
{% if url_variant_id %}
{% assign current_variant = product.variants | where: 'id', url_variant_id | first %}
{% else %}
{% assign current_variant = product.selected_or_first_available_variant %}
{% endif %}Testing Variant-Specific Schema
Test Each Variant Individually:
- Construct URLs for each variant:
your-product-page?variant=VARIANT_ID - Test each URL in Google’s Rich Results Test
- Verify that pricing, SKU, and availability match your ShoppingFeeder data for each variant
- Confirm that JavaScript updates work when selecting variants on the page
Monitoring and Troubleshooting
Common Issues:
- JavaScript conflicts with theme variant selection
- Price formatting inconsistencies between variants
- Schema updates not triggering on variant selection
- URL parameter handling not working correctly
Solutions:
- Test with different themes or in incognito mode to identify conflicts
- Ensure consistent price formatting across all variants
- Add console logging to debug JavaScript execution
- Verify URL parameter parsing with browser developer tools
With proper variant-specific schema implementation, your product pages will accurately communicate the same detailed, variant-specific information that ShoppingFeeder provides in your feed, eliminating price mismatch errors for complex product catalogs.