The Color Picker is a tool in the Theme Tweaker add-on (also known as Storefront Builder), that lets you change the colors of your X-Cart store without editing any CSS code. It's a simple way to give your website a unique look that matches your brand and appeals to your customers!

Ensure the Theme Tweaker add-on is installed and enabled.

To get started, enable the custom colors feature in the menu.

Once you enable Use custom colors , a new color editor section will appear in the menu with two levels:

Let’s take a closer look at what each section allows you to do.

This section will be named after your current theme (e.g., Dark Theme Colors). Here, you can customize the primary color palette of your storefront.

Click on any variable (colored square ) next to their title in the theme section. This will open the Color Picker popup, where you can customize the color to your liking using sliders, a color wheel, or by entering a hex code or RGB values.

As you make changes, you’ll see them instantly in the live store preview, allowing you to adjust and perfect your selections across different pages.

When you’re satisfied, click Save to apply the changes to your storefront immediately.

Next, let’s take a look at what each of the variables (or color options) controls.

Below the Theme color options, you’ll find the Other Variables section. It includes more specific settings, like warning colors, top menu popup backgrounds, or button border colors on hover. Explore these settings to add a personal touch to your store.

When you done, click Save and your color changes will be immediately visible to your customers.

To revert your adjustments, disable Use custom colors toggle. Then click Save in the top right corner.

Please note, when you re-enable this toggle, changes you made before will be lost, and you will need to start over.

Choosing the right colors is key to making your website readable and user-friendly. Here are a few tips to ensure a seamless experience for your visitors:

Make sure your customers can easily read text and interact with your website by choosing colors with enough contrast. For example, your text should stand out clearly against the background.

Aim for a contrast ratio of at least 4.5:1 for regular text and 3:1 for larger text to meet WCAG (Web Content Accessibility Guidelines). Use tools like WebAIM to check contrast ratios, and simulators to confirm your design works well for color-blind users.

A good color palette enhances your website’s design and guides customers to make a purchase. Clarity is key – if it's not obvious where to click or too many colors distract from key elements, your color choices aren't serving their purpose.

Start with a primary color that reflects your brand’s identity or message. This color will define key elements of your website, like buttons, headers, and calls to action (CTA).

Use bold, high-contrast shade for these key elements to make customers click, but make sure it doesn’t clash with the rest of your design.

Next, pick complementary colors for accent and highlights. These colors can be used for secondary action buttons, selectors, links, and other elements that need emphasis.

Avoid overly bright or saturated colors (e.g., #FF0000 , #FFFF00 , or #800080 ) for the overall design, as they can strain the eyes. Instead, use muted or pastel shades for a more comfortable viewing experience.

Also, remember that colors carry different cultural meanings – red might symbolize luck in one country but caution in another. Adjust your palette to align with your target market and avoid unintended messages.

Colors can vary by screen type (TFT, LCD, OLED) and settings, sometimes appearing more saturated on one screen and less so on another. Before going live, test your site on multiple devices and adjust colors if needed to ensure consistency, making it easier for customers to browse and complete purchases.

If you're unsure about your color choices, consider working with a designer to ensure your website is visually appealing and accessible.