Building Product Variant Pickers in Liquid & JavaScript

Variant pickers map option selections (size, color) to variant IDs via JavaScript. Liquid exposes product.options_with_values and product.variants JSON for client logic.

This guide targets search queries around variant picker shopify, product options liquid, swatches shopify. ADSPOC publishes these articles so merchants, freelancers, and developers in India can find authoritative answers without wading through outdated forum threads.

Use radio buttons or custom swatches. Update price, SKU, media, and add-to-cart form on change.

Shopify's ecosystem moves fast: Online Store 2.0, Checkout Extensibility, Markets, and B2B features change what "best practice" means each year. Treat this topic as part of your store's architecture—not a one-time checkbox.

Fashion stores need mobile-friendly swatches—44px touch targets minimum.

Indian shoppers expect mobile-first UX, UPI and COD options, WhatsApp support, and GST-compliant invoicing. Any Shopify implementation that ignores these signals loses conversions even if the underlying code is technically correct.

Selling unavailable combinations without graying out options.

Theme Check, PageSpeed Insights, and Shopify's admin analytics exist to catch these issues before they cost revenue. Schedule quarterly reviews—especially before Diwali, Republic Day sales, and Black Friday/Cyber Monday if you sell globally.

1. Output variants JSON 2. Build option UI 3. Implement selection logic 4. Update URL ?variant= 5. Sync featured media 6. Handle single-variant products

Document decisions in your theme README or Notion so future developers (or your future self) understand why settings were configured a certain way. ADSPOC delivers this documentation with every client handoff.