Skip to Content

Update a nested/grouped field on a HubSpot custom module (HubL module or dnd_module)

⚠️ Note that this post hasn't been updated for at least a year and the information may be outdated, proceed with caution! (Last updated: July 7, 2020)

On HubSpot's new local development tools for the CMS Hub, you have the option to create a custom module with grouped fields.

Simple fields within the group

By simple fields I'm referring to fields with a single value, like a text or number field.

For example, in this "Hero Banner" custom module I've built, I have an "Advanced Options" section in which users can update the background image's horizontal and vertical positions. It looks like this in the UI:

Hubspot custom module - grouped choice fields

I can use this module as a drag-and-drop module (dnd_module) in a drag-and-drop section (dnd_section).

I'll use the group name in the attribute field ("advanced_option") and for it's value I'll use JSON to access each field, like this: 

{% raw %}{% module
  path="../modules/Hero Banner.module",
  advanced_options = {
    'imgx' : 'center',
    'imgy' : 'center'
{% end_module %}

More complex fields within the group (e.g. colour picker)

If you have a more complex field with nested values like color picker field in your custom module and want to select that from within a HubL {% module %} or {% dnd_module %} it's best to use a module block tag.

For example, in this Social Icons custom module I have a Group called "styling" with two Color fields to set an icon's colour and hover colour. It looks like this in the UI:

Grouped colour picker fields on a HubSpot custom module

To update those values on my dnd_module, I'll use the block syntax. and can update my grouped colour values as follows: 

{% module_block module "social_icons" path="../../modules/social-links.module" %}
  {% module_attribute 'styling' is_json=true %}
      "icon_colour": {
        "color": "#FFFFFF",
        "opacity": 100
      "icon_hover_colour": {
        "color": "#FFFFFF",
        "opacity": 70
  {% end_module_attribute %}
{% end_module_block %}
So now my template has some default options for nested fields!

←  Previous Article

Give a HubSpot custom module a unique ID

Next Article  →

Set a HubSpot module field's Display Conditions in local development


Get help from a HubSpot CMS Expert

  • Custom HubSpot themes and reusable and easy-to-use HubSpot templates and modules
  • Technical support and guidance on the HubSpot CMS