⚙️ Product Configuration

Swatch, size, and quantity UI patterns. Production PDPs use Magento/Hyva native swatches; the patterns below illustrate visual state only.

🎭 Color Swatch Patterns

Color Selection

Select Color:

Selected:

Size Selection

Select Size:

Selected:

Quantity Selector

📝 Pattern

<div x-data="{ selected: null, pick(id) { this.selected = this.selected === id ? null : id } }" >
  <button @click="pick('red')" :class="selected === 'red' ? 'ring-2' : ''">Red</button>
</div>

⚡ Production PDP Swatches

The patterns above illustrate visual state. Real configurable-product swatches on PDPs and category listings are rendered by Magento/Hyva native:

Factory: window.initDeferredListingConfigurableSwatchOptions(productId) in Magento_ConfigurableProduct/web/js/configurable-options.js

Template: app/design/frontend/Sparkles/main/Magento_Swatches/templates/product/listing/renderer.phtml

Backing code: HyvaCoreCommerce/Block/Swatches/Product/Renderer/Listing/Configurable.php + SwatchDataService + server-rendered product payload JSON.