HubSpot theme documentation
Answerable
A HubSpot CMS theme for a site that wants to be read by people and by the machines that answer for them. Sixteen section modules publish what they are, as structured data, in the HTML a crawler receives. Motion is a layer on top, in three levels, with a switch for the visitor.
- What the theme is
- Getting started
- The page, top to bottom
- Theme settings
- The modules
- The rules every module shares
- Motion
- Structured data
- Building a page
- Questions
1. What the theme is
Answerable's home page is one argument in the order a careful reader wants it: the page's
question and its answer first, then the evidence, the method, when it fits and when it does not, the
questions a reader still has, and where to go next. A machine reading the page gets the same order as
typed data: the hero's short answer as a Question, the evidence cards as
Claims with a citation each, the method as a HowTo, the comparison as
Product rows, the questions as an FAQPage. The layout adds the site graph:
who publishes the page, what the page is, when it changed, how to search the site.
Everything a reader needs is in the page before any script runs. There is no dependency, no web font unless you choose one in the theme settings (HubSpot then serves it from your own domain), and the theme loads nothing from another domain (your account's own settings may add HubSpot tracking, a cookie banner or chat; those load with any theme). HubSpot's own Lighthouse test of the theme scores desktop 96 / 99 / 97 and mobile 96 / 99 / 86 for accessibility, best practices and performance, and HubSpot's marketplace validator reports no errors (both on 24 September 2026). Every check, with a way to run it yourself, is on the proof page.
2. Getting started
- Install the theme from the HubSpot Marketplace. After purchase it appears under Marketplace Downloads (Settings, Integrations, Marketplace Downloads, or the Marketplace icon in the top bar), and in the theme picker when you create a page.
- Set the organisation. Settings, Marketing, Email, Configuration, Footer addresses: edit the address marked Default with your company name, street, city, postal code and country. That is where HubSpot keeps the company details a theme can read; Account Defaults is not. The site graph publishes the address only when street, city and country are all filled in, so a half-filled address is published as no address at all.
- Open the theme settings from Marketplace Downloads (Actions, Edit theme settings) or in the page editor, and set the logo, the brand colours and the fonts. The logo starts as the primary logo in your HubSpot brand kit. The header and footer menus can be set here by id, or picked in the global header and footer (step 5). A menu's id is the number at the end of the address while that menu is open in Settings, Content, Navigation menus; for the default menu, open another menu first, then it again. With no menu set either way, they show the account's default menu.
- Create a page from the Home template. It comes with all six modules in order; replace the sample content, module by module, starting with the hero's question and answer.
- Set the global header and footer. In the page editor, click the header or the
footer, then Open in global content editor. Pick the menus (the header's Navigation
module, the footer's Footer links), set the header's button (the Call to action on its
Navigation module), and replace the footer's tagline and its bottom row: the left text starts empty, the
right one is the credit. Then publish to all pages: the
header and footer are global content, so the change shows on every page. The header's button links to
#next-step; on a page without that section it leads to the home page's. - Check it as a crawler would. View the published page's source: six
application/ld+jsonblocks, oneh1, and every answer visible without a script.
3. The page, top to bottom
| Module | For the reader | For the machine |
|---|---|---|
| Answer brief | Asks the page's question and answers it in a sentence or two, before anything else | Question with its accepted Answer |
| Evidence cards | Three claims that hold the answer up, each with where it comes from | ItemList of Claim, each with a citation |
| Method explorer | How it is done, in three steps, with what you start and leave with | HowTo with a HowToStep each |
| Fit comparison | When it is the right choice and when it is not, as a real table | ItemList of two Products with typed rows |
| Expert answers | The questions a reader still has, each answered and sourced | FAQPage |
| Next step | Where to go now, by the reader's situation | nothing, on purpose: a call to action is interface, not content |
The small badges beside each eyebrow on the live examples ({ } Question,
{ } Claim ×3, { } HowTo) name the type each block publishes. They are a
switch on each module, Show the schema badge, off by default, and a badge shows only when its
block actually publishes data.
4. Theme settings
Set once, and every template follows; at the defaults the theme looks exactly as designed. Open them from Marketplace Downloads (Actions, Edit theme settings) or in the page editor.
| Group | What it holds |
|---|---|
| Brand | Logo and its width. Primary colour, the accent: the hero's eyebrow and emphasis, icons, the logo mark, a highlighted column, source links while Typography, Link is at its default, and the tints and glows made from it. Secondary colour, a pale tint for fills: behind icons, a highlighted column, soft panels. Buttons have their own colours under Buttons. |
| Typography | Body text font and size: the font of the page's text and the size of its paragraphs and lists, the theme's smaller and larger text keeping its proportion; without a font chosen, each device's own system font. Heading 1 to Heading 6, each a font, a size and bold; without a font chosen, headings use the body font. Link colour for links in running text (at the default a link takes the colour of the text around it, while source links take the primary colour; on navy grounds and in the On this page list links keep the text colour), its hover colour, underline on or off. |
| Colours | Page background, card and panel background, body text, headings and strong text, quiet text, rules and borders, focus outline. |
| Buttons | Text, background, border and their hover states; corner radius (half the button's height or more makes a pill); button text font and size, which smaller buttons keep in proportion. |
| Forms | Form background, border, label colour, field border, button colours and their hover; form text font and size. |
| Header | Layout (brand left with the menu right, or brand above a centred menu); background, slightly see-through by default; text and navigation colour, and navigation on hover; navigation font and size; a separate logo; the id of the HubSpot menu to render. |
| Footer | Background (at the default it shows the page background); text, link and link hover colours; footer font and size, which the links and the bottom row keep in proportion; a separate logo; the id of the HubSpot menu to render. No layout choice. |
| Layout | Maximum content width, corner radius, spacing: compact, regular or roomy, the space above and below every section whose Section spacing is Comfortable, the default for most; the Answer brief sets its own. |
| Answer engines | Organisation type for the site graph, a search action and where it points, and Mark the heading and the direct answer as speakable, which points a voice assistant at the page's h1 and, on a page with an Answer brief, at its direct answer. |
For h1 and h2 the size is the largest, on wide screens; narrower screens scale
it down. Every place that sets a heading larger or smaller keeps its proportion to the size chosen, the
hero's h1 included.
The logo starts as the primary logo in your HubSpot brand kit; choosing an image under Brand replaces it. It shows in the header and footer unless they have their own, and it is published as the organisation's logo. With no logo at all, the header and footer show your company name beside the theme's mark.
5. The modules
Every section module has the same skeleton, so its fields are grouped the same way in the editor: Content (what it says), the module's own groups, Answer engines (what it publishes), Style (how it looks).
5.1 Answer brief
The hero. The page's only h1, a scene beside it, and the short answer under both.
| Field | What it does |
|---|---|
| Eyebrow, Title, Heading element | A line break in the title starts the second line; the Emphasis word in it is set in the accent italic. The element is h1 by default; change it only when the page has an h1 elsewhere. |
| Calls to action | Up to three, each a text, a link and a style: button, secondary button or text link. Nothing renders until both a text and a destination are set. |
| Scene: What the scene shows | A photograph, the abstract art with a clip, or no scene. With no scene the copy widens. |
| Scene: Motion level | Heavy, medium or light, for the whole page. See Motion. |
| Scene: Photograph, Abstract scene clip, Photograph in motion | The theme ships its own photograph; an upload replaces it. Each clip is a short silent mp4 from the File Manager: Abstract scene clip for the abstract scene, Photograph in motion for the photograph, a loop made from the same photograph whose first frame matches it. Each appears once What the scene shows is set to its scene. A clip loads only while its scene is on screen and motion is on: heavy plays it, medium waits for Play scene, light never loads it, and a connection that is saving data waits for a press. |
| Answer: Question, Direct answer, Scope, Source | The question in a reader's words; the sentence or two an answer engine quotes; what the answer does and does not cover; where the notes behind it live, shown as a link under the scope. |
| Answer engines | Publish structured data; show the schema badge. |
| Style | Heading, subheading and body sizes; surface; spacing. |
Publishes a Question with @id, mainEntityOfPage
and an acceptedAnswer whose url points back at the section and whose
citation is the source's link, when there is one. The layout's speakable specification points
at the h1 and this answer.
5.2 Evidence cards
One to eight claims in a grid, each with its source and, behind a disclosure, the reasoning.
| Field | What it does |
|---|---|
| Content | Eyebrow, title, description, heading element, a note under the grid, anchor. |
| Items: Symbol, Kicker, Title, Explanation | An icon (link, person, document, check, clock, none); the small line after the index; the claim in one sentence; what it means in practice. |
| Items: Source | Type (the small line above), link text, link. Published as the claim's citation. |
| Items: Detail | Shown behind Why this matters. Leave empty to hide the disclosure. |
| Items: Owner, The owner is, Reviewed on | A credit line under the source, shown only when entered. Fill them on a real site; they are the part of an answer that makes it trustworthy. The owner is a person, or a team or organisation. Only an owner set as a team or organisation, and written exactly as the company name in the address marked Default under Settings, Marketing, Email, Configuration, Footer addresses, is linked to the site's organisation. |
| Style: Columns | Auto, one, two or three. |
Publishes an ItemList of Claim. A claim needs only a title to
be published; citation, author and review date appear when entered.
5.3 Method explorer
Three steps as tabs beside a panel, each with what you start with and what you leave with. With scripts off all three panels are readable in order.
| Field | What it does |
|---|---|
| Content | Eyebrow, title, description, heading element, anchor. |
| Items: Tab, Title, Explanation | The word on the tab; the step's heading; what happens in it. |
| Items: Input, Output | Shown under Start with and Leave with. |
| Items: Source | Where the reasoning behind the step lives. The link text defaults to Explore the reasoning. |
Publishes a HowTo with three HowToSteps, each with its URL.
The art beside each step is drawn by the theme; at heavy motion it floats and tilts with the pointer.
5.4 Fit comparison
A real table with three fixed columns: the consideration, the reference option, the option this page argues for. It scrolls inside its own region on a phone. A comparison with more options is a different module, not a setting.
| Field | What it does |
|---|---|
| Content | Eyebrow, title, description, heading element; the three column labels; a caption read by screen readers; a note under the table; anchor. |
| Items: Criterion, Reference, Answer | One row each: the thing compared, how the reference handles it, how the highlighted option handles it. |
Publishes an ItemList of two Products carrying the rows as
additionalProperty pairs.
5.5 Expert answers
Questions with answers, each a native <details>: it opens without scripts and a
screen reader announces its state.
| Field | What it does |
|---|---|
| Content | Eyebrow, title, an editorial note, heading element, anchor. |
| Items: Question, Answer | Published as the FAQ question and its accepted answer. Keep answers self-contained: an answer that says "see above" is useless once quoted. |
| Items: Source, Owner, Reviewed on | The source's link under the answer, published as the answer's citation; the credit line, only when entered. |
| Style: Disclosure motion | Follow the page, a level of its own, or off. |
Publishes an FAQPage with every question that has an answer.
5.6 Next step
The decision guide: two to four situations as buttons, one route each, in a dark shell.
| Field | What it does |
|---|---|
| Content | Eyebrow, title, description, heading element, the label of the button group, anchor. |
| Items: Tab, Title, Explanation, Question | The word on the button; the first thing this team should do; why; the question they keep hearing, shown as a quote. |
| Items: Call to action | Text, link, style. |
Publishes nothing, on purpose.
5.7 The site kit, ten more modules
| Module | What it is | Publishes |
|---|---|---|
| Simple hero | An inner page's opening: headline, introduction, actions, an optional image. Sets the page's motion level when first. | nothing beyond the page |
| Feature split | Copy beside a picture, sides swappable, up to six points as a list. | nothing |
| Card grid | One to twelve cards with a symbol or image, kicker, heading, text and one action. | ItemList of Service, Thing, Product or WebPage |
| Call to action band | One statement and up to three actions, as a dark shell or flat on the section's surface. | nothing, on purpose |
| Pricing table | One to four plans with price, period, what is included, one action, one highlighted. | Product with an Offer per priced plan |
| Testimonials | Quotes with person, role, company, optional rating, and where the words were published. | Review only where a rating was given |
| Logo bar | A row of logos, the name shown as text when there is no image. | nothing |
| Stats | Two to four figures with a caption, context and where each was measured. | Claim with a citation each |
| People | Portrait, name, role, biography, areas of expertise, profile. | Person with jobTitle, knowsAbout, sameAs |
| Contact block | Email, phone, hours and the address from your default footer address beside a HubSpot form. | ContactPoint on the organisation |
| Definitions | A glossary, each entry written to be quoted on its own. | DefinedTermSet of DefinedTerm |
| Sources | The references list: title, publisher, date, kind, link, note. | ItemList of CreativeWork |
| Publisher facts | Legal name, email, founding date, registration, profiles, address. | merges into the site's Organization by @id |
| Steps | A numbered process or a dated timeline, each step with an outcome and a source. | HowTo, or an ordered ItemList |
| Video with transcript | YouTube, Vimeo or an mp4, with poster, duration and transcript; an mp4 can carry captions from a WebVTT file; the player loads on press only. | VideoObject with transcript and caption |
| On this page | A contents list built from the page's sections, optionally sticky. | nothing; the headings are the structure |
Every one of them has the same head (eyebrow, heading, heading element, introduction, calls to action, anchor), the same style choices, and where it publishes data, the same switch and badge.
5.8 The fragments
Call to action link: one call to action (text, link, style) with the theme's arrow, available anywhere. Navigation: a HubSpot menu rendered as the theme's own markup, one level of children as disclosures, an optional call to action at the end. The menu comes from the module field first, then from the menu id in theme settings, and with neither, the account's default menu. The header and footer are global content, so a menu chosen there applies to every page; a Navigation module dropped into one page's content shows its menu in that page only, and the header keeps the site menu.
6. The rules every module shares
- Anchor. Each module has an Anchor field, the section's id, so
#evidencein a link scrolls there. Two copies of a module on one page need two anchors. - Heading element and size are separate. Heading element is a content decision and keeps the outline honest; subheadings inside a module take the next level down on their own. Heading size, Subheading size and Body size are style decisions, so an
h2can wear theh3size. - Calls to action. Every section has a group of up to three under its description, each a text, a link and a style (button, secondary button, text link), so a button and a text link can sit side by side. An item with its own action has one, with the same three fields.
- A source is the same three fields wherever a module has a Source group: type, link text, link. Evidence cards and Stats publish the link as the citation; the Answer brief and Expert answers publish it as the answer's citation; Method explorer, Steps, Definitions and Testimonials (rated quotes only) publish it as the item's URL. The type, the small line above the link, shows in Evidence cards, Stats, Steps, Definitions and Testimonials; the Answer brief, Expert answers and Method explorer show only the link.
- Links that leave the page carry the ↗ mark; forward links carry the arrow.
- Surface and spacing. Every section can sit on the page colour, white, mist or navy (inverse, with every colour flipped for the text inside), and can be compact, comfortable or generous (the Answer brief, which opens the page, sets its own).
- Structured data is a switch, on by default. Turn it off on the second copy of a module so a page never carries two blocks of the same type.
- Interface words follow the page's language. The words the theme writes itself (Menu, Close, Motion: on, Motion: off, Play scene, Why this matters, Transcript, the contact and publisher labels and others) are in English, German, French, Spanish, Italian, Dutch, Portuguese or Turkish, as the page is; any other language gets the English words. A module with a Labels group takes your own words there instead.
- Nothing is invented. No rating, price, person or date appears in the data unless it was typed into a field.
7. Motion
Three levels, set once per page on the hero's Motion level, or with ?motion=light
on the address for a preview. The visitor can turn all of it off with the switch in the footer, and a
device that asks for reduced motion, or a connection that is saving data, always wins.
| Effect | Light | Medium | Heavy |
|---|---|---|---|
| Sections enter | quick fade | staggered reveal | staggered reveal |
| Headline arrives line by line; the accent word settles and catches the light | yes | yes | |
| Evidence cards: a band of light, the symbol glows once | yes | yes | |
| Comparison rows wipe in one after another | yes | yes | |
| Schema badges type themselves in | yes | yes | |
| The hero clip plays: the abstract scene's clip, or the photograph in motion | on request | yes | |
| Tokens drift behind the hero and flow upward on scroll | yes, fine pointer | ||
| Scene, caption and buttons answer the pointer | yes, fine pointer | ||
| Sparks from a section's eyebrow the first time it enters | yes | ||
| Method art floats and tilts with the pointer | yes, fine pointer | ||
| The schema object, a slow cube naming what the page publishes | yes, fine pointer, wide screens |
Every effect moves with transform and opacity only, pauses off screen, and adds nothing a machine reads. On a phone the pointer-driven parts do not exist.
8. Structured data
| Block | From | What Google does with it today |
|---|---|---|
Organization, WebSite, WebPage, BreadcrumbList | the layout, one graph on every page | breadcrumb eligible; the organisation helps Google tell your company apart from others |
Question with acceptedAnswer | Answer brief | no Google feature of its own; the page's question and answer as data |
ItemList of Claim | Evidence cards | Google reads Claim only inside fact checks, which it is phasing out; the claim and its source as data |
HowTo | Method explorer | How-to rich results ended in September 2023; the steps still read as ordered steps |
ItemList of Product | Fit comparison | a rich result needs offers or reviews, which are not invented here |
FAQPage | Expert answers | FAQ rich results ended for every site on 7 May 2026; the questions and answers as data |
That last column is the honest one. Google says its AI features need no special schema.org markup, and asks that structured data match the visible text. Bing says structured data may support clearer grounding and guarantees nothing. So the markup here is not a route to a rich result or a citation. It states the page's question, answer, steps and evidence, and who stands behind them, as typed data that matches what a reader sees, so a machine does not have to guess. Every URL in the data is absolute, and every block is compared with the visible text before a release. Sources, read on 24 September 2026: Google, AI features and your website; Google Search Central, documentation updates; Google, fact check markup; Bing Webmaster Guidelines.
9. Building a page
Eight page templates (home, page, answer page, about, contact, landing page, blog listing, blog post) and seven system templates, twenty-four modules and five sections. Answer page is the theme's core page: one question answered, with the evidence, the remaining questions and a next step, its hero without a scene at medium motion. Five sections in the section library compose the modules into ready rows: answer and evidence, method and fit, questions and next step, text and image, a statement.
The recipe for a page that reads well to a machine: one hero with the question and its answer; evidence with real sources, owners and review dates; one FAQ with self-contained answers; a next step. Then check it as a crawler would, with scripts off, and confirm the answer is near the top and every claim points somewhere.
10. Questions
Can I use it without the structured data?
Yes. Every module has a Publish structured data switch. The page reads the same; it just stops telling machines what it is.
Where does the hero clip come from?
A theme cannot contain a video, so a clip is a file you upload to the File Manager and choose on the hero: Abstract scene clip for the abstract scene, Photograph in motion for the photograph. Each field appears once What the scene shows is set to its scene. The hero is complete without one.
Why is the address missing from the data?
Because one of street, city or country is empty in the address marked Default under Settings, Marketing, Email, Configuration, Footer addresses. Themes read it there, not from Account Defaults. The graph publishes the address whole or not at all, and a published page shows a change once it is published again.
My blog already has HubSpot's structured data switched on. Do posts get two blocks?
No. The switch is in Settings, Content, Blog, General (Structured Data), on by default for
blogs created after 4 August 2022. While it is on, HubSpot writes a BlogPosting for each post
and the theme writes none, so a post never carries two article blocks. Turn it off and the theme writes its
own Article instead: the author as a Person who works for your organisation, with
their website and profiles, and the date the post last changed, all linked to the site graph. Both are
valid; the theme's says more.
Does the menu come from my HubSpot navigation?
Yes. In the page editor, click the header, then Open in global content editor, and pick a menu on its Navigation module; for the footer, pick one on Footer links. Or put a menu's id in the theme settings (Header, Footer): the number at the end of the address while that menu is open in Settings, Content, Navigation menus (for the default menu, open another menu first, then it again). A menu picked on the module comes first, then the id; with neither, the account's default menu shows. The header and footer are global content, so a menu chosen there applies to every page, and one page cannot have its own header menu. A Navigation module dropped into one page's content shows its menu in that page only; the header keeps the site menu.
What happens with JavaScript off?
Everything is readable: every tab panel and route is shown in order, every disclosure opens natively, and the page's data is unchanged, because it is in the HTML, not built by a script.