# Shadcn Shop Hero blocks

> Storefront hero sections with product mosaics, collection tiles, deal banners, and shop calls to action.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/shop-hero
- Blocks: 8
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- The opening screen of a storefront home page, told through a season, collection or brand story
- A sale or new drop launch that puts the offer, release status and shop links up front
- A first screen that routes shoppers into categories, collections or a few featured products

## When not to use

- The top of a software landing page led by an app console, code card or logo cloud: use the [Hero blocks](https://web.dev.reui.io/blocks/marketing/hero.md)
- A closing band that asks for a signup, an email or a sales call, with nothing to buy: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- One offer built around a promo code the shopper copies before checkout: use the [Coupon blocks](https://web.dev.reui.io/blocks/ecommerce/coupon.md)

## Agent notes

- `Hero` takes no props, so its copy, links and photos are hardcoded in components/hero.tsx; lift them into props to reuse it
- Every `href` is a hash placeholder and every photo hotlinks images.unsplash.com; point them at your own routes and hosted images
- The only h1 is a sr-only one in each page.tsx, inside a `min-h-svh` main; `Hero` starts at h2, so give your page its own h1

## Blocks

- [Live Cart Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-1.md): Storefront shop hero with asymmetric 3-tile product mosaic and live per-tile Add to Cart. Best for a brand top bar whose cart count climbs as shoppers add from a 3 product mosaic, plus a curator byline and a category link row.
- [Bento Shop Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-2.md): Bento-grid shop hero with featured campaign tile, quick-add product tiles, and sale promo block. Best for a 4 column bento with a campaign photo across 2 by 2 cells, 3 product photos with icon quick add and an inverted sale tile.
- [Countdown Deal Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-3.md): Ecommerce shop hero with full-bleed featured deal banner, countdown, and three promo tiles. Best for an oversized 40% Off photo banner with a Live now badge, a fixed countdown and 3 perk tiles for shipping, bundles and first orders.
- [Category Shop Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-4.md): Shop By Category ecommerce hero with editorial header and a four-tile image category grid. Best for a grid of 4 square category photos with the name and style count below each, under a headline and a See all 60 pieces link.
- [Dual Collection Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-5.md): Dual-Collection Shop Hero with Two Side-by-Side Full-Image Story Panels. Best for a pair of equal collection photos, each with a corner badge, star rating, review count, from price and its own shop button.
- [Seasonal Lookbook Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-6.md): Editorial split shop hero with brand stamp, dual Shop The Edit and Sale CTAs, and collection image. Best for one Card split into copy and photo, with an edition stamp, a pinging release dot and a sale button carrying its discount badge.
- [Collection Switcher](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-7.md): Collection Switcher Shop Hero with Tabbed Thumbnail Chips and Full-Bleed Editorial Panels. Best for a tab strip of 3 numbered thumbnail chips that swaps one wide collection photo, including an upcoming drop with a reminder button.
- [Collection Quilt](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-8.md): Edge-to-edge 2x2 collection quilt shop hero with full-bleed photo tiles and color-coded status pills. Best for a full width 2 by 2 quilt of collection links with no gutters, each showing a status dot, a price range and a hover lift.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.