HubSpot Template Marketplace theme requirements

​

Theme limits

• Free CMS Hub accounts cannot use site search, CTA functionality, or native HubSpot video. Learn more about what’s included with CMS Hub subscriptions in HubSpot’s Product & Services catalog.
• Themes cannot contain more than:
  • 50 templates (minimum pages needed)
  • 50 modules (minimum of 5)
  • 50 sections (minimum of 5)
• Themes must not contain:
  • Email templates
  • HubDB functionality
  • Serverless functions
  • CRM object fields
  • Flexible columns in templates

​

Overall theme requirements

• All submitted themes must be distinct and original. For example, the same theme with different copy or placeholder content does not count as a distinct theme. Learn more about HubSpot Template Marketplace compliance.
• A theme must be built with HTML and HubL templates, and dnd_area tags.
• Themes must respect a 12-column grid.

​

Theme file structure

​

Relative local file paths for templates

{{require_css(get_asset_url('../../css/main.css')) }}

​

Theme performance

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

• Theme files should be able to be 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).

​

Preview URLs for themes

​

Using 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 %}

​

Theme configuration (Theme.json)

// theme.json
{
  "label": "Cool Theme",
  "preview_path": "./templates/home-page.html",
  "screenshot_path": "./images/templates/homepage.jpg",
  "enable_domain_stylesheets": false,
  "version": "1.0",
  "author": {
    "name": "Jon McLaren",
    "email": "noreply@hubspot.com",
    "url": "https://theme-provider.com/"
  },
  "documentation_url": "https://theme-provider.com/cool-theme/documentation",
  "license": "./license.txt",
  "example_url": "https://theme-provider.com/cool-theme/demo",
  "is_available_for_new_content": true
}

• The label name matches the name in your theme listing.
• If you’re using HubSpot’s free CMS theme boilerplate, boilerplate values must not be present. This includes author information, documentation URL, example URL, etc.
• The documentation URL resolves and has documentation on how to use your theme.
• The preview path is a valid file in your theme.
• The screenshot path is a valid file and is related to your theme.
• The example URL resolves and leads to a demo of your theme. Do not use preview.hs-sites.com or [AccountID].hs-sites.com subdomains for the example URL.

​

Theme settings (Fields.json)

• The fields.json file must contain at least three color fields.
• To ensure compatibility between themes and independent modules, themes must include the following font and color standard naming conventions: primary_color, secondary_color, heading_font, and body_font. Learn more about module-theme compatibility.

• Not conflict with your editor styles or styles set through a module. For example, do not use !important in your CSS stylesheet as it makes it difficult for end users to override and would cause a conflict.
• Use descriptive labels for each setting so that content creators know what they’re updating.
• 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 theme settings must apply across all h1 tags in the theme.

• Body text font fields (p tags)
• h1 through h6 font fields
• Hyperlink color (a tags), including hover styling

• Form background color
• Form border color
• Form label color
• Form field border color
• Form button - this includes settings for button text, background color, and hover styling.

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

​

Templates (CSS, Sections, Page Templates, etc.)

​

Sections

• You must use sections wherever applicable. There must be a minimum of five sections in a theme.
• Sections must have unique and working screenshots.
• Sections and modules should not be redundant.

​

Page templates

• A website page template or landing page template.
  • When including multiple-page templates, each template must have a distinct purpose. For example, a home page, an About Us page, a full-width landing page, and a landing page with a right sidebar.
  • It is 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 for the blog post page.
  • In addition, blog comments and blog author boxes must be styled to match the theme.
• 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 returned when using the site search. Available for paid CMS Hub accounts only.

​

Page template naming

• If you have templates with similar names, add descriptive words that denote the difference between them.
• Keep capitalization consistent, remove hyphens, and avoid using shorthand (e.g. spell out background instead of using bg).
• Your company name or theme name does not need to be included in the template name.

​

Modules

​

Global content

​

Global partials

• Themes must include global partials.
• Global partials must include usable drag and drop areas. For example, you cannot hide the drag and drop area with a “hide” class.
• You must incorporate usable drag-and-drop areas in headers and footers.
• For menus that are used globally throughout a site, users must also be able to select a HubSpot navigation menu they’ve created in their account settings.

​

Multi-Language support

• 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. For example, rather than hard-coding a blog listing button’s text as Read More, set the text within a field so that the end user can update the text without having to go into the code.

​

Mobile and responsive elements

• Main navigation
• Sliders and tabs
• Large images
• Avoiding horizontal scrolling (unless intentional)