Theme settings.
All settings are accessible from the Shopify theme editor under Theme settings (gear icon). Changes preview instantly and are saved per-theme.
Colours
NOVA uses four colour schemes: Base, Secondary, Inverse, and Accent. Each scheme has 15 colour tokens. Every section can select which colour scheme to use.
| Setting | Type | Default | Description |
|---|---|---|---|
| color_background | color | #F4F2EE | Primary background colour |
| color_background_secondary | color | #E9E6DF | Secondary/alternate background |
| color_text | color | #141414 | Primary text colour |
| color_text_secondary | color | #5A5751 | Muted/secondary text |
| color_border | color | #D6D2C9 | Section and card borders |
| color_border_input | color | #B9B4AA | Form input borders |
| color_accent | color | #2E3FD0 | Links and accent elements |
| color_button | color | #141414 | Primary button background |
| color_button_text | color | #F4F2EE | Primary button text |
| color_success | color | #2F6B3F | Success state colour |
| color_warning | color | #8A5A00 | Warning state colour |
| color_error | color | #B3261E | Error state colour |
| color_sale | color | #B3261E | Sale/compare price colour |
| color_focus | color | #2E3FD0 | Focus ring colour |
| color_image_placeholder | color | #D9D4CA | Image placeholder background |
Typography
Three font roles: headings, body, and accent (for inflection italic). Each supports Shopify's font picker. NOVA defaults to self-hosted Schibsted Grotesk + Newsreader.
| Setting | Type | Default | Description |
|---|---|---|---|
| heading_font | font_picker | Schibsted Grotesk | Heading typeface |
| body_font | font_picker | Schibsted Grotesk | Body text typeface |
| accent_font | font_picker | Newsreader | Accent/inflection typeface (italic) |
| heading_weight | select | 600 | Heading font weight (300–700) |
| heading_scale | range | 100% | Scale all headings (90–130%) |
| body_scale | range | 100% | Scale body text (90–120%) |
| heading_case | select | none | Force uppercase on headings |
Spacing
Controls the vertical rhythm between sections.
| Setting | Type | Default | Description |
|---|---|---|---|
| section_padding | select | 112px | Section vertical padding — Compact (64px), Default (112px), or Airy (160px) |
Layout
Content container width for all sections.
| Setting | Type | Default | Description |
|---|---|---|---|
| container_width | select | 1600px | Max container width — 1280, 1440, 1600, or full-width |
Shape
Border radius and image aspect ratio controls.
| Setting | Type | Default | Description |
|---|---|---|---|
| radius_button | select | 0 | Button border radius — Square, 4px, or Pill |
| radius_card | select | 0 | Card border radius — 0, 4px, or 8px |
| radius_input | select | 0 | Input border radius — 0 or 4px |
| radius_badge | select | 0 | Badge border radius — Square or Pill |
| card_image_ratio | select | 4:5 | Product card image ratio — 4:5, 1:1, 3:4, or Natural |
Motion
Animation and transition controls. All animations respect prefers-reduced-motion.
| Setting | Type | Default | Description |
|---|---|---|---|
| enable_animations | checkbox | true | Enable entrance animations globally |
| image_hover_scale | select | 1.035 | Image hover zoom — Subtle (1.02), Default (1.035), or Dramatic (1.04) |
| duration_reveal | select | 560ms | Reveal animation duration — 560ms or 720ms |
Social
Social media profile URLs displayed in the footer.
| Setting | Type | Default | Description |
|---|---|---|---|
| social_twitter | text | — | Twitter/X profile URL |
| social_facebook | text | — | Facebook page URL |
| social_instagram | text | — | Instagram profile URL |
| social_pinterest | text | — | Pinterest profile URL |
| social_tiktok | text | — | TikTok profile URL |
| social_youtube | text | — | YouTube channel URL |
Favicon
Browser tab icon for your store.
| Setting | Type | Default | Description |
|---|---|---|---|
| favicon | image_picker | — | Upload a 32x32 or 64x64 PNG favicon |
Colour schemes
Each of the four colour schemes (Base, Secondary, Inverse, Accent) has the same 15 tokens listed above. Every section's schema includes a color_scheme setting that selects which scheme to apply. This lets you alternate backgrounds within a single page.
Inflection heading markup
Any heading setting supports _word_ markup to italicise a single word in the accent font. For example, entering Editorial _commerce_ renders "Editorial" in the heading font and "commerce" in Newsreader italic.