Shop

Shop

Store pages from core/components/shop.css, built on core cards, prices, steppers and forms. Payment, stock and totals are the app's; nothing here needs JavaScript.

Product grid .product-grid + .product

Square images, one link per card (.stretched-link), sale prices with .price-was and .price-sale, and badges on the image.

Colour
Category
Size

Product detail .product-detail

Gallery with radio thumbnails beside the info: price, stars, colour swatches, size choice cards and the add button.

Basic tee in black, front

Basic tee

$35

117 reviews

Size

  • International delivery

    Get your order in 2 years

  • Loyalty rewards

    Don't look at other tees

Reviews .stars, .review-summary, .review

Read-only stars filled to --rating; a distribution from native progress; review cards.

Customer reviews

Based on 1,624 reviews

5 stars
63%
4 stars
10%
3 stars
6%
2 stars
12%
1 star
9%
ECEmily Selman

This is the bag of my dreams. I took it on my last vacation and could fit an absurd amount of snacks.

HMHector Gibbons

Good quality, though it runs a size small.

Cart .cart + .cart-line and .order-summary

Lines with a quantity stepper and remove button beside a summary with a total.

Order summary

Subtotal
$85.00
Shipping
$5.00
Discount (AUTUMN)
−$8.50
Tax
$6.52
Order total
$88.02

Checkout recipe

Core ol.steps, floating-label fields, delivery and payment as .choice-cards, and the order summary.

  1. Cart
  2. Shipping
  3. Payment
  4. Review

Contact

We'll send the receipt here.

Delivery method
Payment

Summary

Subtotal
$85.00
Shipping
$5.00
Total
$90.00

Order history .order

An order header (number, date, total, actions) over its lines.

Incentives (a .features recipe)

Free shipping, returns and guarantees as a centred feature grid.

  • Free shipping

    On every order over $50, worldwide.

  • 10-year warranty

    If it breaks, we replace it. No questions.

  • Exchanges

    Swap sizes or colours within 60 days.