> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cartble.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Choosing and customizing your storefront theme

> Pick a theme, configure your brand colors and fonts, and adjust the container width to control how your storefront looks for every visitor.

Your storefront theme controls the visual foundation of your store — the layout of headers and footers, the style of product cards, button shapes, and the overall feel your customers experience. Cartble ships with two themes, and you can fully customize colors, typography, and layout width without writing any code.

## Available themes

<CardGroup cols={2}>
  <Card title="Spark" icon="zap">
    A modern, high-conversion design built for performance. Spark is well-suited to electronics, fashion, and any store where bold visuals and fast paths to purchase matter most. Its default preview color is black (`#000000`).
  </Card>

  <Card title="Minimal" icon="circle">
    A clean, sophisticated layout built on the principle that less is more. Minimal is the right choice for luxury brands, artisan products, and niches where restraint and elegance build trust. Its default preview color is white (`#ffffff`).
  </Card>
</CardGroup>

<Note>
  Both themes share the same section library, so you can switch themes at any time without losing your page content or section configuration.
</Note>

## Switching themes

You access the theme editor from the **Design** section in your admin dashboard, which gives you a live-preview panel alongside all configuration controls.

<Steps>
  <Step title="Open the Design panel">
    In your admin sidebar, click **Design**. The Theme Editor opens with your currently active theme loaded.
  </Step>

  <Step title="Select a new theme">
    Choose between **Spark** and **Minimal** in the theme selector. A preview refreshes immediately so you can compare before committing.
  </Step>

  <Step title="Save and publish">
    Click **Save** to apply the new theme to your live storefront. Your sections, settings, and content carry over automatically.
  </Step>
</Steps>

## Theme configuration

Every theme shares the same set of global configuration options, all accessible from the Theme Editor in your admin dashboard.

### Colors

| Setting              | Description                                                                                                     |
| -------------------- | --------------------------------------------------------------------------------------------------------------- |
| **Primary color**    | Your main brand color. Set during onboarding and used for buttons, links, and highlights across the storefront. |
| **Secondary color**  | An accent color used for secondary UI elements and gradient endpoints.                                          |
| **Background color** | The default page background color.                                                                              |
| **Main text color**  | The default body text color.                                                                                    |

### Typography

Cartble loads fonts directly from Google Fonts. You choose separate fonts for headings and body text, plus a weight for each.

| Font             | Category   |
| ---------------- | ---------- |
| Inter            | Sans-serif |
| Roboto           | Sans-serif |
| Montserrat       | Sans-serif |
| Poppins          | Sans-serif |
| Outfit           | Sans-serif |
| Oswald           | Sans-serif |
| Work Sans        | Sans-serif |
| Playfair Display | Serif      |
| Lora             | Serif      |
| Merriweather     | Serif      |
| EB Garamond      | Serif      |
| Bebas Neue       | Display    |

<Tip>
  Pair a serif heading font like **Playfair Display** or **Lora** with a clean sans-serif body font like **Inter** or **Work Sans** for a polished, editorial look that works especially well with the Minimal theme.
</Tip>

### Layout

Control how wide your page content stretches across large screens using the **Container Width** setting.

| Option   | Value    | Best for                                     |
| -------- | -------- | -------------------------------------------- |
| Compact  | `1024px` | Content-heavy pages, tighter reading layouts |
| Standard | `1280px` | Most stores (default)                        |
| Wide     | `1440px` | Large catalogs, image-forward designs        |
| Full     | `1600px` | Ultra-wide displays, immersive layouts       |

### Button style

Choose between three button shapes that apply globally across the theme: **Rounded**, **Square**, or **Pill**.

### Header and footer

From the theme editor you can also configure:

* **Header layout** — logo left with menu center, logo center with menu below, or logo left with menu right
* **Header menu type** — simple dropdown or mega-menu
* **Sticky header** — keeps the header visible as visitors scroll
* **Header overlay** — renders the header transparently over hero sections
* **Footer menus** — link multiple navigation menus as footer columns, with optional social links and a newsletter signup block
* **Announcement bar** — a dismissible top banner with custom messages, background color, text color, and scroll speed

### Resource cards

Control how product cards look in collection grids:

* Show a secondary image on hover
* Set text alignment (left or center)
* Enable a quick-add button
* Choose badge style (square, pill, or none)
* Set the image aspect ratio (square, portrait, or landscape)
* Adjust the grid gap (small, medium, or large)