Colors

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.

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

Background & Text

Control the foundational colors of your option widgets.

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

Primary

Style your primary action elements like buttons and selections.

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.

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

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)