HubSpot Asset Marketplace Theme Requirements

Last updated:

The following requirements need to be met when submitting themes to the Asset Marketplace.

Note: Templates used in your theme cannot be submitted as individual templates for sale in addition to your theme.

1. Minimum Required Templates in Themes

Your theme must include, at minimum, the following 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:

JSON 
// 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 by visiting 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

In order to submit your theme to be listed in the Asset Marketplace, you must build your theme using HTML + HubL Templates (coded files). Also, your theme must make use of the dnd_area (Drag and Drop Areas) tags. To learn how to use dnd_area tags, please refer to our getting started using drag and drop areas guide.

4. Themes must respect a 12 column grid

HubSpot’s page editor supports a 12 column grid. Your themes must respect this 12 column grid.

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

To learn how to start creating global partials, please refer to our documentation.

6. Assets must use a local file path

Assets inside of your themes must use 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 in-app through the Design Tools by following the directions here. Below is an example of this function in use.

{{ require_css("../custom/styles/style.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 loaded by default in a customer’s account (see how customers can enable/disable jQuery). 

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.

HubL 
{# 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

Modules inside of your theme must:

  • Have unique icons for each module. Icons cannot be the same for multiple modules.
  • 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. 
  • Contain inline help text (where applicable) to further convey how to use the module. 
  • Menu fields must use "Choose a menu" as the default content option.
  • Form fields must use "Choose a form" as the default content option.

 

10. Additional Theme Limitations

Themes must not:

  • Exceed 50 templates
  • Exceed 50 modules
  • Contain:
    • Email Templates (at this time, themes do not support email templates)
    • HubDB functionality
    • Serverless Functions
    • CRM Object Fields
    • Membership Templates 
Was this page helpful? *
This form is for feedback on our developer docs. If you have feedback on the HubSpot product, please share it in our Idea Forum instead.