How to import sets of variables into a template
HubL allows you to import variables and macros from a coded file into the context of one or multiple other templates. This technique can be very useful for complex or multi-language sites, because it provides you with a central place to store and edit sets of information, in a single location, that can then be printed throughout your template and included custom modules.
This tutorial goes over the basic implementation of the import tag, as well as a few real-world use cases where this may be helpful:
Basic usage tutorial
The following tutorial declares two variables and a macro in a HTML file and imports it into another template. These imported values can then be printed in the master template and included custom modules.
Create a new .html file in Design Manager
Navigate to Design Manager and create a new coded template. Make sure you save it with .html file extension. Once you have created the .html file, clear out the prepopulated markup.

Add variables and/or macros to file
Define the variables that you would like to use throughout other templates. This example defines two variables for employee names and one macro that will print a job title wrapped in a customizable tag with a predefined class. You can learn more about variable and macro syntax here.
Please note that variables should single words or use underscores for spaces (hyphenated variables are not supported).
{% set ceo = "Brian Halligan" %}
{% set cto = "Dharmesh Shah" %}
{% macro job(tag, job_title) %}
<{{ tag }} class="job-title">{{ job_title }} : </{{tag}}>
{% endmacro %}
Publish the file
When you publish this file, you must uncheck the option to "Make this template available for new content." This option allows you to save the file without the required page variables. Since this file will not be used as a master template for content, you do not need it to be available as an option for content creators.

Copy the path to this file
In order to import this file into another template, you need to copy down the relative Design Manager path to the file. To copy the path:
- Click Actions > Get public URL
- Copy the HubL tag
The Design Manager path is file structure is in quotes within this tag. You will not need the entire tag, just the part in quotes. It should look something like:
"custom/page/web_page_basic/my_filename.html"

Import the file into a template
To import your variables into another template:
- Open a template layout or coded template that you would like to use these variables in.
- Paste the tag that you copied into the <head> of your template. For template layouts, this is available under Edit > Edit head.
- Delete everything from the tag except for the path in quotes (ie "custom/page/web_page_basic/my_filename.html")
- Add an import statement around the path (see syntax below).
- Give a variable name to file that you are importing (see syntax below). To do this add "as" after the file path followed by the variable name. The below example names the import "employees".
Basic Syntax of import tag:
{% import "path" as name_of_import %}
Example import:
{% import "custom/page/web_page_basic/employees.html" as employees %}
Call the variables or macros
Now you can call these variables elsewhere in the template. Updating the included file's variables values will automatically update the master template. As previously mentionned, these variables can also render within custom modules that are in use in the master template.
{{ employees.job('span', 'CEO') }} {{ employees.ceo }}
{{ employees.job('span', 'CTO') }} {{ employees.cto }}
<span class="job-title">CEO : </span> Brian Halligan <br>
<span class="job-title">CTO : </span> Dharmesh Shah <br>
Publish master template
Finally, publish the master template. Anytime you change the variable values within the imported html file, these value updates will propagate through your master template and its custom modules.
Static database example
Using this technique, you can create simple static databases that you can iterate through. In this example, the imported file contains a database of 3 products.
In the imported file, a variable called "in_stock" is defined as a sequence of dicts. Each of these dicts contains information about a different products.
{% set in_stock = [
{'name': 'Toy', 'price': '20', 'size':'Small', 'quantity': '3'},
{'name': 'Shirt', 'price': '15', 'size':'XL', 'quantity': '10'},
{'name': 'Bike', 'price': '200', 'size':'Large', 'quantity': '6'}
] %}
After importing this sequence of dicts into another template, we can use a for loop to iterate through these custom variables printing the product information into the markup.
The first line of code is the import tag that specifies that the contents of this file will be imported with the name "products". It is recommended that this line of code goes in your <head> or towards the top of your template.
Next, a for loop is declared that iterates through each products within products.in_stock. Since each product is the individual dict within the imported file, we can access any of the product's properties, by appending the attribute name (ie "name", "size", "price", etc.). to the iteration item (ie "product").
{% import "custom/page/web_page_basic/products.html" as products %}
{% for product in products.in_stock %}
<h2>Name: {{ product.name }}</h2>
<h3>Size: {{ product.size }}</h3>
<h4>Price: ${{ product.price }}</h4>
<h4>Number in stock: {{product.quantity }}</h4>
{% endfor %}
<h2>Name: Toy</h2>
<h3>Size: Small</h3>
<h4>Price: $20</h4>
<h4>Number in stock: 3</h4>
<h2>Name: Shirt</h2>
<h3>Size: XL</h3>
<h4>Price: $15</h4>
<h4>Number in stock: 10</h4>
<h2>Name: Bike</h2>
<h3>Size: Large</h3>
<h4>Price: $200</h4>
<h4>Number in stock: 6</h4>
{% import "custom/page/web_page_basic/products.html" as products %}
{% for product in products.in_stock %}
{% if product.price < 30 %}
<h2>Name: {{ product.name }}</h2>
<h3>Size: {{ product.size }}</h3>
<h4>Price: ${{ product.price }}</h4>
<h4>Number in stock: {{product.quantity }}</h4>
{% endif %}
{% endfor %}
<h2>Name: Toy</h2>
<h3>Size: Small</h3>
<h4>Price: $20</h4>
<h4>Number in stock: 3</h4>
<h2>Name: Shirt</h2>
<h3>Size: XL</h3>
<h4>Price: $15</h4>
<h4>Number in stock: 10</h4>
Multi-lingual glossary example
This technique is useful for creating a glossary of string variables in different languages that load throughout your templates, based on the URL of the page. Check out the full tutorial here.