Colors

Customize all colors used in your option widgets to match your brand perfectly.

Overview

The Colors tab gives you complete control over every color element in your product options. All changes are reflected in real-time in the Live Preview, making it easy to fine-tune your brand colors.

9 color settings across three sections let you create a cohesive, branded experience.

Background & Text

Control the foundational colors of your option widgets.

Color Setting	What It Controls	Example Use
Background	Main background color for option widgets	The container background behind your options
Text	Primary text color for labels and content	Option labels like "Size" or "Color", option values
Border	General border color for containers and dividers	Outer borders of option containers, dividing lines

Best practice: Ensure strong contrast between Background and Text colors for readability.

Primary

Style your primary action elements like buttons and selections.

Color Setting	What It Controls	Example Use
Background	Background color for primary actions	Selected option buttons, checkboxes, radio buttons
Foreground	Foreground color inside primary actions	Text and icons inside selected elements

Best practice: Use your brand's primary color for Background. Ensure Foreground color is readable against it (use white text on dark backgrounds, dark text on light backgrounds).

Input Fields

Customize the appearance of text inputs, dropdowns, and other input elements.

Color Setting	What It Controls	Example Use
Input Background	Background color for text inputs and dropdowns	Behind text when customers type
Input Text	Text color inside input fields	The actual text customers type
Input Placeholder	Placeholder text color	Hint text like "Enter your name..."
Input Border	Border color for input fields	Outline around text boxes and dropdowns

Best practice:

• Keep Input Background light for easy reading
• Make Input Placeholder subtle (lighter than Input Text)
• Ensure Input Border is visible but not too bold

How to Customize Colors

Step 1: Open Colors Tab

1. Navigate to Customization page
2. Click the Colors tab
3. All 9 color settings are displayed with live preview

Step 2: Change a Color

You have two methods:

Method 1: Color Picker

1. Click the color circle next to any setting
2. Color picker opens
3. Select your desired color visually
4. Color updates in Live Preview immediately

Method 2: Hex Code

1. Click in the hex code field (e.g., #ffffff)
2. Enter your brand's hex code directly
3. Press Enter or click away
4. Color updates in Live Preview immediately

Use Your Brand Colors

Most brands have established hex codes. Enter them directly for pixel-perfect brand matching.

Step 3: Review in Live Preview

1. The right panel shows your changes in real-time
2. Interact with the preview to see colors in action
3. Test different option types (buttons, checkboxes, inputs)
4. Verify readability and visual appeal

Step 4: Save or Discard

To apply your colors:

1. Review all changes in Live Preview
2. Click Save in the contextual save bar
3. Colors go live on your storefront immediately

To cancel:

1. Click Discard in the contextual save bar
2. All unsaved color changes are reverted

Color Harmony Tips

Create Contrast

High contrast improves readability:

• Light background + Dark text ✓
• Dark background + Light text ✓
• Similar colors = hard to read ✗

Stay Consistent

Use your brand palette:

• Primary colors for main actions
• Neutral colors for backgrounds
• Consistent across all elements

Test Accessibility

Ensure colors work for everyone:

• Check color contrast ratios (WCAG AA: 4.5:1 for text)
• Test with colorblindness simulators
• Verify readability in different lighting conditions

Consider Your Theme

Blend with your store:

• Match your store's existing color scheme
• Use complementary colors, not competing ones
• Keep overall aesthetic cohesive

Common Color Schemes

Minimal & Clean

• Background: #ffffff (white)
• Text: #000000 (black)
• Border: #e0e0e0 (light gray)
• Primary Background: #000000 (black)
• Primary Foreground: #ffffff (white)

Bold & Modern

• Background: #ffffff (white)
• Text: #1a1a1a (dark gray)
• Border: #d1d1d1 (gray)
• Primary Background: #ff6b6b (coral red)
• Primary Foreground: #ffffff (white)

Professional & Trust

• Background: #f8f9fa (light gray)
• Text: #212529 (dark gray)
• Border: #dee2e6 (medium gray)
• Primary Background: #0066cc (blue)
• Primary Foreground: #ffffff (white)

Start with a Template

Apply a template first, then adjust colors to fine-tune the look. Templates provide professionally balanced color combinations.

Troubleshooting

Color Not Changing

Check:

• You're entering valid hex codes (6 characters, 0-9 and a-f)
• Include the # symbol
• Click Save (not just preview)
• Clear browser cache if needed

Poor Contrast

Issue: Text is hard to read

Solution:

• Increase contrast between Text and Background
• Use darker text on light backgrounds
• Use lighter text on dark backgrounds
• Test with online contrast checkers

Colors Look Different on Storefront

Possible causes:

• Browser cache needs clearing
• Theme CSS overriding app colors
• Different monitors/devices show colors differently

Solution:

• Clear cache and test in incognito window
• Check for conflicting theme styles
• View on multiple devices to verify

Preview Doesn't Match Hex Code

Check:

• All 6 characters are valid (0-9, a-f)
• No extra spaces or characters
• Refresh if needed

Next Steps

After customizing your colors:

1. Adjust borders and shapes for complete styling
2. Configure storefront settings for functionality
3. Test on your live store with real products
4. Gather customer feedback and refine as needed