HubSpot Asset Marketplace Compliance, Design, and Code Quality

Last updated:

Asset providers on the marketplace must adhere to the following standards set by HubSpot. These standards apply to all assets on the marketplace. 

1. Marketplace Compliance

1.1 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 asset listing where provider information (such as email or website) is inaccurate, missing, or no longer functioning.

1.2 Acceptable Asset Marketplace Submissions

As of August 18, 2020, we are no longer accepting NEW submissions of Website, Landing Page, Blog Templates and Template Packs. Existing marketplace listings can be updated. Please read our changelog announcement for more information.

At this time, new submissions to the Asset Marketplace may contain:

  • Website Themes
  • Email Templates
  • Modules

The Asset Marketplace will also accept updates to existing:

  • Website Templates
  • Landing Page Templates
  • Blog Templates
  • System Page Templates
    • Error Page Templates
    • Password Page Templates
    • Subscription Preference Page Templates
    • Membership Templates
    • Search Results Templates
  • Template Packs (including the assets listed above).

1.3 Unacceptable Asset Marketplace Submissions

At this time, submissions to the Asset Marketplace may not contain:

  • HubDB
  • Serverless Functions

1.4 Third-party Assets

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

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

1.5 Free Asset Limits

Asset Marketplace providers may offer up to the following limits in free assets:

  • Five (5) free themes
  • Five (5) free modules

1.6 Asset File Structure

All assets should contain a proper folder structure and be grouped under one “parent” folder. Your parent folder should describe your product listing. For example, if you are building a module called “SuperAwesome” for the marketplace, your structure should look similar to the image below.

Sample of asset file structure

2. Design Requirements

2.1 Mobile/Desktop Resolutions and Supported Browsers

2.1.1 Mobile/Desktop Resolutions

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

With hundreds of devices and configurations, it’s necessary to test each asset against as many as possible. If you are unable to test against a physical device (mobile/desktop) or browser, then we recommend using third party services to aid your testing such as:

2.1.2 HubSpot Supported Browsers

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

2.2 Design Aesthetics

Designs must display high aesthetic quality and be visually appealing.

2.2.1 Examples of poor design aesthetic

Below are some examples of poor design aesthetics that would invalidate a submission to our Asset 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 visibility 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 our 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.

2.3 Asset Variants As Separate Submissions Are Not Permitted

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

  • Color Variations: Submitting an asset with a blue color scheme and then submitting the same asset with a red color scheme does not equate to being unique separate instances of an asset. 
  • Template Layouts: Submitting an asset 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 an asset.
  • Content Variation: Submitting an asset with content that is focused on Education and submitting the same asset with content focused on Real Estate does not equate to being a unique separate instance of an asset.

Having color variants, layout placement options and customizable content are core features of HubSpot’s Platform offering.

2.4 Descriptive Naming Conventions

You must use descriptive naming conventions when labeling your assets. For example, if you are creating a module that allows users to show images in a gallery listing format with filters:

  • Good Naming: Image Gallery with Filters
  • Bad Naming: Gallery

When creating templates, we recommend looking at our developer documentation around template annotations and use of the label annotation which controls the label individuals see when choosing a page template in the page creation flow.

2.5 Live Previews

When you submit your asset you must provide a link to a live working demo of your asset which can be entered into the “Demo” field. A link to your *.hs-sites.* staging domain is acceptable.

If at any point your live demo becomes inaccessible, HubSpot reserves the right, with notification to the provider, to delist/remove your asset until the live demo becomes accessible again.

2.6 Default Content in Templates

Default content must match what is advertised on the asset listing page and demo site. All verbiage, images, and other media used on the asset listing page should match what is used in the demo site and asset. 

For example, if your asset listing is about a landing page that is geared towards real estate with a working demo and upon purchase of this asset, the end user is delivered a landing page about fitness, this would be considered a bait-and-switch which is unacceptable.

2.7 Inclusion of Existing Marketplace Content is Unacceptable

Assets must not use elements from an existing Asset Marketplace listing. Any asset that was purchased/downloaded or is a cloned version of an asset that was purchased/downloaded from the Asset Marketplace will be rejected. 

For example, if you were to download HubSpot’s Accordion Toggle Module, clone this module, and attempt to submit as your own listing, this would be rejected.

3. Code and Template Quality

3.1 Best Practices for Style Sheets and Scripts in Assets

3.1.1 Usage in Assets

When including style sheets or JavaScript files in your templates/themes we strongly recommend using require_css function and require_js function when including these files.

