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.

Related Blogs

Shopify New Section

New Sections Not Showing Up in Shopify Theme Customizer! How to Fix

The newly created section shows on the Shopify theme customizer only if we set presets in the schema. Learn how to set preset in the Shopify section schema.

Conditional Tags in Shopify Liquid

if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid

Control Flow or Conditional Tags determines what content should be rendered based on given conditions. if, unless, elsif/else, case/when are conditional tags.

Iteration Tags in Shopify Liquid

for loop, cycle and tablerow Iteration Tags in Shopify Liquid

Iteration tags repeatedly run blocks of code. It renders an expression for every item in an array. Read more about for loop tag, cycle tag, tablerow tag, and its properties.

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

When we work with images in Shopify, We have to get the image CDN URL from Shopify objects, get the theme assets URL for the theme images, or generate an HTML image tag from the image URL. Explains how to work with images in Shopify.

React Hook is Called Conditionally

React Hook is Called Conditionally

Error: "React Hook is called conditionally. React Hooks must be called in the exact same order in every component render" occurs when hooks are invoked conditionally or after a return of a value.

Adjacent JSX elements must be wrapped in an enclosing tag

Adjacent JSX elements must be wrapped in an enclosing tag

The "Adjacent JSX elements must be wrapped in an enclosing tag" error can be solved by wrapping the multiple elements in a parent div or in a react fragment

Limit Text in Laravel

Limit Text in Laravel

Limit text in Laravel can be done using the Str class from Illuminate\Support\Str namespace for truncating text by character count and word count.

Import and export may only appear at the top level

Import and export may only appear at the top level

The error "import and export may only appear at the top level" may occur due to a missing closing brace when declaring a function or class. Explains with an example.

Pass event and parameter onClick in React

How to pass event and parameter onClick in React

We set the inline arrow function (event) => clickHandler(event, "Hello World!") as props to the onClick event handler in the button. The arrow function takes the event as an argument and calls the clickHandler function.