Theme settings allow you to define the global look and feel of your storefront. Instead of styling individual pages one by one, theme settings help you create consistent branding across the entire website, including colors, typography, buttons, and logos.
This article explains how to access theme settings, what each option controls, and how changes made here apply across your storefront.
To access,
- Go to Back Office
- Navigate to Sales Channels
- Select the sales channel you want to work on
- From the left navigation, click Themes
- Click the pencil (edit) icon on the active theme
- This opens the Theme Settings editor, where all global styling options are managed.
Once the theme editor opens, you will see:
- A live preview of the storefront (at Center)
- Theme configuration options on the left
- Styling controls on the right panel
At the top, you can:
- Select the page you want to preview (for example, Home)
- Switch between Default and other available theme configurations
All changes made here affect the entire storefront, not just the page being previewed.
Theme Settings Options
Logo
The Logo section allows you to manage the primary brand identity displayed across your storefront. From this section, you can upload, replace, or update the logo that appears in key areas such as the header and navigation, depending on the active theme.
Updating the logo here applies the change globally across the storefront, ensuring brand consistency without requiring page-level edits.
- Click Logo from the left menu
- Select image under logo in the right section.
- Choose Your Logo from library and Click Apply
- Changes apply across all pages where the logo is used
This is the recommended way to update branding instead of replacing logos page by page.
Theme Colors
Theme colors define the global color palette used across the storefront. These colors control how backgrounds, text, buttons, and borders appear across pages and components, helping maintain a consistent visual identity.
When you open Theme Colors, a configuration panel appears on the right-hand side. From here, you can either:
- Select an existing color scheme and make changes to it, or
- Click Add Scheme to create a completely new color scheme
Both options provide the same set of configurable properties, allowing you to update an existing scheme or build a new one based on your requirements.
To update theme colors:
- Click Theme Colors
- Choose an existing color scheme or click Add Scheme
- Configure/Edit the color properties
- Save the scheme
Color Scheme Configuration
Each color scheme represents a reusable styling preset. Once selected, you can configure the following options:
General Settings
Option | Description |
|---|
Label | Internal name used to identify the color scheme |
Set as Default | Marks the scheme as the default styling applied across the storefront |
Background Color | Defines the default background color |
Text Color | Sets the primary text color |
Opacity | Controls transparency for individual color values |
Button Styling Options
Theme colors now allow you to define colors for multiple button types, ensuring consistent visual hierarchy across the storefront.
Primary Button
Option | Description |
|---|
Color | Background color for primary actions |
Text Color | Text color used on primary buttons |
Border Color | Border color for primary buttons |
Secondary Button
Option | Description |
|---|
Color | Background color for secondary actions |
Text Color | Text color for secondary buttons |
Border Color | Border color for secondary buttons |
Danger Button
Option | Description |
|---|
Color | Used for destructive or critical actions |
Text Color | Text color for danger buttons |
Border Color | Border color for danger buttons |
Warning Button
Option | Description |
|---|
Color | Used for cautionary actions |
Text Color | Text color for warning buttons |
Border Color | Border color for warning buttons |
Success Button
Option | Description |
|---|
Color | Used to indicate successful or positive actions |
Text Color | Text color for success buttons |
Border Color | Border color for success buttons |
Each button type also supports opacity controls, allowing fine-tuned visual adjustments.
Once a color scheme is saved:
- It becomes available across page and component editors
- It can be applied wherever theme colors are supported
- Updates are reflected consistently wherever the scheme is used
Theme colors control how elements look, not where they are placed, making them ideal for managing branding and visual consistency at a global level.
Buttons
The Buttons section lets you define reusable button styles to maintain consistency across the website.
You can configure multiple button types, such as:
- Default buttons
- Compact buttons
- Rounded buttons
Button Settings You Can Customize
Setting | Description |
|---|
Label Style | Text appearance on the button |
Padding | Space inside the button |
Border Thickness | Width of the button border |
Border Radius | Controls how rounded the button edges are |
Shadow | Adds or removes depth |
Opacity | Controls transparency |
These button styles can be applied consistently across pages to highlight actions while maintaining a uniform design language.
Typography
Typography controls the text styling system used across the storefront.
When you open Typography, you will see five predefined typography styles available for use while building pages.
If you want to create a new typography style:
- Click Add Scheme
- Configure the typography properties
- Save the scheme
Typography Settings Explained
Setting | Description |
|---|
Label | Internal name for the typography scheme |
Base Font Color | Default text color |
Heading Font & Weight | Font style and weight for headings |
Letter Spacing | Controls spacing between letters |
Text Transformation | Uppercase, lowercase, or normal text |
Body Font & Weight | Styling for paragraph text |
Button Font Size | Text size used on buttons |
Once created, these typography schemes can be applied consistently across the storefront.
How Theme Settings Are Applied
Theme settings focus on global styling, while page editors handle layout and content placement—together, they provide full control over storefront design. It works at a global level:
- Changes apply across all pages
- Styling remains consistent across components
- Layout structure is not affected
This means theme settings control how things look, while page editors control where things appear.
When to Use Theme Settings
Use theme settings when you want to:
- Update branding colors
- Change fonts site-wide
- Standardize button styles
- Replace logos
- Maintain visual consistency
Avoid using page-level styling for changes that should apply across the entire storefront.
Theme settings allow you to control the visual identity of your storefront from a single place. By configuring logos, colors, buttons, and typography at the theme level, you ensure consistency, scalability, and easier maintenance as your storefront evolves.