Themes
Customize your storefront's look with themes, colors, typography, and global widgets.
Themes control the visual identity of your storefront — colors, fonts, header, footer, and global styling. Customize the built-in theme or browse the Theme Store for pre-designed options.
Theme customization
Go to Theme in the sidebar to customize your store's global appearance.
Colors
Set your store's color palette using CSS variables:
| Color | Purpose | Example |
|---|---|---|
| Primary | Buttons, links, active states | Brand blue |
| Secondary | Secondary buttons, badges | Soft gray |
| Accent | Highlights, hover states | Gold |
| Background | Page background | White |
| Foreground | Text color | Dark gray |
| Muted | Subtle backgrounds, borders | Light gray |
| Destructive | Error states, delete buttons | Red |
Start with your brand's primary color and let the system generate complementary shades. You can fine-tune individual colors after the initial palette is set.
Typography
Configure fonts and text sizing:
| Setting | Description |
|---|---|
| Heading font | Font family for H1-H6 headings |
| Body font | Font family for paragraph text |
| Font sizes | Base size and scale ratio |
Global widgets
Your storefront has global elements that appear on every page:
| Widget | What it controls |
|---|---|
| Header | Logo, navigation menu, search, cart icon, account link |
| Footer | Footer columns, links, social icons, copyright text |
Edit these from the Theme page or directly in the page builder using Global mode.
Global widgets (header and footer) are shared across all pages. Changes to the header in the theme editor update it everywhere on your storefront simultaneously.
Theme Store
Go to Theme Store in the sidebar to browse pre-designed themes. Each theme includes:
- Color palette
- Typography settings
- Header and footer layouts
- Homepage design
- Product page layout
Installing a theme
- Browse available themes and preview them
- Click Install on the theme you want
- The theme's settings (colors, fonts, global widgets) are applied to your store
- Customize further from the Theme page
Installing a theme updates your global settings (colors, fonts, header, footer). Your page content, products, and custom pages are preserved — only the visual styling changes.
Responsive design
All theme settings support responsive values:
| Breakpoint | Screen size | Example |
|---|---|---|
| Desktop | 1024px and above | Full navigation, multi-column layouts |
| Tablet | 768px – 1023px | Condensed navigation, 2-column grids |
| Mobile | Below 768px | Hamburger menu, single column, stacked layout |
Theme values cascade downward — desktop settings apply to all sizes unless overridden at tablet or mobile breakpoints.
Custom CSS
For advanced customization beyond what the theme editor offers, use the Custom Code app to inject custom CSS into your storefront. This gives you full control over any element's styling.
Use the browser's developer tools to inspect elements and find the right CSS selectors. Workfile uses semantic class names and data attributes that make targeting specific elements straightforward.
Style Audit
Go to Style Audit in the Online Store section to analyze and optimize your storefront's CSS:
- Identify unused styles
- Find duplicate or conflicting rules
- Optimize CSS delivery for faster page loads
- Clean up orphaned widget styles
This is especially useful after making many changes in the page builder — it helps keep your storefront's CSS lean and performant.