# Appearance Settings

Customize the look and feel of your WooNooW store.

## Accessing Appearance Settings

Go to **WooNooW → Appearance** in the WordPress admin.

---

## General Settings

### Logo

Upload your store logo for display in the header.

- **Recommended size**: 200x60 pixels (width x height)
- **Formats**: PNG (transparent background recommended), SVG, JPG
- **Mobile**: Automatically resized for smaller screens

### SPA Page

Select which page hosts the WooNooW SPA. Default is "Store".

> **Note**: This page should contain the `[woonoow_spa]` shortcode.

### SPA Mode

Choose how WooNooW handles your store pages:

| Mode | Description |
|------|-------------|
| **Full** | All WooCommerce pages redirect to SPA |
| **Disabled** | Native WooCommerce templates are used |

---

## Colors

### Primary Color

The main brand color used for:
- Buttons
- Links
- Active states
- Primary actions

**Default**: `#6366f1` (Indigo)

### Secondary Color

Secondary UI elements:
- Less prominent buttons
- Borders
- Subtle backgrounds

**Default**: `#64748b` (Slate)

### Accent Color

Highlight color for:
- Sale badges
- Notifications
- Call-to-action elements

**Default**: `#f59e0b` (Amber)

---

## Typography

### Body Font

Font used for general text content.

**Options**: System fonts and Google Fonts
- Inter
- Open Sans
- Roboto
- Lato
- Poppins
- And more...

### Heading Font

Font used for titles and headings.

**Options**: Same as body fonts, plus:
- Cormorant Garamond (Serif option)
- Playfair Display
- Merriweather

### Font Sizes

Font sizes are responsive and adjust automatically based on screen size.

---

## Layout

### Container Width

Maximum width of the content area.

| Option | Width |
|--------|-------|
| Narrow | 1024px |
| Default | 1280px |
| Wide | 1536px |
| Full | 100% |

### Header Style

Configure the header appearance:
- **Fixed**: Stays at top when scrolling
- **Static**: Scrolls with page

### Product Grid

Columns in the shop page grid:
- Mobile: 1-2 columns
- Tablet: 2-3 columns
- Desktop: 3-4 columns

---

## Saving Changes

1. Make your changes
2. Click **Save Changes** button
3. Refresh your store page to see updates

> **Tip**: Open your store in another tab to preview changes quickly.