Color Schemes & Swatches

Wave uses a powerful color scheme system that lets you define multiple color palettes and apply them to different sections throughout your store.

Understanding color schemes

A color scheme is a set of colors that work together — backgrounds, text, buttons, borders, and accents. Wave supports multiple color schemes, so you can use different palettes for different sections of your store.

Each color scheme includes:

Color	Purpose
Primary	Main accent color for highlights and links
Secondary	Secondary accent color
Tertiary	Third accent color for variety
Background	Section background color (supports gradients)
Text	Primary text color
Text 2	Secondary/lighter text color
Button text	Text color on primary buttons
Button background	Background color of primary buttons
Button text inverse	Text color on secondary buttons
Button background inverse	Background color of secondary buttons
Layer 1	Background for cards and elevated elements
Layer 2	Background for nested/deeper elements
Overlay	Overlay color for images and modals
Border	Default border color
Error	Error state color (e.g., form validation)
Warning	Warning state color
Success	Success state color
Status 1, 2, 3	Additional status/badge colors

Creating and editing color schemes

1. Go to Online Store > Customize > Theme settings > Colors.
2. You'll see the default color schemes.
3. Click on a scheme to edit its colors.
4. Click Add scheme to create a new color scheme.
5. Name your scheme and set each color value.

Applying color schemes to sections

Each section and many blocks have a Color scheme setting:

1. Select the section or block in the theme editor.
2. Find the Color scheme setting.
3. Choose from your available schemes or select Inherit to use the parent's scheme.

This lets you create visual variety — for example, a dark section between light sections, or an accent-colored promotional banner.

Product variant swatches

Wave supports visual swatches for product variant options (especially colors).

Setting up color swatches

1. Go to Theme settings > Swatches to configure the swatch appearance:

   • Swatch size: Small, medium, or large.
   • Swatch shape: Circle or square.
   • Border: Show/hide border on swatches.
   • Hover effect: Enlarge, highlight, or shadow on hover.

2. Go to Theme settings > Variant pickers to configure how variant options are displayed:

   • Style: Dropdown, buttons, or pills.
   • Enable swatches: Turn on visual swatches for color options.
   • Show selected value: Display the selected option name.

How swatches work

Shopify automatically generates color swatches based on your variant option names. For example, a variant option named "Red" will display a red swatch. You can also use custom swatch images by uploading files to your store's files with specific naming conventions.

Dark mode

Wave includes built-in dark mode support. When enabled in Theme settings > Dark mode, the theme automatically switches to a dark color scheme based on the visitor's system preferences.

tip

Design your color schemes with both light and dark contexts in mind. Test how your colors look in both modes to ensure good readability and contrast.