Why aren't my theme's background images, icons, or other features working?

Last updated: August 30, 2017

Available For:

Marketing: Basic, Pro, Enterprise
Sales: N/A
Service: N/A

HubSpot default themes require several core assets that make all of their features work. Removing these CSS or JS files from a template will break various theme features. Symptoms can include icons rendering as shortcodes, background image sections not loading, animations not functioning, and more. Depicted below is an image of a page where the icons are not rendering.

Broken HubSpot Theme
Broken HubSpot Theme

The following are some troubleshooting recommendations, for when a theme feature is not working:

  • Ensure that your template has a global footer group.
  • Ensure that the global footer group contains an HTML module with required script tags (theme-name-main.js and theme-foundation-v1-0.js)
  • Check the order of the script tags. The footer HTML module should call theme-name-main.js followed by theme-foundation-v1-0.js
  • Ensure that the proper CSS file is attached in to the head of the template (Edit > Edit Head). Each template should have theme-name.css attached to the head of the template.
  • Check Content Settings for other scripts that could be interfering.
  • If you have made revisions to standard theme templates, try reverting the template to a previous version (Edit >View Revisions). Theme templates have various custom classes that if removed could prevent a feature from functioning.
  • Check the Javascript console for Javascript errors to try to track down any other Javascript files that may be interfering or breaking the theme's files.

Was this article helpful?