layout, render and section Theme Tags in Shopify Liquid

Theme tags are a special type of tag that give us specific control over both un-rendered and rendered code. Theme tags allow us to select different theme layouts to use for different pages, and create sections or snippets that can be reusable in different templates. 

layout

The layout tag allows us to specify which layout should be used for the current page. A Sample code is given below.

{% layout 'layout-file-name' %}

By default, the theme.liquid layout is used. The layout tag allows you to specify an alternate layout. We can set no layout using none as  {% layout none %} .

The main advantage of layouts is that they enable us to make all our common elements in a single file, and it allows us to make global changes very easily. 

render

It renders a liquid snippet in a section or a template file.

{% render 'filename' %}

Inside the snippets, we can't directly access variables that are created outside of the snippet unless they are passed as variables into the snippet.

You can directly access global objects and page-specific objects that are directly accessible outside the snippet or app block.

In older versions, instead of render it was include.


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.

section

You can render a section in template file or another section using section tag.

{% section 'section-name' %}

Sections are Liquid files that allow you to create reusable modules of content that can be customized by merchants. Section files are kept inside the section folder. Learn more about sections.