HubSpot Template Marketplace general listing requirements

Last updated:

In addition to complying with the Theme Provider Branding Guidelines, template providers on the marketplace must adhere to the following requirements set by HubSpot when submitting templates to the HubSpot Template Marketplace. These standards apply to all templates on the marketplace.

HubSpot reserves the right to modify the information on your template listing submission in order to comply with the following requirements.

Marketplace compliance

Acceptable Template Marketplace submissions

At this time, you can submit only themes and modules to the Template Marketplace. 

Marketplace provider information

Marketplace providers must keep their provider information up-to-date at all times. HubSpot reserves the right to remove or unapprove any template listing where provider information is inaccurate, missing, or no longer functional. 

Free template limits

Template Marketplace providers may offer up to 20 free themes and 20 free standalone modules.  

Template variants as separate submissions are not permitted

Submitting templates with different variations of the following is not permitted:

  • Color variations: identical templates with different color schemes will not be counted as unique templates. For example, you cannot submit a template with a blue color theme, then submit a red version of the same template.  
  • Template layouts: submitting a template such as “Landing page with Right Sidebar” and “Landing Page with Left Sidebar” where the sidebar is simply swapped does not equate to being unique separate instances of a template.
  • Content variation: submitting template with content that is focused on Education and submitting the same template with content focused on Real Estate does not equate to being a unique separate instance of a template.

Other compliance requirements

All verbiage, images, media, and default content used in the template must match what is advertised on the template listing page and demo site. For example, if your template listing is geared towards real estate with a working demo, the end user must receive that theme. If upon purchase the end user is delivered a theme centered around fitness instead, this would be considered a bait-and-switch, which is unacceptable.

Design and code requirements

The following requirements must be adhered to when designing templates for the HubSpot Template Marketplace.

Mobile/desktop resolution and browsers

Your templates should display properly at common mobile and desktop resolutions/widths. This means templates should display properly when being viewed on both mobile and desktop screens. Your template should not require users to have to scroll off-page (unless this is the intended behavior of the template) or cause unexpected results across different browsers.

It's recommended to test using physical devices and different browsers. You can also use third-party services, such as:

All templates must be supported by HubSpot’s supported browsers. For a full list, please reference this knowledge base article.

Design aesthetics

Designs must display high aesthetic quality and be visually appealing. Below are some examples of poor design aesthetics that would invalidate a submission to the Template Marketplace:

  • Designs are too similar to existing items: your design closely resembles an existing listing and could cause confusion in differentiating them.
  • Inconsistent spacing, padding, margin, or line-heights on elements: your design has inconsistent spacing among the elements causing users to be unable to visibly discern between sections or groups of texts.
  • Use of inappropriate, watermarked, pixelated, or unlicensed imagery: your design must use imagery that is appropriate. Images that are found through a search engine “image” search are not licensed for public use. If you are looking for free images, we recommend reading HubSpot’s blog post about free image sites.
  • Use of colors that are not complementary: your design should contain a color scheme that is aesthetically pleasing. When choosing color schemes, we strongly encourage you to think of accessibility standards in order to create an inclusive design.
  • Misaligned or inconsistently-placed elements: your design should have a logical visual flow and not cause visual clutter. An example of this would be having floating text boxes unintentionally overlapping in areas where text wouldn't be expected to be placed.

Stylesheets and scripts

When including stylesheets or JavaScript files in your themes and modules, it's recommended to use the require_css function and require_js function to include these files. It's recommended to load render-blocking JavaScript in the footer to improve performance.

When including style sheets or JavaScript files in a theme's module, HubSpot strongly recommends linking these file dependencies to the module. 

Learn more about module code quality requirements


ID and class naming conventions

When applying IDs and classes, you must use appropriate names and follow a consistent naming convention. There are many different naming convention methodologies on the web. Below are a few examples:

Default classes

Do not style your content based on default generated classes that are a part of your site’s structural framework. This includes but is not limited to, the following list of classes and IDs that are generated by HubSpot on templates and modules:

/* ids */ #hs_cos_wrapper*, #hs_form_target_dnd* /* classes */ .heading-container-wrapper, .heading-container, .body-container-wrapper, .body-container, .footer-container-wrapper, .footer-container, .container-fluid, .row-fluid, .row-fluid-wrapper, .row-depth-*, .row-number-*, .span*, .hs-cos-wrapper, .hs-cos-wrapper-widget, .dnd-section, .dnd-column, .dnd-row, .dnd-module, .dnd_area*

