variant-selection

Official

Master variant selection on product pages

Authorsaleor
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps product teams and developers reason about how product attributes map to concrete variants, ensuring the correct variant is added to the cart and the UI accurately reflects availability and discounts.

Core Features & Use Cases

  • Understand and modify how variant selectors work on product pages, ensuring user selections resolve to valid variants.
  • Debug Add to Cart readiness by validating that all required attributes are selected and that the chosen variant exists.
  • Visualize discount opportunities at the option level and display them as badges on the variant options.

Quick Start

Identify the chosen color and size on a product page, then determine the matching variant to update the UI and Add to Cart state.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: variant-selection
Download link: https://github.com/saleor/storefront/archive/main.zip#variant-selection

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.