HubSpot Asset Marketplace theme requirements

Last updated:

Below, learn about the requirements that a theme needs to meet for HubSpot Asset Marketplace submission.

Please note:  

  • As of October 20, 2022, templates, template packs, modules, and email templates are no longer available for purchase, download, or upgrade in the HubSpot Asset Marketplace. Review the changelog announcement for more information.
  • In addition, all submitted themes must be distinct. For example, the same theme with different copy or placeholder content does not count as a distinct theme.

Minimum theme requirements

Themes in the marketplace must meet the following minimum requirements across its templates, theme field options, and theme.json configuration. 

Templates

  • A theme must be built with HTML + HubL templates and dnd_area tags.
  • You must use sections wherever applicable. There must be a minimum of five sections in a theme. 
  • You must use drag and drop headers and footers.
  • As per the layout that HubSpot's content editor supports, themes must respect a 12-column grid.
  • At a minimum, a theme must include the following template types:
    • A website page template or landing page template.
      • When including multiple page templates, each template must have a distinct purpose. For example, a homepage, an about us page, a landing page with a right sidebar, A full width landing page.
      • It’s recommended to include at least eight page templates in a theme.
    • Separate blog listing and blog post templates.
      • Blog listing template: the page that shows all blog posts in a listing format (known as the blogroll). The template title must reflect that it's for the listing page.
      • Blog post template: the blog post detail page that displays individual blog posts. The template title must reflect that it's fore the post page.
      • In addition, blog comments and blog author boxes must be styled to match the theme.

A theme must also include the following system page templates:

Theme fields

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

  • Typography fields:
    • Body text font fields ( p tags)
    • h1 through h6 font fields
    • Hyperlink color ( a tags), including hover styling
  • Form fields:
    • Title background
    • Title text, including at least font color styles
    • Form background color
    • Form border color
    • Form label color
    • Form field border color
    • Form button, including settings for both button text, background color, and hover styling

In addition, theme fields must meet the following requirements:

  • 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.
  • Theme fields must have the following globally applied elements:
  • Theme fields should have separate color and font controls for buttons and forms, as well as separate color, logo, and font controls for the header and footer. 
  • 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.
    • If modules within a theme are using logos, 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.

Theme.json configuration

The 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.

The field.json file must also contain at least three color fields and one logo field.

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.

Theme settings

Theme settings must adhere to the following requirements.

Editor style conflicts

Theme settings must not conflict with your editor styles or styles set through a module. For example, do not use !important in your CSS, as it makes it difficult for end users to override and would cause a conflict.

Descriptive settings labels

Theme settings must use descriptive labels for each setting so that content creators know what they're updating.

Universal theme settings

Theme settings must apply to all templates in a theme, unless there's a specific use case for additional styles. For example, changes to the style and size of h1 headings in settings must apply across all h1 tags in the theme.

Global partials

Themes must include global partials, which are files that contain content that's shared across portions of your website. For example, global partials could include:

  • Website headers
  • Website footers
  • Page sidebars

Global partials must include drag and drop area. Users must also be able to select a HubSpot navigation menu they've created in their account settings. Learn how to create global partials.

Please note: avoid including global modules within global partials, as it can create a negative end-user experience.

Relative local file paths for assets

When referring to theme assets, you must use relative local file paths. The best way to include these is to use the get_asset_url function, which returns the public URL of an asset, file, or 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

jQuery

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

For example, if you include a module that requires jQuery when the rest of the site doesn’t, you would need to use the following code to load jQuery:

{# 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 %}

Multi-Language support

  • Themes must be able to support multiple language versions, and should specify the languages that they support. This can be done by utilizing the language switcher module in a global header, which allows customers to easily locate the language options and choose their desired language.
  • You must only display one language at a time. For example, avoid having both English and Spanish in the UI at the same time.
  • Avoid using hard coded text as much as possible. For example, rather than hard coding a blog listing button’s text as Read more, set the text within a field so that the content editor can update the text without having to go into the code.

Adding a language switcher module in a global header allows visitors to easily locate the language options and choose their desired language.

Theme modules

Modules within a theme need to meet a set of module requirements, which are outlined in the module requirements guide. For example, modules must contain inline help text and specific default content for certain fields.

Theme performance

Using Google Lighthouse, a theme must score higher than the following thresholds:

  • Desktop accessibility: 65
  • Desktop best practices: 80
  • Desktop performance: 70
  • Mobile performance: 40

Learn how to generate a Google Lighthouse report for your theme using the CLI.

In addition, theme assets must meet the following performance and accessibility requirements:

  • Theme files should be able to be successfully minified.
  • All image files should be under 1MB in size.
  • All image tags should have an alt attribute (a value of "" is acceptable).
  • All image tags should have a loading attribute (a value of "" is acceptable).

Theme limits

Keep in mind the following limits per theme:

  • Free CMS Hub accounts cannot use site search. Learn more about what's included with CMS Hub subscriptions in HubSpot's Product & Services catalog.
  • Themes cannot contain more than:
    • 50 templates.
    • 50 modules.
    • 50 sections.
  • Themes must not contain:
    • Email templates.
    • HubDB functionality.
    • Serverless functions.
    • CRM object fields.
    • Membership templates.
    • Flexible columns in templates

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