How to Import HubSpot Macros Into Any File

Written by BJ Szyjakowski on 29 Jun, 2021

Use macro's in a global context by importing them wherever you need them.

In this previous article we learned how macros can be useful in a single file. Importing them into other files will allow you easily separate your macros from your project files keeping your entire codebase cleaner than ever.

Importing Macros Into Other Files

First create an HTML partial to house your killer macro(s)

macros.html

{% macro your_bad_ass_macro(args) %}
  {# do cool things here #}
  {# Save the world!! #}
{% endmacro %}

Then we import your macro file into the project file that you are working on. It could be a template, module.html, or CSS + hubl Stylesheet (not module.css)

module.html

{% import '../rel/path/to/macros.html' as macros %}

Congrats! You should now have access to all the macros you have written in macros.html from your module! (or wherever you decided to import them)

module.html

{% import '../rel/path/to/macros.html' as macros %}

<div class="do-cool-things-container">
  {# import cool things from macro and do cool things! #}
  {{ macros.your_bad_ass_macro() }}
</div>