Home > Shopify Development > How to use a Layout file in Layout Folder

How to use a Layout file in Layout Folder in Shopify

Sam Updated: July 15, 2024

Drive 20-40% of your revenue with Avada

Get Started

Liquid has been trusted by a lot of web developers because of its multiple functions. Thanks to Liquid, you can upload dynamic content by using tags, filters, and arrays. In fact, tags have many interesting features that assist you in posting a variety of content. In this tutorial, we will dig deep into layout in theme tags.

Table of content

What is Liquid and Liquid tags
How to use a layout file in layout folder

What is Liquid and Liquid tags

There are three types in Liquid codes including objects, tags, and filters. Liquid use objects to show where to display content on a page. Double curly braces denote objects and variable names. Filters change a Liquid object output. Tags create logic and control flow for a template. Tags begin with two curly braces and percent signs. Tags can be divided into three types: control flow, iteration, and variable assignment.

Tags have four types: control flow, iteration, theme, and variable. Today, we focus on theme tags. Theme tags have three main functions including outputting template-specific HTML markup, telling the theme which layout and snippets to use and splitting a returned array into multiple pages.

In theme tags, you can use comment, include, form, layout, paginate, raw, section, and style. The tutorial guides you to use the layout file in the layout folder.

How to use a layout file in layout folder

Layout template starts with {% layout ‘alternate’ %} to signify that you are alternating layout file from the layout of your theme. In case you don’t define an alternate layout, the theme.template template file is used by default. Let’s take a look at the example below:

Load the layout/full-width.liquid template

{% layout 'full-width' %}

If you do not want to use no layout file, you can specify none as the layout. Just by doing a simple step, you can get rid of the layout file.

Render the template file without using a layout

{% layout none %}

Conclusion

In conclusion, theme tags have three main features that support the flow of content on your website. Layout belongs to theme tags. Layout file is used to tell which layout you are using. We hope that this tutorial is helpful and you can comment to point out your difficulties then we will address them.

Liquid

Liquid Highlight in Shopify Liquid Basics in Shopify Liquid Iteration: for break limit Liquid default_errors: How to Show Default Errror Messages Liquid default: How to Set Default Value in Filter Liquid time_tag: How to Convert Timestamp into HTML time Tag Liquid Highlight Formate Address in Liquid Create a set of Links for Pagination in Shopify How to Convert String to JSON Fomat in Shopify How to Add Weight with Unit Liquid date: How to Format Date, Convert to New Format How to Create a Collection-aware product URL in Shopify How to get frontend login link in shopify Liquid file_url: How to Get File URL in Shopify Liquid file_img_url: How to Get File Image URL in Shopify Liquid remove: How to Remove Specified String in String Liquid prepend: How to Add a Suffix to a String Automatically Display Singular or Plural of String Based on Number How to use money filter Liquid abs: Show absolute value of a number Merge Two Arrays into One in Liquid How to use a Layout file in Layout Folder Liquid and/or: Multiple conditions Liquid for loops Liquid case when statement Liquid unless Loops How to Display Raw Code in Liquid Comment Syntax How to Comment Out Liquid Code How to strip whitespace from the left or right side in Liquid

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.