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.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.
Available themes
Spark
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).Minimal
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).Both themes share the same section library, so you can switch themes at any time without losing your page content or section configuration.
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.Open the Design panel
In your admin sidebar, click Design. The Theme Editor opens with your currently active theme loaded.
Select a new theme
Choose between Spark and Minimal in the theme selector. A preview refreshes immediately so you can compare before committing.
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 |
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)