Colors

Theme settings - Colors

The Colors settings in your theme allow you to customize and harmonize the look of your online store by assigning specific colors to various elements. This ensures a cohesive visual experience across all sections of your theme while aligning with your brand identity.

Note: Colors can be applied to sections throughout your online store using the Color scheme setting. To effectively use Color scheme, refer to the explanation below.

In the theme editor, click the Theme settings, then click to open the Colors tab.

1. General:

These settings determine the default colors for text, headings, links, and the page background.

• Heading: Customize the color of all headings across sections for consistency.

• Text: Select the color for body text in all sections.

• Page background: Defines the body background color of the theme.

• Text link: Allows you to assign a distinct color to all hyperlinks.

2. Buttons:

These settings let you define the appearance of buttons across the theme:

• Button label: Choose the text color for buttons.

• Button background: Assign a background color to buttons.

• Outline button: Select a color for the button outline.

3. Color scheme overview

Color schemes are predefined groupings of colors that can be applied to sections for quick and cohesive styling. The Color scheme options are available in certain sections, blocks, and general theme settings.

Color scheme options:

a. Default:

Uses the colors defined in General and Buttons settings for the section's elements.

➝ The colors configured in General and Buttons settings will be applied to all sections when the "Default" option is selected in the Color scheme setting for a section.

b. Accent 1, Accent 2, Accent 3 (Primary colors):

• These schemes are typically associated with bold, darker colors. Assigned to sections for strong visual emphasis.

• Settings:

  • Foreground: Sets the text and foreground element color for sections using a Primary color scheme.

  • Accent 1, Accent 2, Accent 3: Specifies the background color for sections assigned to these schemes.

  • Gradient: Each accent color can be enhanced with a gradient effect instead of a solid color.

c. Background 1, Background 2, Background 3 (Secondary colors):

• These schemes are typically associated with lighter, softer tones. Ideal for backgrounds and areas needing subtle contrast.

• Settings:

  • Foreground: Defines the color for text and foreground elements in sections using a Secondary color scheme.

  • Background 1, Background 2, Background 3: Determines the background color for sections assigned to these schemes.

  • Gradient: Similar to Primary colors, you can apply gradients to Secondary colors for a modern effect.

After you define your color scheme in your theme settings, you can assign a color scheme using the Color scheme setting in your theme's sections and blocks.

How to apply a color scheme to the section?

• Go to theme editor → Select a section. (eg: Rich text)

• Look for the color scheme setting. The setting is usually located at the end of a section’s settings panel, after all main settings.

• Choose from None, Accent 1-2-3, or Background 1-2-3.

• Click Save to apply the changes.

By leveraging these comprehensive color settings, you can fully customize your theme’s visual identity while ensuring consistency and brand alignment. The flexibility offered by Primary and Secondary color schemes, combined with gradient options, ensures a modern and engaging design throughout your store.