This guide describes the Theme settings > Colors menu options to set how colors are displayed throughout your store.
In the following video, to set buttons to use the color scheme's accent color, the settings in Theme settings > Colors > Buttons are changed from Text to Accent. In the video, the accent color is applied to solid buttons and outline buttons. Solid buttons have a solid color background, outline buttons have a solid color outline with a transparent background.
For general guidance with adjusting a theme setting, refer to Settings.
With Label, you can create 3 different sets of colors called color schemes.
Color schemes provide a quick and easy way to use colors consistently across your store. Instead of colorizing store elements individually, whenever you apply colors to blocks, sections and page templates, simply reuse the colors from your color schemes.
The following table describes Label's color schemes.
|Color scheme name||Description|
|Primary||This is your store's default color scheme.|
|Secondary||A second color scheme option for your store.|
|Tertiary||An optional third color scheme for your store.|
Primary color scheme
To set up colors to use with the Primary color scheme:
Go to Theme settings > Colors > Primary color scheme.
Select one of the following elements to colorize.
Text. Set the default color for text.
Background. Choose a background color.
Accent. Set a color for accented elements, like hover over text and hyperlinks.
Secondary. Specify a color for secondary elements, like social media share links.
Border. Choose a color for borders.
Select a color using the color picker, enter a hex color value or choose a Currently used color.
For example, in the following image, the primary color scheme's Background element is selected.
Secondary color scheme
Provides the Secondary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.
Tertiary color scheme
Provides the Tertiary color scheme with the same color options as the Primary color scheme for Text, Background, Accent, Secondary, and Border.
Theme settings provides two styling options for buttons:
Solid. Solid style buttons have a color background and color outline (border).
Outline. Outline style button have a transparent background and color outline.
The following image shows examples of Solid (left) and Outline (right) style buttons.
Set a color for buttons
To set a color for buttons:
Go to Theme settings > Colors > Buttons.
Use the Solid button color dropdown to set the color for solid style buttons to Text or Accent.
Text. Sets the solid button color to the color scheme's Text color.
Accent. Sets the solid button color to the color scheme's Accent color.
Use the Outline button color dropdown to set the color for outline style buttons to Text or Accent.
Text. Sets the outline button color to the color scheme's Text color.
Accent. Sets the outline button color to the color scheme's Accent color.