Colors

Overview #

The theme settings are designed to control the overall look and feel of the shop by defining core color settings. These settings are applied across the entire theme but can be overridden at the section or block level. The settings allow for customization of various elements such as backgrounds, text, buttons, banners, cards, icons, inputs, and more, ensuring a cohesive and visually appealing design.

Key components and functionality #

Colors

This section allows you to customize the color scheme of your theme, affecting various elements throughout the shop.

Background colors

Customize the background colors to create a distinct visual identity for your shop.

• Body background: Sets the background color for the main body of the shop.
• Alternate background: Provides an alternative background color option for different sections.

Text colors

Define the text colors to ensure readability and brand consistency.

• Heading text: Defines the color for headings.
• Body text: Sets the color for the main text content.
• Body links: Specifies the color for links within the body text.
• Body links hover: Changes the link color when hovered over.

Primary button colors

Enhance user interaction with visually appealing primary buttons.

• Button background: Sets the background color for primary buttons.
• Button border: Defines the border color for primary buttons.
• Button text color: Specifies the text color for primary buttons.

Primary button hover colors

Provide feedback to users with hover effects on primary buttons.

• Button background hover: Changes the background color when primary buttons are hovered over.
• Button border hover: Alters the border color on hover.
• Button text color hover: Adjusts the text color on hover.

Secondary button colors

Differentiate secondary actions with distinct button colors.

• Button background secondary: Sets the background color for secondary buttons.
• Button border secondary: Defines the border color for secondary buttons.
• Button text color secondary: Specifies the text color for secondary buttons.

Secondary button hover colors

Enhance secondary button interactions with hover effects.

• Button background hover: Changes the background color when secondary buttons are hovered over.
• Button border hover: Alters the border color on hover.
• Button text color secondary hover: Adjusts the text color on hover.

Banner colors

Highlight important information with customizable banner colors.

• Banner background color: Sets the background color for banners.
• Banner background gradient: Provides a gradient option for banner backgrounds.
• Banner border: Defines the border color for banners.
• Banner heading: Specifies the color for banner headings.
• Banner icon: Sets the color for icons within banners.
• Banner subheading: Defines the color for banner subheadings.
• Banner text: Specifies the text color for banners.
• Banner overlay color: Sets the overlay color for banners.
• Banner overlay gradient: Provides a gradient option for banner overlays.
• Banner overlay opacity: Adjusts the opacity of the banner overlay, with a default of 40%.

Card colors

Create visually appealing cards with customizable colors.

• Card background: Sets the background color for cards.
• Card background gradient: Provides a gradient option for card backgrounds.
• Card border: Defines the border color for cards.
• Card heading: Specifies the color for card headings.
• Card text: Sets the text color for cards.

Icon colors

Ensure icons are visible and consistent with your theme's color scheme.

• Icons: Sets the color for icons.
• Icons hover: Changes the icon color when hovered over.
• Icons inactive: Defines the color for inactive icons.

Input colors

Customize input fields to match your theme's design.

• Input placeholder text: Sets the color for placeholder text in input fields.
• Input text: Defines the color for text entered in input fields.
• Input background: Specifies the background color for input fields.
• Input border: Sets the border color for input fields.

Miscellaneous colors

Adjust additional elements to complete your theme's color palette.

• Borders: Defines the color for borders throughout the theme.
• Page overlay color: Sets the color for page overlays.
• Sale price: Specifies the color for sale prices.

Swatches

Create custom color swatches for product variants to enhance product presentation.

• Custom color swatches: Allows for the creation of custom color swatches for product variants.

Usage examples #

1. Customizing the theme's color palette: By adjusting the background and text colors, you can create a unique look that aligns with your brand's identity.

2. Enhancing user interaction: Use hover colors for buttons and links to provide visual feedback, improving the user experience.

3. Highlighting promotions: Set distinct colors for sale prices and banners to draw attention to promotions and special offers.

This documentation provides a comprehensive overview of the theme settings, enabling users to effectively customize their shop's appearance.