HubSpot Asset Marketplace theme requirements

Last updated:

Below, learn about the requirements that themes need to meet when submitting to the HubSpot Asset Marketplace.

Please note: templates included in your theme cannot be submitted as individual templates for sale in addition to your theme.

1. Minimum required templates for themes

When submitting a theme, you must include at least one of the following:

Your theme must also include the following system page templates:

2. Theme.json, Theme Fields, and Theme Settings

Your themes must adhere to the following:

2.1 Theme.json file

Your theme.json file must include the following parameters:

// theme.json { "label": "Your Theme Name", "preview_path": "./path/to/preview-page.html", "screenshot_path":"./path/to/screenshot.jpg", "enable_domain_stylesheets": false, "version":"1.0", "author":{ "name":"Your Marketplace Provider Name", "email":"provider@email.com", "url":"https://theme-provider-url.com/" }, "documentation_url":"https://theme-provider-url.com/your-theme/documentation", "example_url":"https://theme-provider-url.com/your-theme/demo" }

Learn more about these parameters in the theme.json documentation.

2.2 Theme Settings

2.2.1 Editor style conflicts

Your theme settings must not conflict with your editor styles or styles set through a module. An example of this is usage of the !important property in your CSS. This makes it very hard for end users to override and would cause a conflict.

2.2.2 Descriptive Labels for Settings

Your theme settings must use descriptive labels for each setting so the end-user knows what they are changing.

2.2.3 Theme Settings Must Apply to All Templates in the Theme

Your theme settings must apply to all templates inside of your theme unless there is a specific use case for additional styles. For example, changing the style, size, etc. of an H1 heading in your settings should apply across all H1s in the theme (not just 75% of the theme).

2.3 Theme Field Grouping

Fields inside of your theme must be grouped logically where appropriate. For example, multiple fields related to typography should be grouped under a “Typography” group.

2.4 Required Theme Fields

At a minimum, your themes must include the following theme fields:

  • Typography
    • Body text font fields ( p tags)
    • H1 -> H6 font fields
    • Link color ( a tags)
      • You must include, at minimum, styling for links and link hover styles.
  • Forms
    • Title background
    • Title text
      • You must include, at minimum, font color styles.
    • Form background-color
    • Form border-color
    • Form label color
    • Form field border-color
    • Form button
      • You must include settings for both button text and background color. Do not forget to include hover styles for the button as well.

3. Themes must be built using HTML + HubL Templates (coded files) and dnd_area (Drag and Drop Areas) tags

To submit your theme for marketplace listing, you must build it using HTML + HubL Templates (coded files). Your theme must also include dnd_area (Drag and Drop Areas) tags.

4. Themes must respect a 12-column grid

Because HubSpot’s page editor supports a 12-column grid, your themes must support it.

5. Themes must use Global Partials

Global partials are a type of global content in your templates. Global partials are content that is shared across portions of your website. Some examples of global partials are:

  • Website headers
  • Website footers
  • Page sidebars

Learn how to start creating global partials.

6. Assets must use a relative local file path

Assets inside of your themes must use relative local file paths when referring to the assets. The best practice way of including these is to use our get_asset_url function which returns the public URL  of the specified asset/file/template. You can also generate this function within HubSpot's design manager.

For example, a stylesheet referenced by require_css must be formatted as follows:

{{ require_css("../custom/styles/style.css") }} //cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.css

7. jQuery in Themes

If your theme relies on jQuery, a version of the jQuery must be included in the event that it is not enabled by default in a customer’s account

An example of this would be a theme module that requires jQuery when the rest of the site does not require it. For your theme module, you would want to use the following code to load jQuery if the customer doesn’t have jQuery loaded by default.

{# this checks if the "Include jQuery" option in Settings > CMS > Pages is checked #} {% if not site_settings.include_jquery %} {{ require_js("../jquery-3.4.1.js", "footer") }} {% endif %}

8. Multi-Language support in Themes

Themes must be able to support multiple language versions. This can be done by utilizing the language switcher module.

Pro Tip: Adding a language switcher module in a global header(s) allows customers to easily locate the language options and choose their desired language.

9. Theme Modules

Keep in mind the following theme module requirements:

  • Each module must have a unique icon (the same icon cannot be used for multiple modules).
  • Modules must have descriptive labels that convey the purpose of the module.
    • Module names such as “Hero Banner with Parallax Scrolling” are descriptive, whereas module names such as “Hero Banner 01”, “Hero Banner 02”, “Gallery 1” are not. 
  • Modules must contain inline help text (where applicable) to further convey how to use the module. 
  • When including menu fields, modules must use "Choose a menu" as the default content option.
  • When including form fields, modules must use "Choose a form" as the default content option.

10. Additional Theme Limits

Keep in mind the following limits per theme:

  • Themes cannot contain more than:
    • 50 templates
    • 50 modules
    • 50 sections
  • Themes must not contain:
    • Email templates (at this time, themes do not support email templates).
    • HubDB functionality.
    • Serverless functions.
    • CRM object fields.
    • Membership templates.

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