Delivery and stores

Delivery dates, stock, pickup and store finders.

4 components · 17 variants

Switch category

On this page

Every component of this category. Pick one to jump to its variants.

Stock status5
Shipping estimator4
Shop promises4
Store locator4

stock-status

Stock status

What is there, what is almost gone, what comes back, what can be ordered ahead and where it can be picked up today. Every state is said in words, the color only supports it.

Stock line
Stock per size
Back in stock alert
Preorder
Available in store

Props and details

Stock line

The stock line in six states on product cards, from in stock and few left to sold out, preorder and made to order. Live states breathe, the pieces-left bar runs down when it scrolls in, sold out turns into "Notify me".

Installv1.0.0

aiw add @ai-website/stock-status

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<StockStatus variant="inline" lines={[{ kind: "low", label: "Only 3 left", note, count: 3, product }]} />

Source

Stock per size

Sizes with a dot for their stock, sold out sizes struck through but pickable. The picked size says what is left in words, swaps with a short rise and shows a bar of the last pieces, a sold out size gives its restock date and "Notify me".

Installv1.0.0

aiw add @ai-website/stock-status

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<StockStatus variant="low-stock" product={product} sizes={[{ label: "42", stock: 3 }, { label: "44", stock: 0, restock }]} lowFrom={3} />

Source

Back in stock alert

A sold out product with size choice, email and an extra box for price drops. The expected date fades in per size, a missing size or email shakes and says what to do, the confirmation draws its check.

Installv1.0.0

aiw add @ai-website/stock-status

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<StockStatus variant="back-in-stock" product={product} sizes={[{ label, stock: 0, restock }]} onNotify={(size, email) => …} />

Source

Preorder

A product before its release, with days to go on the image, the first batch that fills while scrolling, pay now or a deposit, and the way from order to door. Preordering counts itself into the batch.

Installv1.0.0

aiw add @ai-website/stock-status

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<StockStatus variant="preorder" product={product} preorder={{ release, days, reserved, total, deposit, steps }} onPreorder={(pay) => …} />

Source

Available in store

Which store has the picked size today, with distance, hours and pieces in store. Changing the size lets the list run in again and moves the choice to a store that has it, reserving holds it for 48 hours.

Installv1.0.0

aiw add @ai-website/stock-status

Brings along utils, kit, button, icon, reveal, motion, section, product-image

Usage

<StockStatus variant="store-availability" product={product} sizes={sizes} stores={[{ id, name, address, distance, hours, stock: { "42": 2 } }]} onReserve={…} />

Source

shipping-estimator

Shipping estimator

When it arrives and what it costs. Options for a postcode, the cut-off of today with the way to the door, rates per region and a delivery window to book.

Postcode check
Order cut-off
Rates by region
Delivery window

Props and details

Postcode check

Country and postcode in, delivery options with dates and prices out. A wrong postcode shakes and says what fits, the check spins briefly, then the options run in and their dates come into focus.

Installv1.0.0

aiw add @ai-website/shipping-estimator

Brings along utils, kit, button, icon, reveal, motion, section, tabs, select, product-image

Usage

<ShippingEstimator variant="postcode" countries={[{ code, label, pattern, example }]} options={[{ id, name, eta, price, icon }]} onCheck={…} />

Source

Order cut-off

The time left until today’s cut-off in a ring that empties, the arrival day next to it. Standard or faster swaps the date with a short rise, and the way to the door fills its line while scrolling.

Installv1.0.0

aiw add @ai-website/shipping-estimator

Brings along utils, kit, button, icon, reveal, motion, section, tabs, select, product-image

Usage

<ShippingEstimator variant="countdown" minutesLeft={134} arrival={{ standard, fast, fastPrice }} steps={[{ label, date, fastDate, icon }]} />

Source

Rates by region

Shipping rates per region in tabs with a sliding thumb. A table with time, cost and free shipping threshold on wide screens, cards on phones, rows run in on every switch. Promises below rise in turn.

Installv1.0.0

aiw add @ai-website/shipping-estimator

Brings along utils, kit, button, icon, reveal, motion, section, tabs, select, product-image

Usage

<ShippingEstimator variant="rates-table" zones={[{ id, label, rows: [{ method, time, price, freeFrom }] }]} notes={[…]} />

Source

Delivery window

A strip of days with the lowest price per day and a marker that glides to the chosen one, arrow keys move it too. Time windows run in per day, full ones stay visible and struck through, the summary beside books the window.

