Template Marketplace | Module requirements

​

Module restrictions

• HTML
• Full-width modules
• Forms and multi-step forms
• Spacer modules or modules that create non-UI page structure
• Modules that duplicate default module functionality
• Commerce-specific modules
• Email-specific modules

​

Module 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 underscores.
• Module labels must not contain abbreviations, such as Col instead of Column.
• Modules must contain inline help text where applicable to further convey how to use the module.
• Modules should not be named the same as a default module.
• For independent modules, the module label should match the name on the template listing. For example, if your template listing is SuperAwesome Banner with Scrolling, your module label should be the same.

​

Default content

• Default field cannot include Lorem ipsum text.
• Default field content should represent the field’s purpose:
  • 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 icons

​

Modules that require 3rd party accounts

​

Module fields

• For modules in a theme:
  • Must contain inline help text and specific default content for certain fields.
  • 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.
• For both modules in a theme and independent modules:
  • 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.
  • All of HubSpot’s default modules must be styled and must display properly on all templates submitted.

​

fields.json and module.html configuration

​

Module code quality

​

Modules must be self-contained

​

Theme modules

​

Independent modules

document.addEventListener('DOMContentLoaded', function () {
  // Put Javascript here
});

​

Code restrictions for independent modules

• It is recommended to use vanilla JS where possible. Adding a jQuery library to a site that is not using jQuery can potentially cause conflicts and slow down the website page.
• If using a jQuery library, use the require_js() function to include the library in the event that jQuery is turned off with the checkbox (Boolean) in account settings to avoid conflicts from multiple jQuery libraries.

{% if not site_settings.include_jquery %}
{{ require_js("https://code.jquery.com/jquery-3.7.0.min.js", "footer") }}
{% endif %}

​

Categories

• All independent modules must have at least one category. Modules submitted as part of a theme are not required to have categories, but it’s best practice to include at least one. Learn more about adding categories to modules.

​

Class name selectors

• Any class name selectors must be prefixed with the module name, replacing spaces with hyphens. For example, below is the module.html file for a button named example-button, with each class name and CSS selector reflecting its name.

<style>
{% scope_css %}
{# Button wrapper #}
 {% if module.styles.group_alignment.alignment %}
  .example-button-wrapper {
   text-align: {{ module.styles.group_alignment.alignment.horizontal_align }};
   }
 {% endif %}

{# Button #}

.example-button {
 {% if module.styles.group_background.color.color %}
  background-color: rgba({{ module.styles.group_background.color.color|convert_rgb }}, {{ module.styles.group_background.color.opacity / 100 }});
 {% endif %}
 }
 {% end_scope_css %}
</style>
{% end_require_css %}

{##### Module HTML #####}

<div class="example-button-wrapper">
 <a href="https://developers.hubspot.com/docs{{ href }}" class="example-button"
 {% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}
 {% if rel %}rel="{{ rel|join(" ") }}"{% endif %}
 >
  {{ module.button_text }}
 </a>
</div>

​

Styles and Javascript

• Styles:
  • Modules must have a non-empty style group.
  • Hardcoding inline styles within modules is not recommended. Instead, use dynamic inline styles by enabling fields to control styling.
• JavaScript:
  • 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.
  • JavaScript should reference DOM elements by module-specific class names to ensure elements outside of the module are not unintentionally affected.

​

Field organization

​

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 give ways to customize the content of a module. For example, controls for image, icon, alt text, and link controls.

​

Styles tab

• Presets
• Text
• Background
• Border
• Hover
• Corner
• Spacing
• Alignment
• Custom style groups that don’t fit the above
• Advanced

• Alignment
• Background image
• Border
• Color
• Font
• Gradient
• Spacing
• Text alignment

• 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 of field organization

​

Presets

​

Multi-level grouping

​

Grouping individual fields