Appearance
Theme Customization
Each theme in Shop Craft can have its own set of customizable settings. These settings let you fine-tune how the theme looks and behaves without needing to edit any code.
Accessing Theme Settings
- Log in to your Admin Panel
- Go to Themes in the sidebar
- Find the active theme (or any installed theme)
- Click the Settings icon (gear icon) on the theme card
This opens the theme settings page where you can adjust the available options.
What Can Be Customized
The available settings depend on the theme you are using. Each theme defines its own settings in its theme.json manifest file. Common settings include:
| Setting Type | Examples |
|---|---|
| Colors | Primary color, accent color, background color, text color |
| Typography | Heading font, body font |
| Layout | Header style (compact vs. expanded), hero section style |
| Display toggles | Show/hide elements like accent lines, brand bars, dark mode toggle |
| Border radius | Sharp corners vs. rounded corners |
Built-in Theme Settings
Boutique Theme
| Setting | Type | Options | What It Does |
|---|---|---|---|
| Hero Style | Dropdown | Editorial, Split, Minimal | Changes how the homepage hero banner is laid out |
| Show Brand Bar | Toggle | On / Off | Shows or hides a decorative brand bar element on the storefront |
Modern Minimal Theme
| Setting | Type | Options | What It Does |
|---|---|---|---|
| Header Style | Dropdown | Compact, Expanded | Controls the header height and layout. Compact is a slim sticky bar; expanded is taller with more spacing |
| Show Red Accent Line | Toggle | On / Off | Displays a thin red (#EF4444) line at the very top of every page |
TIP
The Default theme does not currently have custom settings. Its appearance is controlled entirely by the Layout Editor and store branding settings (logo, favicon).
How to Change Settings
- Open the theme settings page (gear icon on the theme card)
- Adjust the settings using the form fields -- dropdowns, toggles, text inputs, or color pickers depending on what the theme offers
- Click Save to apply your changes
Changes take effect immediately after saving. Your customers will see the updated design right away.
Settings vs. Layout Editor
Theme settings and the Layout Editor serve different purposes:
| Theme Settings | Layout Editor | |
|---|---|---|
| What it controls | Theme-specific visual options (fonts, colors, component styles) | Homepage sections, header layout, footer content |
| Scope | Tied to a specific theme | Works across all themes |
| Access | Admin > Themes > Settings (gear icon) | Admin > Layout Editor |
For customizing your homepage sections, header, and footer, use the Layout Editor. For adjusting the visual style of your current theme, use Theme Settings.
WARNING
If you switch to a different theme, the settings from your previous theme are preserved. If you switch back later, your old settings will still be there.