# Shop Page

The shop page displays your product catalog with browsing and filtering options.

## Overview

The WooNooW shop page provides:

- **Product Grid** - Visual display of products
- **Search** - Find products by name
- **Filters** - Category and sorting options
- **Pagination** - Navigate through products

---

## Features

### Product Cards

Each product displays:
- Product image
- Product name
- Price (with sale price if applicable)
- Add to Cart button
- Wishlist button (if enabled)

### Search

Type in the search box to filter products by name. Search is instant and updates the grid as you type.

### Category Filter

Filter products by category using the dropdown. Shows:
- All Categories
- Individual categories with product count

### Sorting

Sort products by:
- Default sorting
- Popularity
- Average rating
- Latest
- Price: Low to High
- Price: High to Low

---

## Customization

### Grid Layout

Configure the product grid in **WooNooW → Appearance**:

| Device | Options |
|--------|---------|
| Mobile | 1-2 columns |
| Tablet | 2-4 columns |
| Desktop | 2-6 columns |

### Product Card Style

Product cards can display:
- **Image** - Product featured image
- **Title** - Product name
- **Price** - Current price and sale price
- **Rating** - Star rating (if reviews enabled)
- **Add to Cart** - Quick add button

---

## Navigation

### Clicking a Product

Clicking a product card navigates to the full product page where customers can:
- View all images
- Select variations
- Read description
- Add to cart

### Back to Shop

From any product page, use the breadcrumb or browser back button to return to the shop.

---

## Performance

### Lazy Loading

Product images load as they come into view, improving initial page load time.

### Infinite Scroll vs Pagination

Currently uses pagination. Infinite scroll may be added in future versions.