Theme Tags

Theme Tags serve multiple purposes in HTML templates. They generate specific HTML markup, inform the theme about layout and snippets to employ, and divide an array into separate pages.

content_for

Generates an area for displaying one or more block elements.

The content_for tag needs a type attribute to specify if it will display a single fixed block or multiple blocks from JSON templates or section groups.

• blocks
• block

blocks

Renders block elements within sections or other blocks as set in the JSON template or section groups. Refer to theme blocks for creating blocks that can be utilized in this manner.

block

Renders a static theme block within sections or theme blocks.

include

Renders a snippet.

In this code snippet, you can view and change variables that were defined outside of it.

Deprecated

Deprecated because handling variables this way decreases performance and complicates code readability and maintenance.

The include tag has been replaced by render.

filename

The name of the code snippet to display, excluding the .liquid extension.

javascript

JavaScript code is placed in a section file. You should use these tags only if your section or app block is intended for multiple themes or stores. Otherwise, include the JavaScript required by your section in your theme's assets directory. Each section or app block can only have one {% javascript %} tag. For more details on how section-specific JavaScript is loaded and executed, consult the documentation for sections.

layout

Loads a different template from the layout folder of a theme. If no alternate layout is specified, the theme.liquid template is used by default.

The name of the layout file you want to use should be wrapped in quotes. If you don't want to use a layout, use 'none'.

The default layout used is theme.liquid. You can change the layout using the layout tag, or choose to have no layout.

render

Displays a code snippet from the snippets folder of a theme.

Inside snippets and app blocks, you can't directly access variables created outside of them. However, you can pass variables as parameters to snippets.

While you can't directly access these variables, you can access global objects and any objects 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 them.

file

The name of the code snippet to display, excluding the .liquid extension.

render tag parameters

for

You can display a snippet for each element in an array using the for parameter. You can also specify an optional as parameter to refer to the current item during each iteration within the snippet. Furthermore, you have access to a forloop object that pertains to the loop within the snippet.

Passing variables to a snippet

Variables created outside of a code snippet can be passed to the snippet as parameters using the render tag.

with

You can send one object to a snippet using the with parameter. You can also provide an optional as parameter to name the object inside the snippet. If you don't use the as parameter, you can refer to the object using the snippet filename.

section

To render a section using the section tag, it displays the section in a static manner. For further details on using sections in your theme, refer to Render a section.

name

The name of the section file you wish to display.

sections

Renders a section group.

Use this tag to display section groups within your theme's layout content. Position the sections tag where you want to show it in the layout.

To find out more about section groups and how to incorporate them into your theme, see

name

The name of the section group file you wish to display.

stylesheet

CSS styles are contained within a section file. These tags should only be used if your section or app block is intended for use across multiple themes or stores. Otherwise, include the necessary CSS styles directly in your theme's assets directory. Each section or app block may only contain one {% stylesheet %} tag. For further details on how section-specific CSS is managed and executed, consult the section documentation.

css_styles

The CSS styles for the section.