Note: We recommend loading render-blocking JavaScript in the footer to help with performance.

3.1.2 Usage in Modules

When including style sheets or JavaScript files in your module, we strongly recommend linking these file dependencies to the module.

3.2 Do Not Style Based on Default Generated Classes

It is best practice to never style your content based on default generated classes that are a part of your sites structural framework. This includes but is not limited to the following list of classes/IDs that are generated by HubSpot on templates and modules:

CSS
/* 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 as we iterate on our platform. We recommend using 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.

3.3 Do Not Add Classes Inside the Rich Text Editor Source View

You must not include custom classes or IDs inside of content in the Rich Text Editor through the “Source Code” option. Classes or IDs added through this option can easily be overridden (either directly or indirectly) causing perceived issues with your template.

3.4 Redundant or Unnecessary Code

Your asset must not include any code or items that are not necessary for the asset to function. This includes, but is not limited to, items such as:

  • Unused style sheets or scripts 
  • Commented out code 
  • Unused code

Note: There is a difference between commented out code and comments in code. If you are providing context in your code for clarification purposes, we recommend using 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>

3.5 Default Modules Must Be Styled

All of HubSpot’s Default Modules must be styled and must display properly on all templates submitted.

3.6 Theme, Template and Module Errors

Themes, Templates, and Modules must not display any errors in either the Design Tools or the browser console. An example of errors inside of the Design Tools are shown below:

Design Tools error console

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

3.8 Assets Must Be Loaded Over HTTPS

Your listing, if using third party assets, 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.

4. Disclaimers

4.1 Asset Rejections

HubSpot reserves the right to reject assets for reasons not listed above. In all cases, if rejection happens, a HubSpot Quality Assurance (QA) Engineer will provide feedback via email.

4.2 Asset Resubmissions

Assets must be approved within three resubmissions or will be automatically rejected. 

4.3 The Submission Queue

Our QA Engineers work out of a queue of submitted assets. Assets that do not pass QA will be moved to the bottom of the queue when they are resubmitted. We are also unable to provide information about your assets position or timeframe for review in the queue due to the fluctuating volume of assets submitted. Following our directions for submitting your assets will help to ensure that your asset passes the first time in our QA Process. 

4.4 Support for Published Assets

Asset Marketplace Providers are responsible for all code and files that are uploaded. They must support their own work for the duration of the listing in the marketplace if there are any issues with their code or files.

4.5 Self-Reviews are not allowed

Asset Marketplace Providers and their team (including others at their company who may not have worked on their asset) are not allowed to review their own listings.

4.6 Customer requests for receipt of purchase

Asset Marketplace Providers must be able to provide a detailed receipt if requested that includes:

  • Asset Listing Name
  • Asset Listing Description
  • Date of Asset Purchase
  • Price of Asset
  • VAT Tax Information (if applicable)
  • Asset Marketplace Provider Company Information

4.7 Removal of Asset Listings

HubSpot reserves the right to remove marketplace listings for reasons including, but not limited to:

  • Bugs are present in the asset
  • 3rd party assets in the submission break
  • The asset is not compatible with HubSpot supported browsers (Section 2.1.2).
  • Use of copyrighted material such as images, icons, fonts, audio, and video that are not licensed for distribution
  • Assets that track users without their informed, explicit opt-in consent
  • Assets (including linking to content from the Asset Marketplace or from your asset demo) that includes:
    • Promoting or engaging in illegal activities
    • Derogatory, disparaging, and/or malicious content 
    • Dishonest or false claims
    • Offensive content about race, religion, age, gender or sexual orientation
  • Modules will be removed if the module affects other elements of the page/email (see our Modules Requirements, section 5 regarding code quality)

4.8 Intellectual Property Violation

Any asset submitted to the Marketplace that violates intellectual property laws will immediately be removed and the provider will be banned from the HubSpot Marketplace.

4.9 HubSpot Shutterstock Integration

Assets must not include imagery from the HubSpot Shutterstock integration.

4.10 Payment Gateways

HubSpot is not responsible for Payment Gateway (Stripe and PayPal) issues that may occur during the purchase process.

HubSpot offers two payment gateway options that can be connected to your Asset Marketplace Provider Account. These are Stripe and PayPal. HubSpot strongly encourages Asset Marketplace Providers to use the Stripe Payment Gateway if it is available in their country. If Stripe is not available in your country, then we recommend using the PayPal Payment Gateway.