Theme

Theme tags assign or render content that’s part of your theme.

include

Renders a snippet.

Inside the snippet, you can access and alter variables that are created outside of the snippet.

{% include 'filename' %}

• filename: The name of the snippet to render, without the .liquid extension.

javascript

JavaScript code included in a section or snippet file.

To learn more about how section-specific JavaScript is loaded and run, refer to the documentation for sections.

{% javascript %}
  javascript_code
{% endjavascript %}

• javascript_code: The JavaScript code for the section.

render

Renders a snippet or app block.

Inside snippets and app blocks, you can't directly access variables that are created outside of the snippet or app block. However, you can specify variables as parameters to pass outside variables to snippets.

While you can't directly access created variables, you can access global objects, as well as any objects that are directly accessible outside the snippet or app block. For example, a snippet or app block inside the product template can access the product object, and a snippet or app block inside a section can access the section object.

Outside a snippet or app block, you can't access variables created inside the snippet or app block.

{% render 'filename' %}

• filename: The name of the snippet to render, without the .liquid extension.

render tag parameters

Passing variables to a snippet

{% render 'filename', variable: value %}

Variables that have been created outside of a snippet can be passed to a snippet as parameters on the render tag.

📘

Tip

Any changes that are made to a passed variable apply only within the snippet.

section

Renders a section.

Rendering a section with the section tag renders a section statically. To learn more about sections and how to use them in your theme, refer to Render a section.

{% section 'name' %}

• name: The name of the section file you want to render.

stylesheet

CSS styles are included in a section or snippet file.

To learn more about how section-specific CSS is loaded and run, refer to the documentation for sections.

{% stylesheet %}
  css_styles
{% endstylesheet %}

• css_styles: The CSS styles for the section.