Theme

section

Renders a section

Sections are self-contained, reusable components that can be included in different parts of a theme.

To create a section, define the HTML, CSS, JavaScript, and Liquid code in a new .liquid file within the sections folder.

To include a section in your template, use the {% section %} tag followed by the section file name without the .liquid extension.

Example: Including the featured-products section in your template

{% section 'featured-products' %}

render

Renders a snippet or app block.

Direct access to variables created outside of the snippet or app block is not permitted, but global objects and objects directly accessible outside the snippet or app block are accessible.

Example: Rendering a button template with a btn_name variable

{% render 'button', btn_name: "Click" %}

Inside the snippet or app block, access passed variables using variable name.

Example: Accessing the btn_name variable in the button template

<button class="button">
    {{ btn_name }}
</button>

Variables created inside the snippet or app block cannot be accessed outside of it.

When you render a snippet using the render tag, you cannot use the include tag inside the snippet.

Render Tag Parameters

for

You can render a snippet for every item in an array using the for parameter. You can also supply an optional as parameter to be able to reference the current item in the iteration inside the snippet. Additionally, you can access a forloop object for the loop inside the snippet.

Example:

{% render 'filename' for array as item %}

Passing Variables to a Snippet

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

Example:

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

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

with

You can pass a single object to a snippet using the with parameter. You can also supply an optional as parameter to specify a custom name to reference the object inside the snippet.

Example:

{% render 'filename' with object as name %}

Include

Includes the content of another template file within the current template. Direct access to variables created outside of the included template is permitted.

Example: Including a header template in your main template

{% include 'header' %}

Unlike the {% render %} tag, the {% include %} tag does not support passing variables.

layout

Layout tags are essential in template languages for defining the structure and organizing the content of your web application. They help you create a consistent layout across different pages and templates by wrapping your content with a predefined layout file.

Example:

{% layout 'main-layout' %}
<div class="homepage-content">
  <h1>Welcome to Our Website</h1>
  <p>Discover our latest products and services.</p>
</div>