HubSpot Asset Marketplace module requirements

Last updated:

On October 20, 2022, templates, template packs, modules, and email templates will no longer be available for purchase, download, or upgrade in the HubSpot Asset Marketplace. Please read our changelog announcement for more information.

Below, learn about the requirements that a theme's modules need to meet when submitting a theme to the Asset Marketplace.

Module restrictions

Modules must not contain HubDB, calls to Serverless Functions, or the CRM Object Field.

Module screenshots

Modules must contain, at minimum, the following screenshots:

  • How the module will appear on the page to front end users.
  • The page-level editor settings of the module.
    • If repeater content is used in the module, you must provide a screenshot of one instance of the repeating item settings.

An example of this can be found in our Accordion Toggle module on the marketplace.

Module content

Learn about the requirements for module labels and help text, fields, and default content.

Module labels & help text

  • Modules must have descriptive labels that convey the purpose of the module. The label Hero Banner with Parallax Scrolling is descriptive, whereas the labels Hero Banner and Gallery are not. 
  • Module labels must not contain numbers, such as Hero Banner 01.
  • Module labels must not contain abbreviations, such as Col instead of Column.
  • Module should not be named the same as a default module.
  • Modules must contain inline help text where applicable to further convey how to use the module.

Default content

  • Default field content should represent the field’s purpose, and cannot include Lorem ipsum.
    • When including menu fields, modules must use Select a menu as the default content option.
    • When including form fields, modules must use Select a form as the default content option.
    • When including blog selector fields, modules must use Select a blog as the default content option.
  • If adding default content to a module doesn't make sense, use a module placeholder instead to help the content creator visualize the space that they'll fill with content.

Module fields

  • Module field names should describe the field’s intent. For example, if a text field is meant to include a person’s job title, Job Title would be a proper description whereas Title would not.
  • A portion of the theme's color and logo fields must inherit from the account's brand settings:
    • At a minimum, three color fields must inherit colors from the account's brand settings. Additional color fields can default to other colors, including black and white.
    • At least one logo field must inherit from the account's brand settings. If using an image field to render a logo, the image field does not have to inherit from the brand settings.

Module icons

Modules must include a custom icon assigned to the module (replacing the default icon). Do not use company logos as icons, such as Apple or Amazon logos. Learn more about module icons.

Module code quality

The following requirements must also be met in conjunction with our initial requirements about code quality in our HubSpot Asset Marketplace Compliance, Design, Code Quality, and Disclaimers section. The following requirements are specific to modules.

Modules must be self-contained

All module code must be self-contained and not rely on code located elsewhere. External files utilized inside of modules must use the Linked Files feature.

Styles and JavaScript

  • Styles:
    • Modules must have a non-empty style group.
    • Do not hardcode inline styles within modules. Instead, use dynamic inline styles by enabling fields to control styling.
  • Javascript:
    • JavaScript should reference DOM elements by module specific classnames to ensure elements outside of the module are not unintentionally affected. 
    • All JavaScript must be able to represent multiple instances of a module. JavaScript in the JS Pane will only load once per page, regardless of the number of module occurrences.

When creating modules, you can use a built-in variable called {{name}}. This variable pulls in the module's instance ID (which can be used in the HTML+HubL panel only) to help in CSS and JS markup for complex modules. Learn more about this in our developer documentation.

Field organization

The following field organization and grouping requirements must be met.

Content tab

  • Where there is at least one control within a field group, all controls must be grouped into categories labeled by their function.
  • Module fields added to the Content tab must provide ways to customize the content of a module. For example, controls for font size, image, icon, alt-text, and link controls.

Styles tab

  • Module style field groups must be consistent and follow a pattern. Below is a recommended order for your style field groups. These groups can either be at the top level or nested one group deep. Empty groups may also be removed:
    • Presets
    • Text
    • Background
    • Border
    • Hover
    • Corner
    • Spacing
    • Alignment
    • Custom style groups that don't fit the above
    • Advanced
  • Animation options should always be positioned near the bottom of the field group list.
  • Options that allow content creators to add code snippets or CSS should be grouped at the end of the field group list under a field labeled Advanced
  • Controls should be standardized across all modules. For example, all elements that can have a border radius control should offer that control. Avoid offering controls on some modules that are absent on others.
  • Module fields added to the Style tab must provide ways to style the module. For example:
    • Style options such as color, text styling, alignment, spacing, border, and corner radius.
    • Animations such as hover and slide-in effects.
    • Presets such as dark and light themes that are meant to change many styles at the same time.

Examples

Presets

Presets can be used when wanting to give content creators a limited set of options, often tying back to theme settings. For example, the Icon module included in the Growth theme contains presents for Dark and Light colors, which enables consistency when used across the website. 
growth-icon-presets

Multi-level grouping

When deciding whether to keep style fields at the top level or nest them, consider the following example.

The Icon module included in the Growth theme lists all its styles at the top level because it's one component, and therefore its style options all impact the one component. 

growth-theme-icon-module

The Speaker card module included in the Growth theme contains multiple components: the card's image and its text contents. Module styles are therefore grouped by component so that the content creator has a more clear process for styling each component.

growth-theme-speaker-card

Grouping individual fields

The button module below contains groupings for Presets, Text, Background, and more. Although the Corner field group contains only the corner radius control, it’s still grouped to create a uniform content creation experience.

module-requirements-2_1

module-requirements-2_2


Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.