Selecting one preowned pair inside a shared product

Context

A new sneaker can usually be represented by a size, price, and stock state. A preowned sneaker carries facts about the individual item. Two pairs in the same size can differ in condition, packaging, visible defects, price, and photography. Treating those pairs as interchangeable quantity would hide information a shopper needed before choosing one.

Kick Game's catalog kept these items inside a shared Shopify product. Preowned entries were identifiable variants, while a variant metafield supplied structured data about each physical pair. The product page needed to turn that model into a comprehensible choice without replacing the inherited product form or splitting every pair into an unrelated browsing journey.

My role

I built the product page selection system that interpreted the existing variant titles and preowned metadata. My work covered grouping pairs by size, exposing condition filters, creating item cards, presenting the selected pair's disclosures, and switching the product gallery to images for that pair.

I worked within the inherited Shopify product, variant, and product form boundaries. The catalog operation supplied the pair data, and I turned that data into the selection experience for customers.

The actual challenge

The catalog had two identities that the interface needed to preserve. Size was the first identity because it narrowed the useful set of inventory. The individual pair was the second because its metadata and imagery described the actual item for sale.

A flat variant grid would force the shopper to decode long titles or open options one by one. A selector based only on size would collapse distinct physical items into a misleading choice. The interface also had to manage reversibility: moving back from a selected pair needed to restore the prior choice list and the product's original imagery.

The metadata introduced another boundary. Liquid could read the variant metafield while rendering, but the pair cards were created in response to browser interaction. Data rendered on the server therefore had to enter browser state in a form that Alpine.js could access when the shopper chose a size.

System design

I used a flow with three stages that matched the two catalog identities while reserving a final confirmation state:

At render time, the theme collected available variants marked as preowned and stored their IDs, titles, and metafield payloads in an Alpine store. The selector sorted the broader variant list by parsed UK size. A size choice then matched the relevant preowned titles and built a card for each individual variant in that group.

The core lookup can be expressed as this illustrative pseudocode:

const candidates = preLovedVariants
  .filter((variant) => variant.size === selectedSize)
  .map((variant) => ({
    id: variant.id,
    image: variant.metadata.images[0],
    condition: findProperty(variant.metadata, "condition"),
    price: variant.price
  }))

The identifiers are simplified here, but the boundary is the same: Shopify variant identity selected the record, while the metafield supplied the description for that item.

Turning metadata into a choice

The metafield payload contained an image collection and typed properties. I parsed those properties by type rather than relying on a fixed display position. The selected card extracted condition, packaging, and every defect entry, then presented those values with the variant price.

That made the interface resilient to the order of properties in the payload and allowed multiple defects to remain visible. The intermediate cards stayed compact, using the first image, condition, and price to help comparison. The final state expanded the disclosure once the shopper had chosen a specific pair.

I also added condition filtering for the pair comparison stage. The filter operated on the rendered pair cards and supported the condition labels present in the product page flow. Region controls were visible while choosing a size, then hidden once the interaction moved into comparing individual pairs, where condition was the more relevant distinction.

Keeping selection and media together

Pair photography was part of the product description, so it had to move with selection. Before changing the gallery, I captured the original product image URLs. Choosing an item replaced the existing gallery sources with that pair's metafield images. Later changes added extra image elements when a pair carried more images than the base gallery could hold.

The back path reversed that operation. Returning from the selected pair state restored the original image sources, removed dynamically added pair images, hid the purchase controls for the unconfirmed state, and reopened the pair comparison list. Returning to the size level reset the selection flag and swapped the condition controls back to regional sizing.

This behavior linked the disclosure card and the gallery to the same item choice. It prevented the page from showing one pair's condition beside another pair's photography after navigation through the selector.

Evolution

I developed the dedicated flow from January through May 2024, moving from duplicate preowned variants to cards backed by metafields, shared Alpine state, staged desktop and mobile journeys, condition filters, product form selection, and imagery for each pair.

A later theme revision retired the selector from the active product page. This story captures the completed product model and interaction from that period.

Result

I delivered an interface with three stages that moved from size to matching pairs to one selected item. The final card kept four disclosures together: condition, packaging, defects, and price. Gallery switching for each pair, restoration of the base gallery, and support for additional images kept the visual record aligned with the chosen item.

Those capabilities joined four platform areas: the Shopify variant and metafield model, the product detail page, the media gallery, and product form selection. They made the difference between product data and data for a physical item explicit in the interface.

The result was a product page that treated each preowned pair as an individual piece of inventory while preserving the shared Shopify product. Shoppers could narrow by familiar size and condition labels, then make the final choice with the specific pair's facts and photography in view.

Takeaway

When inventory units have meaningful individual differences, size is only a grouping step. The interface must preserve item identity through disclosures, media, and selection state. A variant can carry that identity, but the product page still needs a staged interaction that helps shoppers compare the physical items represented by those variants.