---
title: "AI variant routing: the Shopify color and size matrix"
description: "How AI engines navigate Shopify variant matrices: variant URLs, per-variant availability, and routing shoppers to the right color and size."
url: https://nivk.com/blogs/ai-variant-routing-shopify-color-size-matrix/
canonical: https://nivk.com/blogs/ai-variant-routing-shopify-color-size-matrix/
author: "Lawrence Dauchy"
authorUrl: https://www.linkedin.com/in/vibecoding/
published: 2026-06-04
updated: 2026-06-04
category: "Technical GEO"
tags: ["variant-routing", "color-size-matrix", "per-variant-offers", "variant-urls", "vocabulary-consistency"]
lang: en
---

# AI variant routing: the Shopify color and size matrix

> **TL;DR** AI engines fail variant questions when combinations have no URLs, schema asserts one availability for forty combos, and color names disagree across copy. Fix routing with three moves: anchor options to real ?variant= links in HTML, publish an Offer per variant with live availability, and use one consistent name per color everywhere.

A shopper asks ChatGPT for "that jacket in olive, size medium" and the engine faces a routing problem: your product exists as one page wearing forty variant faces, and the data that distinguishes olive-medium from black-small often lives only in a JavaScript matrix the crawler never executed. AI variant routing is the discipline of making each sellable combination addressable, parseable, and honestly stocked, so the answer lands the shopper on the right variant instead of a generic page or a competitor.

## Why do variant matrices confuse AI engines?

Three structural reasons. URLs: most themes swap variants client-side, so olive-medium has no address of its own, and an engine can only cite the parent. Data: per-variant price and availability live in a JSON blob the theme reads but the parser may not, so the engine knows the jacket exists but not whether your size does. And language: "olive" in your admin, "army green" in the description, and "khaki" in a review read as three different products to a matching algorithm.

| Routing element | What engines need | Common Shopify failure |
| --- | --- | --- |
| Variant URLs | ?variant= links in crawlable HTML | Swatches swap state with no links |
| Per-variant availability | Offer per variant in schema | One availability for all forty combos |
| Color vocabulary | One name used everywhere | Admin, copy, and alt text disagree |
| Size facts | Size guide as parseable table | Modal-only charts engines never see |
| Variant imagery | Alt text naming color and variant | "IMG_2041" tells routing nothing |

## How do you give variants addresses?

Use the variant query parameter as a real link layer: each swatch and size option anchored with an href to ?variant=ID, present in the HTML response, even if JavaScript enhances the experience afterward. Google's [JavaScript SEO basics](https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics) explain the underlying gap: state changes without URLs are invisible to crawling, links are not. Engines and shoppers can then land on the exact combination, and your analytics can finally see which variants AI answers route to. The crawl-side mechanics, what HTML-first bots see when themes go JS-only, are detailed in [AI crawling and Shopify JavaScript variants](/blogs/ai-crawling-shopify-javascript-variants/), and the swatch-specific failure has its own fix guide in [fixing color swatch JavaScript blocking](/blogs/fix-color-swatch-javascript-blocking-sge/).

## What does per-variant schema look like?

One [Product](https://schema.org/Product) with an offers array carrying an Offer per variant: SKU, the variant's price, and its own availability, so "is the medium in stock" has a machine-readable answer distinct from the smalls and larges. Google's [product structured data documentation](https://developers.google.com/search/docs/appearance/structured-data/product) covers the identifier and availability fields shopping surfaces read; the implementation detail that matters most is updating the per-variant availability at inventory speed, because a stale "InStock" on a sold-out size is the exact wrong answer that burns a customer.

Vocabulary discipline completes the layer: pick one name per color and use it in the option, the copy, the alt text, and the schema. Models match strings before they match concepts, and consistency is free.

## How does size guidance plug into routing?

The size half of the matrix fails differently: shoppers ask "does it run small" and "which size for a 32 inch waist", and the answer material sits in a modal or an image. Publish the size chart as a real HTML table on the page and state fit behavior in a sentence, which gives the engine a routable answer and feeds the same data your variant schema asserts. The visual-parsing angle, getting AI vision to read charts at all, is covered in [getting AI vision to read Shopify size guides](/blogs/getting-ai-vision-to-read-shopify-size-guides/).

Categories with hard compatibility constraints push this further: a part either fits or it does not, and the routing rules for that world are in [auto parts fitment for generative SEO](/blogs/auto-parts-fitment-generative-seo-shopify/).

## How do you verify the routing works?

Curl a PDP and check three things in the raw response: variant links present, per-variant offers in the JSON-LD, and the size table as text. Then run routing prompts monthly: "[product] in [color] size [X] in stock", "[product] sizing for [measurement]", across the major engines, and log whether answers name the right variant and current availability. A wrong-variant answer almost always traces to a missing link layer or stale schema, both fixable the same day.

Nivk.com monitors variant-level prompts for Shopify stores, flags answers that cite sold-out or wrong combinations, and maps each miss to the PDP layer, links, schema, or vocabulary, that caused it.

## Frequently asked questions

### What is the best way to make Shopify variants visible to AI engines?

Anchor every variant option to a real ?variant= URL in the HTML, publish an Offer per variant with its own availability, and keep one consistent name per color across copy, options, and alt text. Those three moves cover most routing failures.

### Do variant URLs create duplicate content problems?

No, when the variant parameter canonicalizes to the parent product. Engines treat the variants as views of one product while still being able to route shoppers to the exact combination.

### Why does ChatGPT say my product is in stock when one size sold out?

Because your schema asserts one availability for the whole product. Move to per-variant offers with live availability and the engines inherit the distinction within their next crawl or fetch.

### How many color names is too many for one color?

Two. The moment marketing copy invents a second name for the same swatch, matching weakens. Keep the poetic name if you must, but pair it with the plain color word in the same sentence.

---

Source: https://nivk.com/blogs/ai-variant-routing-shopify-color-size-matrix/
Author: Lawrence Dauchy — https://www.linkedin.com/in/vibecoding/