HubSpot Template Marketplace general listing requirements

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.

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

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. 

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

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.

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.

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

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:

• BrowserStack
• Responsinator
• Sauce Labs

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

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.

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. 

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:

• BEM: https://en.bem.info/methodology/naming-convention/
• ABEM: https://css-tricks.com/abem-useful-adaptation-bem/
• ITCSS: https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
• https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528

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:

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.

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.

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

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

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.

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

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.

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.

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

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:

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.

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

• In the module.html, these fields can be referred to with the following dot notation:

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

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