Site
Control global typography, colors, header behavior, logo, and component styles that apply across your entire store.
The Site workspace applies styles globally — changes here affect every page of your store. It's the first place to visit when setting up your store's visual identity.
Typography
| Setting | Description |
|---|---|
| Main Text Font | The body font used for descriptions, labels, and general text |
| Title Font | The font used for headings and product names |
Both fields offer a curated selection of font stacks. Choose fonts that reflect your brand personality.
Colors
Each color token controls a specific role across the storefront. The live preview updates immediately so you can see the effect before saving.
| Token | Where it's used |
|---|---|
| Page Background | The background behind all content |
| Card Background | Product cards, panels, and raised surfaces |
| Main Text | Primary body text |
| Hover Text | Text and icon color on hover states |
| Subtle Text | Secondary labels, metadata, and captions |
| Buttons & Highlights | Primary button fill and accent color |
| Text on Buttons | Label color inside primary buttons |
| Lines & Borders | Dividers, input outlines, and separators |
| Product Price | Regular product price display |
| Sale Price | Discounted price shown when a sale is active |
| Hero / Carousel Text | Text overlaid on hero and carousel images |
Layout
Corner Radius — Controls how rounded corners are on cards, buttons, and inputs. Drag the slider from sharp (0) to fully rounded.
Section Spacing — Controls the vertical gap between sections on each page. Increase for an airier layout; decrease for a denser one.
Header
| Setting | Options / Notes |
|---|---|
| Show Store Name | Toggle whether your store name appears in the header alongside the logo |
| Show Shop Link | Show or hide the Shop navigation link |
| Show Services Link | Show or hide the Services navigation link |
| Show Events Link | Show or hide the Events navigation link |
| Header Mode | Standard — header sits above content. Overlay — header floats over the hero image (best with hero images that have space at the top). |
| Logo Size | Small, Medium, or Large |
| Header Background | Background color of the header bar |
| Header Text | Color of nav links and text in the header |
Brand Images
Upload your Logo here. The logo appears in the header on every store page.
PNG with a transparent background is recommended so the logo blends with any header background color.
Components
Component styles apply globally to buttons, product cards, and forms across the store.
Button Style
| Option | Description |
|---|---|
| Solid | Filled button with background color |
| Outline | Transparent with a border |
| Soft | Lightly tinted background, softer appearance |
Button Radius — Slider controlling how rounded buttons are, independent of the global corner radius.
Product Card
| Option | Description |
|---|---|
| Classic | Standard card with shadow and padding |
| Minimal | Clean, borderless card |
| Bordered | Card with a visible border, no shadow |
Image Ratio — Controls the shape of product images in cards:
| Option | Best for |
|---|---|
| Square | General products |
| Portrait | Apparel, books, posters |
| Landscape | Wide or banner-style images |
Form Style
Controls the visual style of input fields across the store (search, checkout, contact form):
| Option | Description |
|---|---|
| Outlined | Inputs with a visible border |
| Filled | Inputs with a filled background |
| Underlined | Inputs with only a bottom border |
Heading Alignment
Center or Left — sets the default alignment of section headings across the store.
Text Transforms
Uppercase Buttons — Toggle to render all button labels in uppercase.
Accent Heading — Applies a stylistic accent treatment to section headings.
Heading Word — When set, one word in each heading is highlighted with the accent color.