Achieving Persistent Brand Colors in BigCommerce Page Builder: A No-Code Guide

Many BigCommerce merchants leverage the intuitive Page Builder to craft stunning storefronts. However, a common frustration arises when trying to maintain consistent brand colors: the color picker swatches in Page Builder don't seem to "remember" custom hex codes. This often leads to repetitive manual input, risking design inconsistencies and consuming valuable time. A recent BigCommerce forum thread tackled this exact challenge, revealing a clever, no-code workaround that every merchant should know.

The Problem: Colors That Don't Stick

The original query from Amy Hafemann highlighted a widespread issue: how to get custom colors to "stick" and be readily available for selection within the Page Builder area. Users often expect that once a color is used, it should automatically appear in the palette for future use, much like many design tools. However, BigCommerce's Page Builder operates differently.

Understanding BigCommerce's Color Logic

As Daniel Olvera from Trepoly.com clarified, the Page Builder's color swatches don't inherently save custom colors you pick directly within a widget. Instead, these swatches are dynamically generated based on the colors defined at the theme styles level. While some themes offer predefined slots for Primary, Secondary, and Accent colors, these might not cover all your branding needs or appear in every widget.

The No-Code Solution: Leveraging Theme Styles

Sajid Jameel from Codinative.com provided the most impactful solution: a tested, no-code method to ensure your brand colors persist as swatches across all Page Builder widgets. The key insight is that the Page Builder color picker dynamically aggregates every hex code saved across your Theme Styles. This means if a color is saved anywhere in your theme's customization settings, it will automatically appear as a swatch in Page Builder.

Here's how to implement this simple yet effective strategy:

• Step 1: Access Theme Customization. Navigate to Storefront → My Themes. On your active theme, click Customize.
• Step 2: Inject Your Brand Colors. Within the theme customizer, open any available color setting. This could be "Body text," "Link color," "Heading color," "Button background," or any other color input field. Set this field to one of your specific brand hex codes. Repeat this process for each unique brand color you wish to make available in Page Builder. The specific element you tie the color to doesn't strictly matter for its appearance in Page Builder, only that the hex code is saved within the theme styles.
• Step 3: Save Your Theme. Crucially, save your theme changes. This action commits your brand hex codes to the theme's stylesheet.
• Step 4: Reopen Page Builder. Now, when you return to Page Builder and open any widget with a color picker, you will find your brand colors prominently displayed as persistent swatches, ready for consistent application across your site.

This method effectively "tricks" Page Builder into recognizing and displaying your essential brand colors, ensuring design consistency without needing to manually re-enter hex codes.

When You Need More: Developer-Level Customization

For merchants with an extensive palette of brand colors, or those who prefer a cleaner, more organized approach where each color is tied to a meaningful, named storefront use, Sajid also hinted at a more advanced solution. This involves adding custom color settings directly to your theme via its schema.json and config.json files. This developer-level customization provides dedicated, named brand color slots that not only render on the storefront but also automatically populate as persistent swatches in Page Builder. While this requires technical expertise or the help of a BigCommerce partner, it offers the ultimate control over your theme's color palette.

Conclusion

Maintaining brand consistency is paramount for any e-commerce business. This community insight from the BigCommerce forum provides an invaluable, no-code technique for ensuring your brand colors are always at your fingertips within the Page Builder. By strategically utilizing your theme's customization settings, you can streamline your design process, enhance consistency, and save significant time. For complex branding needs, remember that developer-level theme modifications offer even greater control, underscoring the flexibility available within the BigCommerce ecosystem.