Colors
Customize the colors used throughout your store to match your brand identity.
Body
- Background: Sets the primary background color for the body of your store.
Loading Colors
- Loading Background: Sets the background color shown during the loading state.
- Loading Color: Sets the color of the loading indicator displayed while content is loading.
Notification Colors
- Success: Sets the color used for success messages and confirmations.
- Warning: Sets the color used for warning and caution messages.
- Error: Sets the color used for error messages and validation alerts.
Back to Top
- Background: Sets the background color of the button.
- Color: Sets the color of the icon displayed inside the button.
- Border: Sets the border color of the button.
Other Colors
- Cursor Text Color: Sets the color of the text cursor (caret) displayed inside text input fields and text areas.
- Modal Overlay: Controls the color of the overlay displayed behind modal windows, popups, quick views, and other overlay-based components. Adjusting this color helps modal content stand out while dimming the rest of the page in the background.
Color Schemes
Color schemes control the colors used throughout your store. By creating multiple color schemes, you can assign different color combinations to sections and create visual contrast while maintaining a consistent brand identity.
How to Manage Color Schemes
- Go to Theme Settings → Colors.
- In the theme customizer, open Theme Settings → Colors to view, edit, or create color schemes.
Adding a New Color Scheme
- Click Add Scheme to create a new color scheme. Once created, you can customize its colors and assign it to supported sections throughout the theme.
Editing a Color Scheme
- Select an existing color scheme to modify its colors. Any changes are automatically reflected in all sections using that color scheme.
Using Color Schemes
- Color schemes can be applied to supported sections across your store. For example, you may use a light color scheme for content sections and a dark color scheme for promotional banners, featured collections, or footer areas.
Editing a Color Scheme
To edit a color scheme, go to Theme Settings → Colors and click on the scheme you want to modify. Any changes you make are automatically applied to all sections that use that color scheme.
Background
- Background: The primary background color for sections using this scheme. (Default: #FFFFFF)
- Foreground: The foreground surface color used within the scheme. (Default: #F2F2F2)
- Background Gradient: Optional gradient that replaces the solid background color when configured.
Text
- Text: The primary text color. (Default: #1C1C1C)
- Secondary Text: Used for supporting or less prominent text. (Default: #FFFFFF)
- Link: Color used for text links. (Default: #1C1C1C)
- Hover: Color used for interactive elements on hover. (Default: #1C1C1C)
Primary Button
- Background: Button background color. (Default: #1C1C1C)
- Text: Button text color. (Default: #FFFFFF)
- Border: Button border color. (Default: #1C1C1C)
- Hover Background: Button background color when hovered. (Default: Transparent)
- Hover Text: Button text color when hovered. (Default: #1C1C1C)
- Hover Border: Button border color when hovered. (Default: #1C1C1C)
Secondary Button
- Background: Button background color. (Default: Transparent)
- Text: Button text color. (Default: #1C1C1C)
- Border: Button border color. (Default: #1C1C1C)
- Hover Background: Button background color when hovered. (Default: #1C1C1C)
- Hover Text: Button text color when hovered. (Default: #FFFFFF)
- Hover Border: Button border color when hovered. (Default: #1C1C1C)
Section Heading
- Text: Section heading text color. (Default: #FFFFFF)
- Background: Section heading background color. (Default: #000000)
Tips for using color schemes
- Create multiple schemes to give different sections their own visual style while maintaining brand consistency.
- Use high contrast between text and background colors to improve readability.
- Preview changes across different sections to ensure colors remain accessible and visually balanced.
Removing a Color Scheme
To delete a color scheme, open the scheme and click Remove color scheme at the bottom of the editor. Any sections currently using that scheme should be reassigned to another color scheme before removal.