HubSpot default generated classes are always subject to change. Instead, use custom classes that are assigned either through the Design Tools in the designated class fields or through local development by adding a custom class to your element tags.

Adding classes inside the rich text editor source code

Do not include custom classes or IDs inside of content in the rich text editor through the “Source Code” option. Classes and IDs added through this option can easily be overridden (either directly or indirectly) causing perceived issues with your template.

Redundant and unnecessary code

Your template must not include any unnecessary code or items. This includes but is not limited to, items such as:

  • Unused style sheets or scripts
  • Commented out code
  • Unused code
There is a difference between commented out code and comments in code. If you are providing context in your code for clarification purposes, use the comment delimiter as this will let you comment on your code while also not having these comments show in the “View Source” or “Inspect” views of a page. See below for an example.
<p>This is a sample. When viewing source, you should only see the HTML Comment.</p> <p>HTML Comment Wrapper Start</p> <!-- This is an HTML Comment and will show in the View Source / Inspect --> <p>HTML Comment Wrapper End</p> <hr> <p>HubL Delimiter Comment Wrapper Start</p> {# This comment is using the HubL Delimiter for comments. These comments appear here but do not render in the front end #} <p>HubL Delimiter Comment Wrapper End</p>//

Templates must load over HTTPS

Your listing, if using third-party files, must be loaded over HTTPS to ensure proper security. Likewise, all code must render properly when being viewed over HTTPS. This is to avoid mixed content warnings in the browser console and make sure all content displays properly.

Third-party files

Third-party files must be loaded on the HubSpot CDN unless they are from a reputable source such as JSDelivr, Google Hosted Libraries, or CDNJS. These files can be added to the stylesheet using the @import feature.

Please note: if you are including files in a module, you must use the css_assets and js_assets parameters in your meta.json file (Linked Files section in Design Tools). This only works with modules in themes, and will not work for standalone modules. 


Use a unique and descriptive name for your template. The following is not allowed:

  • Usage of the word “theme”, “module” or "section"  to identify the template type. This is unnecessary as HubSpot categorizes templates by these types. 
    • For example, “Example Theme”, “Easy Accordion Module”, “Single Send Email”
  • Your company name. Template listings already indicate the template provider's name and information. 
    • For example, “Growth by HubSpot”, “Slider | HubSpot”, “HubSpot’s Super Easy Mailer”
  • Version numbers. The HubSpot Template Marketplace uses its own versioning system for published templates which is indicated on the listing page. 
    • For example, “Growth - 1.21”, “Growth v2”, “Growth 2-1”

Learn more about module naming and other content requirements.

Template errors

All templates must not display any errors in either the Design Tools or the browser console. An example or errors inside the Design Tools is shown below. 



Template descriptions

Template descriptions should include the following:

  • A summary
  • Key selling points
  • How your template can help buyers achieve their goals

When writing descriptions for themes, you do not need to include a listing of the modules or templates included in the theme as these are already listed on the template listing page. 


Images for your template must showcase your theme or module as the primary focus of the image. At least 75% of the image’s content should showcase your template. 

Images must not contain any of the following: 

  • Excessive marketing verbiage/slogans, text, or branding. 
    • For example, “Over 100 features plus support!!!” or superimposing text/branding over the image of your template.
  • Imagery of individuals (real or fictitious) posing, pointing, or holding items.
    •  For example, a stock image of a person holding a computer with your template on the screen.
  • Badges and/or banners containing information related to reviews and installs of your template, HubSpot partner tiers or badges (if any), or website performance grading. These types of data can fluctuate and have the potential to mislead others. If you’re a HubSpot partner and would like to display your partner tier and/or badge, please ensure it’s the most current version.

Images will be removed at HubSpot’s discretion if they violate the guidelines above. 

Make sure to use full-size images of your template to showcase its looks and functions. The following image dimensions are strongly recommended for the best viewing experience of your template listing:

  • Thumbnail image:
    • Size: Minimum 480px x 360px (4:3 ratio)
    • Formats: JPG, JPEG, PNG
  • Theme images:
    • Minimum width: 1160px
    • Formats: JPG, JPEG, PNG
  • Feature images:
    • Size: Minimum 480px × 360px (4:3 ratio)
    • Formats: JPG, JPEG, PNG
  • Client examples:
    • Size: Minimum 480px x 360px (4:3 ratio)
    • Formats: JPG, JPEG, PNG
Please note: templates must not include images from the HubSpot-Shutterstock integration

Module screenshots

Modules must contain, at minimum, the following screenshots:

  • How the module will appear on the page to front-end users.
  • Screenshots of both content and style settings.
  • The page-level editor settings of the module. If repeater content is used in the module, you must provide a screenshot of one instance of the repeating item settings.

Demo video

Your demo video should showcase your template in action and convey proper use cases. Videos must be in mp4 format, and it's recommended to use a 4:3 or 16:9 ratio for optimal viewing.


Feature titles are displayed in the Template Marketplace list view and are one of the first things that your prospective customers see.

Use the features section to highlight the following:

  • Key features about the template
  • Use cases and how it can solve your buyers' problems

Inside the features section, you can use marketing-based imagery to convey feature sets. For example, using a collage of images showcasing button styles.

Search tags

HubSpot provides a set of default tags to assign to your theme. If a particular tag is not available, you can add a new tag.

When choosing search tags for your templates:

  • Use tags that accurately reflect the theme or module being listed.
  • You may not use tags that contain the following:
    • Company names such as HubSpot or Example Company.
    • Relative terms such as "top-rated," "best," or "number one."
    • Tags that describe the template type such as "theme," "module," or "email," as these are implied based on the template type being viewed.
    • Profanity or derogatory language.

Client examples

Client examples (i.e. functional websites of your clients) are important for customers to see how other companies are using your template. It allows potential buyers to get an idea of how to use your template and also see how customizable it can be.

It's strongly recommended to ensure that you have written permission from your clients to link to their websites. If requested, please make your client’s written permission available for verification.

Module compatibility with themes

The alternate_names attribute can be used to achieve module compatibility with themes in the Template Marketplace. It provides the bridge for a module to integrate with as many marketplace themes as possible without much effort from providers and module developers.

Theme providers define a new attribute called alternate_names which contains standard fields mapped to the module fields. Alternate names are supported for fonts and color fields. Module fields will inherit from the standard color and font fields. This is a new attribute introduced for theme fields. For example:

{ "label": "ButtonColor", "name": "button_color", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "alternate_names" : ["primary_color"], "default": { "color": "#516747" } }

In the above example, developers get the ability to access the button color in two ways: theme.button_color and theme.primary_color. This way, providers can update their existing theme to meet template standards.

Modules and themes must adhere to the following requirements to ensure functionality when used across themes:
  • The font and color style fields must follow these standard naming conventions: primary_color, secondary_color, heading_font, and body_font.
  • If theme fields do not have primary_color, secondary_color, heading_font, or  body_font fields, they can use the alternate_names attribute to map existing fields to standard fields. This way, when an independent module is added to the theme template, it has similar look and feel of themed module.
  • A user can inherit either by defining default_value_path or property_value_paths, or both. Review the code snippet below for an example: 
    • If you use default_value_path, the accepted value is theme.primary_color.
    • If you use property_value_paths you must use trailing individual properties .color or .opacity based on the property they are mapping. 
[ { "id" : "d506e41f-7206-bb8f-7fa5-d4a7de75c61e", "name" : "color", "display_width" : null, "label" : "Color", "required" : false, "locked" : false, "type" : "color", "inherited_value": { "default_value_path": "theme.primary_color", "property_value_paths": { "color": "theme.primary_color.color", "opacity": "theme.primary_color.opacity" } }, "default" : { "color" : "#00FF03", "opacity" : 100 } } ]
  • In the module.html, these fields can be referred to with the following dot notation:
{{ theme.primary_color }} <br> {{ theme.primary_color.color }} <br> {{ theme.primary_color.css }}
  • When creating a theme, the same standard naming conventions (primary_color, secondary_color, heading_font, and body_font) must be used so that the module fields can be mapped with the standard field names. Developers can either create new module fields that meet the standard naming convention, or use the alternate_names parameter to map existing fields to the standard fields. 
  • The color field with an alternate_name can be accessed directly using theme.primary_color or indirectly using theme.colors.primary. Below is an example: 
{ "label": "Colors", "name": "colors", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "color", "visibility": { "hidden_subfields": { "opacity": true } }, "alternate_names" : ["primary_color"] "default": { "color": "#516747" } }] }
  • The font field with an alternate_name can be accessed directly using theme.heading_font or indirectly using theme.fonts.primary.  Review the snippet below for an example: 
{ "label": "Fonts", "name": "fonts", "type": "group", "children": [ { "label": "Primary", "name": "primary", "type": "font", "visibility": { "hidden_subfields": { "bold": true, "italic": true, "size": true, "underline": true } }, "default": { "color": "#231f20", "fallback": "sans-serif", "font": "Montserrat", "font_set": "GOOGLE", "variant": "400" }, "alternate_names":["heading_font"] }

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