UI Ecommerce Catalog

Fifteen named commerce patterns across PDP blocks, cart drawers, checkout steps, order summaries, and review lists — Northstar Outfitters / Harbor Studio. See CATALOG.md for recipes.

.ecom-pdp-classic

Classic PDP

Thumb gallery + main image beside title, rating, price, swatches, size, qty, and CTAs.

Ridge Daypack front view

Ridge Daypack

4.8 · 128 reviews
$148 In stock
Color
Quantity
1
  • Free shipping over $75
  • 30-day returns
  • 2-year warranty
.ecom-pdp-sticky

Sticky PDP

Compact buy block with a sticky bottom bar (price + ATC) for a mobile-feel stage.

Trail Stove Kit on coastal rock

Trail Stove Kit

Compact burners, fuel pouch, and nesting mug — Harbor Studio field kit.

$64
.ecom-pdp-bundle

Bundle PDP

Hero product plus an “Includes” checklist of kit items with a savings badge.

Save $28 Weekend Trail Bundle pack

Weekend Trail Bundle

Everything for a two-night ridge walk — packed by Northstar Outfitters.

$270$242

  • Ridge Daypack 28 L $148
  • Trail Stove Kit $64
  • Merino Base Layer $58
.ecom-cart-drawer

Cart Drawer

Right cart drawer with line items, qty, subtotal, and Checkout CTA over a demo canvas.

Northstar shop

Ridge Daypack added · Continue browsing trails gear.
.ecom-cart-mini

Mini Cart

Popover under a bag icon with a two-item preview plus View cart / Checkout.

Harbor Studio

Bag (2)

Ridge Daypack

Qty 1

$148

Trail Stove Kit

Qty 1

$64
Click Bag to preview the mini cart.
.ecom-cart-empty

Empty Cart

Empty drawer state with illustration placeholder, copy, and Continue shopping.

Northstar shop

No items yet — open the empty cart state.
.ecom-checkout-steps

Checkout Steps

Horizontal Shipping → Payment → Review indicator with one form panel and Back/Continue.

  1. Shipping
  2. Payment
  3. Review
.ecom-checkout-split

Checkout Split

Two-column layout: contact + shipping form left, sticky order summary right.

Contact & shipping

.ecom-checkout-express

Express Checkout

Wallet buttons, “or pay with card” divider, and compact card fields.

Express checkout

.ecom-summary-card

Summary Card

Classic order summary with lines, promo field, totals, and Place order.

Order summary

  • Ridge Daypack $148 Forest · 28 L · Qty 1
  • Merino Base Layer $58 Heather · M · Qty 1
Subtotal$206.00
Shipping$0.00
Tax$16.48
Total$222.48
.ecom-summary-receipt

Summary Receipt

Post-purchase receipt with order #, thank-you, shipped-to, items, and track CTAs.

Order #NS-10428

Thanks, Mira We’re packing your Ridge Daypack. You’ll get a ship notice shortly.

Shipped to Mira Chen · 18 Harbor Lane · Seattle, WA 98101

  • Ridge Daypack $148 Qty 1
  • Trail Stove Kit $64 Qty 1
Subtotal$212.00
Shipping$0.00
Tax$16.96
Total paid$228.96
.ecom-summary-edit

Editable Summary

Cart summary with qty steppers, remove links, totals, and Update / Checkout.

Your cart

  • Ridge Daypack Forest · 28 L
    1
    $148
  • Trail Stove Kit Harbor Studio
    2
    $128
Subtotal$276.00
Estimated tax$22.08
Total$298.08
.ecom-reviews-list

Reviews List

Rating summary with score + bars, then review cards with avatar, stars, and helpful.

4.8 128 reviews
  • 5 ★
    98
  • 4 ★
    18
  • 3 ★
    7
  • 2 ★
    3
  • 1 ★
    2

Locked in on day one

Mira Chen

The Ridge Daypack sits balanced with a stove kit and still has room for layers. Straps stay quiet on long approaches.

Solid field kit partner

Jonah Blake

Wish the hip belt pocket were deeper, but Harbor Studio’s zipper quality is excellent.

Merino that actually dries

Asha Patel

Base layer held up through three wet ridge days. Soft next-to-skin without overheating.

.ecom-reviews-filter

Reviews Filter

Same list with star filter chips (All / 5 / 4 / 3…) driven by data attributes.

Perfect overnight pack

Fits stove kit + merino + rain shell without feeling overstuffed.

Great, minor strap tweak

Load lifters are solid; I’d like a slightly softer sternum pad.

Fine for day hikes

Worked for short trips; hip belt felt stiff until broken in.

Northstar quality again

Color matched the site swatch. Arrived in two days.

.ecom-reviews-compose

Write a Review

“Write a review” form with star picker above a short existing reviews list.

Write a review

Reliable daily pack

Uses it for ferry + trailhead shuttles without fuss.

Clean design, tough fabric

Looks sharp in the studio photos and holds up outdoors.