#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/e-commerce-product-page/variant-selection

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░████████████████████████████████████████████████████████████████████████████████████████████████████████████

#####   ######  #####    ###    #   #  ###  #   #  ######
##  ##  ##      ##  ##  ## ##   #   #   #   #   #  ##
#####   ####    #####   #   #   #   #   #   #   #  ####
##  #   ##      ##      ## ##    # #    #    # #   ##
##   #  ######  ##       ###      #    ###    #    ######

$ curl repovive.com/roadmaps/frontend-system-design-interview-prep/e-commerce-product-page/variant-selection

Repovive

Variant Selection - E-commerce Product Page | Frontend System Design Interview Prep | Repovive

Repovive.

Frontend System Design Interview Prep17 sections · 206 units12h total

Open in Course

Variant Selection

Size, color, and options

Variant selection affects price, availability, and images.

State management:

{
  selectedVariant: {
    color: 'blue',
    size: 'M'
  },
  availableVariants: [
    { color: 'blue', size: 'M', inStock: true, price: 49.99 },
    { color: 'blue', size: 'L', inStock: false, price: 49.99 }
  ]
}

UX considerations:

Show which variants are out of stock
Update price when variant changes
Update gallery for color variants
Disable add to cart if out of stock