Screen · Commerce

Product SwiftUI Screen

A product page whose buy bar docks to the bottom as the hero scrolls away.

A commerce detail screen: a cropped hero drawn in code, a variant picker that animates selection, a quantity stepper, and a purchase bar that docks under the fold and lifts back into the page at the top.

  • SwiftUI
  • iOS 17.0+
  • product-detail
Get SwiftPieces Pro

$199 once, every piece included. See how installing works · Sign in

01

What's included

SwiftUI source you own, built on Apple frameworks only.

  • A purchase bar that docks as the hero scrolls away
  • Variant chips with an animated selection and a quantity stepper
  • Serif display over a drawn hero, no photography
  • The Product screen from the preview: price, details and recommendations

In the Build Kit

Velvet (style), Shopping (brief), Shop and Track (recipe). Your agent builds around this screen in the same design.

02

Implementation notes

How it behaves, what it handles, and the decisions behind it.

The bar has a seat in the page, below the colour swatches and size chips. A tall drawn hero owns the first screen with no chrome over it; scroll and the bar rises with the content until it reaches the bottom edge, where it stays: it docks, takes on a surface, a hairline and a shadow, and extends through the home indicator. Scrolling back releases it into its seat. Picking a colourway slides a ring between swatches and repaints the hero, picking a size slides a filled chip, and the stepper counts the total up as a number rather than swapping it.

Notes

  • DockingBarScroll measures its own bar: the seat always keeps the bar's height, so nothing jumps at the hand-off, and the footer is padded by that height so its last row clears the docked bar. dockGap is the extra distance above the bottom edge at which it docks; zero makes the hand-off seamless.
  • The bar is the same view inline and docked, so a stepper's count and a button's press survive docking. An optional isDocked binding lets the page fade in a compact title once the hero is gone.
  • VariantPicker slides its selection with matchedGeometryEffect rather than blinking between options: a ring travels between colour swatches, a filled chip travels between sizes. Sold-out options are struck through and cannot be chosen.
  • The chips sit in a horizontal scroll, so accessibility text sizes keep every chip at full size and its 44pt target instead of squeezing a long row of sizes into the width.
  • The product image is drawn in code with SPScenery, never photography: a flat field, an outline disc, a solid disc in the chosen colourway and two hard-edged planes, under the family's thin gilded rings.
  • The stepper is one adjustable VoiceOver element ("Quantity, 2"), each step ticks, and the ends of its range disable their button instead of doing nothing.
  • Reduce Motion replaces the docking spring and the selection spring with short ease-outs.
  • ProductDetailExample at the end of ProductDetail.swift is the screen shown in the preview; copy it as a starting point.