Liquid include: How to include a file in Liquid in Shopify

Drive 20-40% of your revenue with Avada

Get Started

Are you looking for some information about the include tag? Let’s take a look at our instructional writing on Liquid include: How to include a file in Liquid to know more deeply about the use of include.

Liquid include: How to include a file in Liquid

• About the include tag
• How to include a file in Liquid

About the include tag

The include tag allows you to include the content from another file stored in the _includes folder:

{% include footer.html %}

It can help you insert a snippet from the snippets folder of a theme.

{% include 'my-snippet-file' %}

Please note that you do not need to write the file’’s .liquid extension.

The code inside it uiwll have access to the variables within its parent template when you include a snippet.

How to include a file in Liquid

Including multiple variables in a snippet

There are two methods to get multiple variables included in a snippet. You are able to assign and include them on various lines, which generates them in the parent template:

{% assign my_variable = 'apples' %}
{% assign my_second_variable = 'oranges' %}
{% include 'snippet' %}

Or you can choose to generate variables on the same line where you include the snippet:

{% include 'snippet', my_variable: 'apples', my_other_variable: 'oranges' %}

Include tag parameters

With

The with parameter assigns a value to a variable inside a snippet that can share the similar name as the snippet.

For instance, in case you have a snippet that is called color.liquid, which contain the code below:

color.liquid

color: '{{ color }}'
shape: '{{ shape }}'

You are allowed to include the color.liquid snippet within theme.liquid as below:

input

{% assign shape = 'circle' %}
{% include 'color' %}
{% include 'color' with 'red' %}
{% include 'color' with 'blue' %}
{% assign shape = 'square' %}
{% include 'color' with 'red' %}

The result should be:

output

color: '' shape: 'circle'
color: 'red' shape: 'circle'
color: 'blue' shape: 'circle'
color: 'red' shape: 'square'

Including files relative to another file

You can choose to use the include_relative tag to include those fragments of the file which are relative to the recent file.

{% include_relative somedir/footer.html %}

There is no need to place your included content within the _includes directory. Instead, the inclusion is particularly relative to the file in which the tag is being used. For instance, in case ` _posts/2014-09-03-my-file.markdown euses the include_relative tag, the included file must be within the _posts` directory or one of its available subdirectories.

Please note that you are not allowed to employ the ../ syntax to specify an includ place which refers to a higher-level directory. All of the other capabilities of the include tag are available to the include_relative tag like variables.

Using variables names for the include file

The file name that you want to embed can be specified as a variable instead of an actual file name. For instance, let’s suppose that you defined a variable in your page’s front matter like this:

---
title: My page
my_variable: footer_company_a.html
---

Then you could reference that variable in your include:

{% if page.my_variable %}
  {% include {{ page.my_variable }} %}
{% endif %}

Please note that the include would insert the file footer_company_a.html from a directory, which is called _includes/footer_company_a.html, in this example.

Passing parameters to includes

Moreover, you are allowed to pass parameters to an include. For instance, let’s suppose that you have a file named note.html in your _includes folder, which contains this formatting:

<div markdown="span" class="alert alert-info" role="alert">
<i class="fa fa-info-circle"></i> <b>Note:</b>
{{ include.content }}
</div>

The {{ include.content }} is a parameter that gets populated when you call the include and specify a value for that parameter, just like this:

{% include note.html content="This is my sample note." %}

The content’s value (which is This is my sample note) will be added to the {{ include.content }} para meter.

Passing parameters to includes is very useful especially when you are in need of hiding away complicated formatting form your Markdown content.

For instance, let’s suppose that you have a special image syntax with complex formatting and you do not want your authors to remember the that complicated formatting. It could result in you deciding to simplify the formatting by using an include with parameters. Heere do we give you an example of the special image syntax that you may need to populate with an include:

<figure>
   <a href="http://jekyllrb.com">
   <img src="logo.png" style="max-width: 200px;"
      alt="Jekyll logo" />
   </a>
   <figcaption>This is the Jekyll logo</figcaption>
</figure>

You are able to templatize this content in your include and make every value available as a parameter like this:

<figure>
   <a href="{{ include.url }}">
   <img src="{{ include.file }}" style="max-width: {{ include.max-width }};"
      alt="{{ include.alt }}"/>
   </a>
   <figcaption>{{ include.caption }}</figcaption>
</figure>

This include does contain 5 parameters:

- url - max-width - file - alt - caption

The result of the original HTML code displayed earlier. You can also employ the Liquid’s default filter to safeguard situations in which users do not supply a value for the parameter.

To sum up, you are able to generate includes that act as various templates for many uses - inserting audio or video alerts, clips, special formatting, and more. Please kindly note that you ought to stay away from using too many includes since this will slow down the build time of your site. For instance, do not use includes when you add an image.

Passing parameter variables to includes

Let’s suppose the parameter that you want to pass to the include is a variable rather than a string. For instance, you may be using {{ site.product_name }} to refer to each instance of your product rather than the actual hard-coded name. Under this circumstance, your _config.yml file would have a key called product_name with a value of the name of your product.

The string you pass to your include parameter cannot insist of curly braces. For instance, you cannot pass a parameter that contains this:

"The latest version of {{ site.product_name }} is now available."

In case you need to include this variable in your parameter that you pass to an include, you have to store the entire parameter as a variable before passing it to the include.You are able to employ capture to generate the variable:

{% capture download_note %}
The latest version of {{ site.product_name }} is now available.
{% endcapture %}

Then pass this captured variable into the parameter for the include. Omit the quotation marks around the parameter content due to the fact that it is now a variable instead of being a string:

{% include note.html content=download_note %}

Conclusion

Above is a guide on how to include a file in Liquid. We hope that this guide provides you useful information about the include tag and helpful instructions to help you manage your site better.