136 lines
2.2 KiB
Plaintext
136 lines
2.2 KiB
Plaintext
---
|
|
title: Appearance Settings
|
|
description: Customize the look and feel of your WooNooW store
|
|
date: 2024-01-31
|
|
---
|
|
|
|
## 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.
|