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.
On datainfinities.com, Read articles all around JavaScript, React, Node.js, PHP, Laravel, and Shopify.
Related Blogs
New Sections Not Showing Up in Shopify Theme Customizer! How to Fix
if, unless, elsif/else and case/when Conditional Tags in Shopify Liquid
Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag
for loop, cycle and tablerow Iteration Tags in Shopify Liquid
React objects are not valid as a react child
How to Fix error:0308010C:digital envelope routines::unsupported
Can't set headers after they are sent to the client
Pass data from child to parent component in React
Laravel Cron Job Task Scheduling Tutorial
Explore All Blogs