Keeping Sneaker Size and Purchase State in Sync

Context

Kick Game's sneaker catalog exposed a deceptively difficult product page problem. A shopper chose a shoe size, but that choice carried much more than a label. It identified a Shopify variant with its own price, original price, stock quantity, availability state, shipping treatment, URL, and pickup availability. The same catalog also served regional sizing, so a product could present UK, EU, and US labels for one underlying variant.

The interface had to preserve a simple shopping action while respecting that richer contract. Once a shopper chose a size, every dependent part of the product page needed to describe the same variant. A stale price, an incorrect sold out state, or pickup information from the previous selection would create a contradictory purchase path.

My role

I worked in the existing Shopify theme rather than changing the upstream catalog or Shopify's inventory services. My scope covered the Liquid and Alpine.js behavior on the product page: parsing regional size labels, deciding which variants remained visible, updating selection state, controlling the purchase button, and refreshing the pickup section.

The inherited theme supplied the product form, cart drawer events, storefront data, and Shopify section endpoints. I connected those surfaces around one selected variant while leaving inventory, payments, and fulfillment with Shopify and the store's existing operations.

The actual challenge

The straightforward version of a size selector assumes one visible label maps cleanly to one purchasable variant. This catalog broke that assumption in several ways.

First, regional labels were encoded in variant titles and had to be presented according to the storefront region. Second, some products contained more than one variant with the same UK size but different EU sizes. Showing only the UK value made those options indistinguishable. Third, Shopify's native available flag was not the only display rule. Two custom metafields recorded historically sold and sold out states, allowing selected unavailable variants to remain visible as explicit sold out choices while other unavailable variants stayed out of the selector.

Finally, selection affected components outside the size grid. Price, sale treatment, stock messaging, express shipping visibility, the URL, the purchase action, and pickup content all depended on the variant ID.

System design

I treated the Shopify variant ID as the authority and the size labels as views of that identity. Liquid prepared each option's data on the server, and a shared Alpine.js state object held the active variant fields in the browser.

The selector assigned the full state transition together:

// Illustrative version of the theme's selection contract.
selectVariant(option) {
  variantId = option.id
  labels = option.regionalSizes
  price = option.price
  comparePrice = option.comparePrice
  stock = option.stock
  soldOut = option.soldOut
  shippingEligible = option.shippingEligible
  refreshPickup(variantId)
}

This made the interaction easier to reason about. The displayed label could change with region, but the purchase and fulfillment surfaces continued to follow the same variant ID. The product URL was also replaced with a variant query value so the browser location reflected the selection.

Regional sizes without ambiguous choices

The selector built a regional size object for each variant from the title segments. It normally rendered the label for the active region. For UK shoppers, I added a targeted disambiguation rule: if the complete product data contained the same UK size more than once and the current option also had an EU value, the selector displayed that EU value in parentheses.

The distinction was conditional. Products with a unique UK size kept the compact presentation with one label. Products with a collision gained the second value needed to tell their variants apart. The selected variant ID still drove the form, so the extra label clarified identity without creating a second selection system.

The same selector excluded variants reserved for point of sale use and the separate preowned flow. That boundary kept this path focused on the standard sneaker purchase contract.

Availability and purchase state

I centralized the custom sold out calculation in a Liquid snippet and reused the same rule when rendering variant options and initializing the product page. An unavailable variant with either the historical sales or sold out metafield set remained visible, gained a crossed visual treatment, and set the page's isSoldOut state when chosen. An unavailable variant without those flags was skipped.

That distinction let the UI communicate a meaningful sold out size without presenting every unavailable catalog record. It also kept the call to action consistent. Before a selection, the button prompted the shopper to select a size. A purchasable selection exposed Add to Cart. A retained unavailable selection changed the button to Sold Out and prevented submission.

The selected price, original price, sale percentage, stock quantity, and shipping flag were assigned in the same change handler. The product information panel consumed those values for price treatment, stock copy, and express shipping visibility. The cart request then serialized the existing product form to Shopify's Cart AJAX endpoint and notified the inherited cart drawer after a response.

Pickup for the selected variant

Pickup could not be treated as static product information because Shopify exposes store availability for a specific variant. I added a pickup container to the product information area and watched the active variant ID. On initialization and after each variant change, the theme requested the pickup availability section for that variant, parsed the returned markup, and replaced both the preview and drawer content.

The section itself filtered Shopify's store availabilities to locations where pickup was enabled and the variant was available. The browser therefore refreshed a bounded fragment rather than reconstructing fulfillment rules on the client.

Result

I delivered one coordinated variant selection path across the product detail page, variant metafields, the product form and Cart AJAX flow, and Shopify pickup availability. One selection updated regional labels, pricing, stock messaging, shipping visibility, custom sold out state, the URL, purchase gating, and pickup content.

The purchase action moved through three clear prompts: Select Size, Add to Cart, and Sold Out. Duplicate UK sizes gained a conditional EU label, giving shoppers the extra detail needed to distinguish variants that would otherwise look identical.

Takeaway

A commerce selector is a state coordinator, even when the shopper experiences it as a row of sizes. Keeping one variant ID authoritative, deriving every dependent surface from it, and adding disambiguation only where the catalog requires it produced a clearer contract than letting price, availability, fulfillment, and cart behavior update independently.