How do I make product variants and stock readable for AI agents?

Where variant pickers lose AI agents

Browsing agents read a page through its text, its accessibility tree and screenshots. A picker that a person understands at a glance can carry no words at all. Anthropic's computer use docs note that some interface elements, such as dropdowns, can be tricky for the model to operate with the mouse.

Make the picker readable

1. 1

   Step 1: Label every option in text

   Use radio buttons or a native select with real labels. A swatch can stay visual, but its label must name the colour. Put the stock state in the label too.

   <fieldset>
     <legend>Size</legend>
     <input type="radio" id="size-s" name="size" value="S">
     <label for="size-s">S</label>
     <input type="radio" id="size-m" name="size" value="M" disabled>
     <label for="size-m">M, sold out</label>
   </fieldset>
   <p id="stock-status" aria-live="polite">Olive, size S: in stock, ships in 1 to 2 business days.</p>

2. 2

   Step 2: Give each variant a URL that preselects it

   Shopify themes already use ?variant= with the variant ID. Open one directly and check that the page shows that variant's price, stock and image before you click anything. Google requires this for variant markup.

3. 3

   Step 3: Write stock as words

   In stock, Only 3 left, Sold out, Back order: ships in 2 weeks, Pre-order: ships in March. A colour or an icon alone carries no meaning to an agent.

4. 4

   Step 4: Keep the default variant honest

   If the first variant is sold out, don't preselect it with no message. Preselect an available one, or say clearly that the selected option is sold out and which ones aren't.

Mark up variants as a ProductGroup

Google's variant markup groups variants under a ProductGroup. variesBy names the dimensions (Google supports colour, size, suggested age, suggested gender, material and pattern), hasVariant lists one Product per variant with its own sku or gtin, and productGroupID is the parent SKU. Each variant's offer carries its own price, URL and availability.

1. 1

   Step 1: On Shopify, write your own ProductGroup

   The theme's {{ product | structured_data }} leaves out variesBy, colour and size. Replace that line in the product section with your own JSON-LD, so the page doesn't carry two product groups. This version maps the first option to colour and the second to size; change it to match your options. It marks variants that keep selling at zero stock as BackOrder.

   <script type="application/ld+json">
   {
     "@context": "https://schema.org",
     "@type": "ProductGroup",
     "name": {{ product.title | json }},
     "productGroupID": {{ product.id | json }},
     "url": {{ product.url | prepend: request.origin | json }},
     "variesBy": ["https://schema.org/color", "https://schema.org/size"],
     "hasVariant": [
       {%- for variant in product.variants -%}
       {
         "@type": "Product",
         "name": {{ product.title | append: " - " | append: variant.title | json }},
         "sku": {{ variant.sku | json }},
         "color": {{ variant.options[0].name | json }},
         "size": {{ variant.options[1].name | json }},
         "offers": {
           "@type": "Offer",
           "url": {{ variant.url | prepend: request.origin | json }},
           "price": {{ variant.price | divided_by: 100.0 | json }},
           "priceCurrency": {{ cart.currency.iso_code | json }},
           "availability": "https://schema.org/{% if variant.available %}{% if variant.inventory_policy == 'continue' and variant.inventory_quantity <= 0 %}BackOrder{% else %}InStock{% endif %}{% else %}OutOfStock{% endif %}"
         }
       }{% unless forloop.last %},{% endunless %}
       {%- endfor -%}
     ]
   }
   </script>

2. 2

   Step 2: On WooCommerce, check what core outputs

   Core marks up a variable product as one AggregateOffer with a low and a high price. A URL that selects one variation gets that variation's offer with inProductGroupWithID. For full ProductGroup markup you need an SEO plugin that supports it or the woocommerce_structured_data_product filter.

3. 3

   Step 3: Test a variant URL

   Run a product URL and one ?variant= URL through Google's Rich Results Test, and check that each variant's price and availability match the page.

Check what the store exposes

Both platforms publish product data you can read without logging in. Compare it with what the page shows: if the data says a size is available and the page doesn't say so in words, an agent reading the page misses it.

# Shopify: variants with price (in cents) and available
curl -s https://yourstore.com/products/your-handle.js

# WooCommerce: public, unauthenticated Store API
curl -s 'https://yourstore.com/wp-json/wc/store/v1/products?stock_status=outofstock'

Checking stock and comparing two products are key shopping tasks in Aiscovery's AI agent test runs. Named AI agents try them on your store in a read-only browser, and the step screenshots show which option they picked and what they read. See how a test run works.