Installv1.0.0

aiw add @ai-website/shipping-estimator

Brings along utils, kit, button, icon, reveal, motion, section, tabs, select, product-image

Usage

<ShippingEstimator variant="delivery-slots" days={[{ id, weekday, day, label, slots: [{ id, label, price, full }] }]} onSelect={(day, slot) => …} />

Source

shop-benefits

Shop promises

What a shop promises about shipping, returns, payment and service. A quiet strip under the header, cards with details, the free shipping bar and a money back guarantee with its seal.

Promise strip
Promise cards
Free shipping bar
Guarantee

Props and details

Promise strip

Four promises in a quiet row with hairlines between them, rising one after another. On tablets two by two, on phones one at a time that slides on every four seconds, with arrows and a pause on touch.

Installv1.0.0

aiw add @ai-website/shop-benefits

Brings along utils, kit, icon, reveal, motion, section, product-image

Usage

<ShopBenefits variant="strip" items={[{ icon, title, text, href }]} />

Source

Promise cards

The promises as cards with a short text and a link to the details. Cards rise in turn, lift on hover with a soft light in the corner, and the icon tilts.

Installv1.0.0

aiw add @ai-website/shop-benefits

Brings along utils, kit, icon, reveal, motion, section, product-image

Usage

<ShopBenefits variant="cards" title="…" items={[{ icon, title, text, href }]} />

Source

Free shipping bar

How far it is to free shipping, for the cart, the mini cart or above the product grid. The bar fills when it scrolls in and glides with every change, a light runs along it, and reaching the threshold turns it green with a pop.

Installv1.0.0

aiw add @ai-website/shop-benefits

Brings along utils, kit, icon, reveal, motion, section, product-image

Usage

<ShopBenefits variant="free-shipping" threshold={60} subtotal={42.9} />

Source

Guarantee

One big promise with its seal. The ticks around the number draw in one after another when it scrolls in, the terms people want to read rise beside it, a link leads to the full policy.

Installv1.0.0

aiw add @ai-website/shop-benefits

Brings along utils, kit, icon, reveal, motion, section, product-image

Usage

<ShopBenefits variant="guarantee" days={30} title="…" description="…" terms={[…]} action={{ label, href }} />

Source

store-locator

Store locator

Finding a store. A drawn map with a list that lights up together, the page of one store with the week and its services, store cards with region chips and a finder for the nearest store.

Map and list
Store page
Store cards
Nearest store

Props and details

Map and list

A drawn district map with pins that drop in one after another, next to a list with search. Hovering or picking a store lights up its pin with a halo and a label, a tap on a pin scrolls the list to it. On phones list and map are two views behind a switch.

Installv1.0.0

aiw add @ai-website/store-locator

Brings along utils, kit, button, icon, reveal, motion, section, maps, product-image

Usage

<StoreLocator variant="map-list" stores={[{ id, name, address, x, y, open, status, distance }]} />

Source

Store page

One store, open now with a breathing dot, a photo that drifts while scrolling, services that rise one after another, the pin on the map, directions and call, and the week with today marked.

Installv1.0.0

aiw add @ai-website/store-locator

Brings along utils, kit, button, icon, reveal, motion, section, maps, product-image

Usage

<StoreLocator variant="store-detail" stores={[{ …, hours: [{ day, hours, today }], services: [{ icon, label }], note }]} />

Source

Store cards

Store cards with photo, district, distance and open state. District chips and an "open now" switch filter the cards, which run in again on every change. Cards lift on hover, the photo zooms inside.

Installv1.0.0

aiw add @ai-website/store-locator

Brings along utils, kit, button, icon, reveal, motion, section, maps, product-image

Usage

<StoreLocator variant="cards" stores={[{ id, name, address, region, open, status, image }]} />

Source

Nearest store

Use my location or a postcode. While it looks, a ring pulses over the map, then the nearest store runs in with distance, travel time and open state, plus two more nearby. "Make this my store" confirms with a check.

Installv1.0.0

aiw add @ai-website/store-locator

Brings along utils, kit, button, icon, reveal, motion, section, maps, product-image

Usage

<StoreLocator variant="nearest" stores={[nearest, second, third]} onLocate={() => …} />

Source

Similar components

More from E-Commerce, the same area of the kit.

Often combined with

Sections that usually sit next to Delivery and stores on a page.

Copied to the clipboard