ESHOPMANESHOPMAN Logo
Our Blog

HubSpot CMS Pro-Tip: Mastering Global Colors in Modules for Brand Consistency

HubSpot CMS Pro-Tip: Mastering Global Colors in Modules for Brand Consistency

Hey there, ESHOPMAN readers! As experts deeply embedded in the world of HubSpot and e-commerce, we often see brilliant discussions unfold in the HubSpot Community. It's a goldmine for practical solutions, and today we're diving into a common challenge that many HubSpot users, especially those running storefronts or complex marketing sites, face: how to enforce brand-approved global colors within custom modules.

Maintaining a consistent brand identity is non-negotiable, especially when your HubSpot portal is the central nerve point for your marketing, sales, and even your e-commerce operations. Whether you're using HubSpot as your primary storefront or as a powerful crm that integrates with shopify, ensuring every button, banner, and background adheres to your brand guidelines is crucial. But sometimes, HubSpot's module fields can throw a curveball.

The Challenge: Global Colors vs. Module ColorFields

Recently, a community member posed a very relevant question: "Is it possible to pass the colors defined in fields.json to a colorfield? I want to limit the colors a user can set on a module to only the ones defined in fields.json."

The original poster was looking to restrict the color choices in a module's `ColorField` to a predefined set of global colors, like those typically set up in a `fields.json` file for theme-level control. This is a smart move for brand consistency, preventing content editors from accidentally picking off-brand hues. They shared their module field setup:

And their desired global color definitions from `fields.json`:

[
  {
    "label": "Global colors",
    "name": "global_colors",
    "type": "group",
    "children": [
      {
        "label": "Primary",
        "name": "primary",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "brand_settings.primaryColor"
          }
        },
        "default": { "color": "#ba1c2f" }
      },
      {
        "label": "Secondary",
        "name": "secondary",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "brand_settings.secondaryColor"
          }
        },
        "default": { "color": "#1b1b1b" }
      },
      {
        "label": "Accent 1",
        "name": "accent1",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "brand_settings.accentColor1"
          }
        },
        "default": { "color": "#6f645b" }
      },
      {
        "label": "Accent 2",
        "name": "accent2",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "brand_settings.accentColor2"
          }
        },
        "default": { "color": "#d9d3cd" }
      },
      {
        "label": "Accent 3",
        "name": "accent3",
        "type": "color",
        "inherited_value": {
          "property_value_paths": {
            "color": "brand_settings.accentColor3"
          }
        },
        "default": { "color": "#7f0321" }
      },
      {
        "label": "White",
        "name": "white",
        "type": "color",
        "default": { "color": "#ffffff" }
      },
      {
        "label": "Light Gray",
        "name": "light_gray",
        "type": "color",
        "default": { "color": "#f2f2f2" }
      },
      {
        "label": "Medium Warm",
        "name": "medium_warm",
        "type": "color",
        "default": { "color": "#a89c92" }
      },
      {
        "label": "Black",
        "name": "black",
        "type": "color",
        "default": { "color": "#000000" }
      }
    ]
  }
]

The core issue here is that HubSpot's `ColorField`'s `limitedOptions` property is designed to pull directly from `brand_settings` (the theme's brand colors), not arbitrary paths within `fields.json` or other global theme settings. This means you can't directly point it to your custom `global_colors.primary` defined in `fields.json` like you can with `brand_settings.primaryColor`.

The Expert Workaround: Leveraging Choice Fields and CSS

A helpful community member provided an elegant workaround that many HubSpot developers employ for this exact scenario. The solution? Ditch the `ColorField` for this specific use case and instead implement a `choice-field` combined with clever CSS.

Step-by-Step Implementation:

  1. Define Your Global Colors (if you haven't already): Ensure your `fields.json` (or `theme.json` if you're using a newer theme structure) has your global colors defined, similar to the original poster's example. These colors will be accessible via HubL as `{{ theme.colors.your_group_name.color_name.css }}`.
  2. Create Corresponding CSS Classes: In your theme's CSS file (or a global CSS file), create classes that apply these global colors. You can use direct HubL interpolation or CSS variables for more flexibility.

    Using direct HubL interpolation:

    .primary-bg{
   background-color: {{theme.colors.global_colors.primary.css}};
}

.primary-text{
   color: {{theme.colors.global_colors.primary.css}};
}

.secondary-bg{
   background-color: {{theme.colors.global_colors.secondary.css}};
}

.secondary-text{
   color: {{theme.colors.global_colors.secondary.css}};
}
...

    Or, for a more robust and maintainable approach, use CSS variables:

    :root{
--primary: {{theme.colors.global_colors.primary.css}};
--secondary: {{theme.colors.global_colors.secondary.css}};
--accent1: {{theme.colors.global_colors.accent1.css}};
/* ... add all your global colors */
}

.primary-bg{
   background-color: var(--primary);
}

.primary-text{
   color: var(--primary);
}

.secondary-text{
   color: var(--secondary);
}
...

    Remember to adjust `global_colors` to match the `name` of your color group in `fields.json`.

  3. Implement a Choice Field in Your Module: Replace your `ColorField` with a `choice` field. The `choices` array will contain the labels you want content editors to see, and the `value` for each choice will be the corresponding CSS class name you just created.
  4. Apply the Class in Your Module HTML/HubL: In your module's HTML (or `module.html` file), use the value from the `choice-field` to dynamically apply the correct CSS class. 
    
  {{ module.buttonText }}

    This approach gives content editors a dropdown of pre-approved color options, ensuring they can only select colors that align with your brand guidelines. It's a fantastic way to maintain visual consistency across your entire HubSpot-powered digital presence, from your landing pages to your product listings.

    ESHOPMAN Team Comment

    This community discussion perfectly illustrates a common friction point in HubSpot CMS development: the desire for ultimate flexibility versus the platform's inherent structure. While we'd love a direct `ColorField` property to pull from any `fields.json` path, this `choice-field` and CSS class workaround is robust and widely adopted. It's a prime example of how HubSpot developers adapt and extend the platform to meet complex branding requirements, ensuring a consistent user experience whether you're building a simple landing page or a fully automated shopify store experience within HubSpot.

    While it might seem like an extra step, this method offers significant control and prevents brand drift, which is invaluable for any business, especially e-commerce sites. It empowers marketers and RevOps teams to build and manage content efficiently, knowing that the underlying design system is enforced. This kind of thoughtful development is key to leveraging HubSpot's full potential, ensuring your digital storefront looks polished and professional, and your brand message is always on point.

Share: