HubSpot Asset Marketplace Theme Requirements
Starting August 3rd, 2021 HubSpot will be launching a new marketplace experience for users. Learn more.
Resubmissions of published themes will be allowed from the existing Marketplace between July 1st and August 3rd. All new theme submissions that are approved, will be for sale in the new marketplace.
To be included in the initial release of the new Asset Marketplace, all themes should be resubmitted by July 21, 2021.
The following requirements need to be met when submitting themes to the Asset Marketplace.
Note: Templates used in your theme cannot be submitted as individual templates for sale in addition to your theme.
- Website Template
- Ex: Homepage, About Us, Contact, Interior One Column, etc.
- Landing Page Template
- Ex: Landing Page with Right Sidebar, Landing Page Full Width, Ebook Landing Page with Left Sidebar, etc.
- Both Blog Templates
- Blog Listing Template
- This is the page that shows all your blog posts in a listing format (known as the blogroll).
- Blog Post Template
- This is the blog post detail page that includes the content of the post.
- Blog Listing Template
- System Templates
- 404 Error Template
- This is shown when visitors hit a page that does not exist.
- 500 Error Template
- This is shown when the site encounters an internal error.
- Password Prompt Template
- This is shown when a page is password protected.
- Subscription Template
- A subscription preferences page where email recipients can manage the email types they subscribed to.
- Subscriptions Update Template
- A confirmation page that appears when an email recipient updates the subscription preferences.
- Backup Unsubscribe Template
- This page will appear for email recipients who are trying to unsubscribe if HubSpot is unable to determine their email address.
- Search Results Template
- Used for the search results that are returned when using CMS Hubs site search.
- 404 Error Template
Your themes must adhere to the following:
Your theme.json file must include the following parameters:
// theme.json
{
"label": "Your Theme Name",
"preview_path": "./path/to/preview-page.html",
"screenshot_path":"./path/to/screenshot.jpg",
"enable_domain_stylesheets": false,
"version":"1.0",
"author":{
"name":"Your Marketplace Provider Name",
"email":"provider@email.com",
"url":"https://theme-provider-url.com/"
},
"documentation_url":"https://theme-provider-url.com/your-theme/documentation",
"example_url":"https://theme-provider-url.com/your-theme/demo"
}Learn more about these parameters by visiting the theme.json documentation.
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.
In order to submit your theme to be listed in the Asset Marketplace, you must build your theme using HTML + HubL Templates (coded files). Also, your theme must make use of the dnd_area (Drag and Drop Areas) tags. To learn how to use dnd_area tags, please refer to our getting started using drag and drop areas guide.
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
To learn how to start creating global partials, please refer to our documentation.
Assets inside of your themes must use 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 in-app through the Design Tools by following the directions here. Below is an example of this function in use.
{{ require_css("../custom/styles/style.css") }} //cdn2.hubspot.net/hub/1234567/hub_generated/template_assets/1565970767575/custom/styles/style.min.cssIf your theme relies on jQuery, a version of the jQuery must be included in the event that it is not loaded by default in a customer’s account (see how customers can enable/disable jQuery).
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.
{# 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 %}Themes must be able to support multiple language versions. This can be done by utilizing the Language Switcher Module.
Pro Tip: Adding a language switcher module in a global header(s) allows customers to easily locate the language options and choose their desired language.
Modules inside of your theme must:
- Have unique icons for each module. Icons cannot be the same for multiple modules.
- 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.
- Contain inline help text (where applicable) to further convey how to use the module.
- Menu fields must use "Choose a menu" as the default content option.
- Form fields must use "Choose a form" as the default content option.
Thank you for your feedback, it means a lot to us.