HubSpot Asset Marketplace theme requirements

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

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

• Website Template
  • Examples: Homepage, About Us, Contact, Interior One Column, etc.
• Landing Page Template
  • Examples: Landing Page with Right Sidebar, Landing Page Full Width, Ebook Landing Page with Left Sidebar, etc.
• Both Blog Templates
  • Blog Listing Template: the page that shows all blog posts in a listing format (known as the blogroll).
  • Blog Post Template: the blog post detail page that displays individual blog posts.

Your theme must also include the following system page templates:

• 404 Error Template: shown when visitors hit a page that doesn't exist.
• 500 Error Template: shown when the site encounters an internal error.
• Password Prompt Template: shown when a page is password protected.
• Subscription Template: a subscription preferences page where email recipients can manage the types of emails they're subscribed to.
• Subscriptions Update Template: a confirmation page that appears when an email recipient updates their email subscription preferences.
• Backup Unsubscribe Template: the page that appears for email recipients who are trying to unsubscribe if HubSpot is unable to determine their email address.
• Search Results Template: displays search results that are returned when using site search.

Your themes must adhere to the following:

Your theme.json file must include the following parameters:

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

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.

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

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

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.

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.

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.

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

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.

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:

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.

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

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

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.