Shopify Knowledge Base

Issue Guide

Shopify says select a variant when one is already selected

Why Shopify can reject Add to cart even after a shopper selects a variant, and how to isolate product-form, theme, and app failures.

Symptom

A shopper chooses an available size or colour, but Add to cart stays disabled, shows a selection error, or sends a 422 response.

Start with these checks

  • 01Test a single-variant product and a multi-option product in a clean theme copy.
  • 02Inspect the cart/add request and confirm it contains the selected variant ID.
  • 03Disable storefront apps that replace selectors, bundles, swatches, or product forms.

When Shopify says a shopper must select a variant even though the page shows one selected, the visual state and the submitted product form have fallen out of sync. The button is rarely the real problem.

Shopify's cart endpoint needs a valid variant ID. If theme or app JavaScript never writes that ID into the form, the request fails or the theme blocks submission before it reaches Shopify.

Why Shopify asks for a variant twice

A custom swatch can appear active while the hidden variant field is blank or stale. This often happens on first page load, after theme customisation, or when a product-option app replaces part of the native picker.

Shopify documents that cart additions identify the exact variant through an id value. A 422 response therefore points to the request payload or availability, not merely the button's appearance.

  • Selected styling without a matching variant ID
  • A change listener that does not run on initial load
  • App code replacing or clearing the native product form
  • An unavailable variant left in a stale quick-add component

How to identify the failing layer

Reproduce the failure with developer tools open and inspect the request to /cart/add.js. Confirm that the payload contains the current variant ID, then compare the same product in an uncustomised theme copy.

If the clean theme works, isolate app embeds and injected scripts before rewriting the product form. If all themes fail, verify product availability and Online Store publishing.

  • Compare the active option with the form's hidden id value
  • Read the JSON description returned with any 422 response
  • Test without swatch, bundle, subscription, or personalisation apps
  • Repeat on product page, featured product, and quick-add surfaces

When the variant picker needs rebuilding

A one-line event trigger can hide the symptom, but it does not fix a product form with multiple owners. The durable solution keeps the selected option, URL, price, media, availability, and submitted variant ID synchronized through one predictable state path.

This is a focused theme fix, not a reason to redesign the store. It belongs beside the other product-page fixes in our task library and the wider guide to mobile PDP conversion problems.