# Ecommerce Patterns (Tailwind+)

Consolidated list of all ecommerce patterns from Tailwind+ to convert to Flux UI.

**Total: 129 variants across 21 categories**

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/

---

## Components

### Product Overviews (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-overviews

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With image gallery and expandable details | Gallery + accordion |
| 2 | With image grid | Multiple images grid |
| 3 | With tabs | Tabbed details |
| 4 | With tiered images | Stacked image display |
| 5 | Split with image | Image + details split |

---

### Product Lists (11 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-lists

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Simple | Basic product grid |
| 2 | With inline price | Price inline |
| 3 | With CTA link | Add to cart link |
| 4 | With color swatches and horizontal scrolling | Swatches + scroll |
| 5 | Card with full details | Full product card |
| 6 | With border grid | Bordered grid |
| 7 | With tall images | Vertical image cards |
| 8 | With tall images and CTA link | Tall + CTA |
| 9 | With image overlay and add button | Overlay + button |
| 10 | With inline price and CTA link | Price + CTA |
| 11 | With supporting text | Description text |

---

### Category Previews (6 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/category-previews

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Three column | 3-column categories |
| 2 | With image backgrounds | Image backgrounds |
| 3 | With scrolling cards | Horizontal scroll |
| 4 | With split images | Split image layout |
| 5 | Three column with description | Categories + text |
| 6 | With background image and detail overlay | Overlay details |

---

### Shopping Carts (6 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/shopping-carts

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Single column | Simple cart list |
| 2 | Popover | Dropdown cart |
| 3 | Slide-over | Drawer cart |
| 4 | Two column with quantity dropdown | Split + quantity |
| 5 | With extended summary | Detailed summary |
| 6 | Modal | Modal cart view |

---

### Category Filters (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/category-filters

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With inline actions and expandable sidebar filters | Sidebar + inline |
| 2 | With dropdown product sort and filters | Dropdown filters |
| 3 | With expandable product filter panel | Expandable panel |
| 4 | With centered text and dropdown product filters | Centered + dropdown |
| 5 | Sidebar filters | Sidebar only |

---

### Product Quickviews (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-quickviews

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With color selector and description | Color + description |
| 2 | With color and size selector | Color + size |
| 3 | With large size selector | Large size grid |
| 4 | With color selector, size selector, and details link | Full options |

---

### Product Features (9 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/product-features

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With header, image, and descriptions | Full feature layout |
| 2 | With alternating sections | Alternating blocks |
| 3 | With tiered images | Stacked images |
| 4 | With tabs | Tabbed features |
| 5 | With square images | Square image grid |
| 6 | With image grid | Image grid layout |
| 7 | With fading image | Fade effect image |
| 8 | With wide images | Wide image display |
| 9 | With split image | Split layout |

---

### Store Navigation (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/store-navigation

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With featured categories | Featured + nav |
| 2 | With double column and persistent mobile nav | Double column |
| 3 | With simple menu and promo | Menu + promo |
| 4 | With image grid | Image navigation |
| 5 | With centered logo and featured categories | Centered logo |

---

### Promo Sections (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/promo-sections

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Full-width with background image | Full image promo |
| 2 | Full-width with background image and large content | Large content |
| 3 | With image tiles | Multiple images |
| 4 | With fading background image and testimonials | Fade + quotes |
| 5 | With overlapping image tiles | Layered images |
| 6 | Full-width with overlapping image tiles | Full + layered |
| 7 | With offers and split image | Offers + image |
| 8 | Full-width with overlapping image tiles and perks | Full + perks |

---

### Checkout Forms (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/checkout-forms

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Single step with order summary | Single page |
| 2 | Multi-step | Stepped checkout |
| 3 | With mobile order summary overlay | Mobile summary |
| 4 | With order summary sidebar | Sidebar summary |
| 5 | Split with order summary | Split layout |

---

### Reviews (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/reviews

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With summary chart | Rating chart |
| 2 | Multi-column | Multiple columns |
| 3 | Simple with avatars | Avatar reviews |
| 4 | With split summary | Split layout |

---

### Order Summaries (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/order-summaries

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With progress bars | Progress tracking |
| 2 | With large images and progress bars | Large images |
| 3 | With split image | Split layout |
| 4 | Simple with full order details | Full details |

---

### Order History (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/order-history

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With invoice panels | Invoice cards |
| 2 | With invoice list | Invoice list |
| 3 | With invoice tables | Table layout |
| 4 | Simple | Basic history |

---

### Incentives (8 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/components/incentives

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | 3-column with icons | Icon highlights |
| 2 | 3-column with illustrations | Illustrations |
| 3 | 3-column with icons and supporting text | Icons + text |
| 4 | 2x2 grid with illustrations | 2x2 grid |
| 5 | 4-column with illustrations | 4-column |
| 6 | 3-column with illustrations and header | With header |
| 7 | 3-column with illustrations and centered text | Centered |
| 8 | 3-column with illustrations and split header | Split header |

---

## Page Examples

### Storefront Pages (4 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/storefront-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With image tiles and feature sections | Tiles + features |
| 2 | With overlapping images and perks | Layered + perks |
| 3 | With offers and testimonials | Offers + quotes |
| 4 | Dark with image tiles | Dark theme |

---

### Product Pages (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/product-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With image gallery | Gallery layout |
| 2 | With image grid | Grid layout |
| 3 | With tabs | Tabbed details |
| 4 | With tiered images | Stacked images |
| 5 | With related products | Related section |

---

### Category Pages (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/category-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With image header and detail product grid | Header + grid |
| 2 | With large images and filters sidebar | Large images |
| 3 | With product grid and pagination | Grid + pagination |
| 4 | With text header and simple product grid | Text header |
| 5 | With text header and image product grid | Mixed layout |

---

### Shopping Cart Pages (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/shopping-cart-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With two column summary | Two-column |
| 2 | With extended summary | Full summary |
| 3 | Single column | Simple layout |

---

### Checkout Pages (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/checkout-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | Single step | One-page checkout |
| 2 | Multi-step | Stepped process |
| 3 | With mobile cart modal | Mobile modal |
| 4 | With order summary sidebar | Sidebar summary |
| 5 | Split | Split layout |

---

### Order Detail Pages (3 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/order-detail-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With progress bar | Progress tracking |
| 2 | With large images | Large product images |
| 3 | Simple invoice | Invoice style |

---

### Order History Pages (5 variants)

Source: https://tailwindcss.com/plus/ui-blocks/ecommerce/page-examples/order-history-pages

| # | Variant | Key Features |
|---|---------|--------------|
| 1 | With invoice panels | Panel cards |
| 2 | With vertical timeline | Timeline view |
| 3 | With invoice list | List view |
| 4 | With invoice tables | Table view |
| 5 | Simple list | Basic list |

---

## Pattern Categories (for Flux UI organisation)

### By Flow Stage
- **Discovery**: Category previews, product lists, store navigation
- **Evaluation**: Product overviews, quickviews, features, reviews
- **Purchase**: Shopping carts, checkout forms, order summaries
- **Post-purchase**: Order history, order details

### By Layout
- **Grid**: Product lists, category grids
- **Split**: Two-column layouts
- **Modal/Overlay**: Quickviews, cart popovers
- **Single column**: Simple flows

### By Features
- **With images**: Galleries, image grids, tiered images
- **With filters**: Category filters, search
- **With progress**: Checkout steps, order tracking
- **With pricing**: Product cards, summaries

### By Complexity
- **Simple**: Basic displays, minimal options
- **Rich**: Full galleries, multiple selectors
- **Multi-step**: Checkout flows

---

## Conversion Priority

1. **Product Lists - Simple** - product grid essential
2. **Shopping Carts - Single column** - cart functionality
3. **Product Overviews - With image gallery** - product pages
4. **Checkout Forms - Single step** - purchase flow
5. **Category Filters - Sidebar filters** - filtering
6. **Order History - With invoice panels** - account pages
7. **Category Previews - Three column** - homepage sections
8. **Promo Sections - Full-width with background** - marketing
