How to use Shopify Layout None File Or Layout Folder in Shopify

if you were search how to remove the layout from a page or add a new layout to a page to make the page look you’re in the right place today i will show you how in three steps

first let’s explain some words like liquid and liquid tags..

What is Liquid

Liquid is a template language created by Shopify. It’s available as an open source project on GitHub, and is used by many different software projects and companies. This reference documents the Liquid tags, filters, and objects that you can use to build Shopify Themes.

What is Liquid Tags

Liquid tags are used to define logic that tells templates what to do.

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

Step :

1- Go to the online store > Theme >Edit Code

change menu on shopfiy store

2-

The first step is to create a layout file in your theme directory /layout. Let’s call it landing-page-layout.liquid. Inside, we add the layout code we want, the same way we usually use theme.liquid, but in this case we’re adapting it to our landing page.

layout shopify none create new shopfiy layout

Now that our new alternate layout has been created, we need to create a page template for it which we will name landing-page.liquid. The key to this whole approach is how layouts are applied to templates. By default, Shopify will apply theme.liquid to page templates unless you tell it otherwise. To do that and apply an alternate layout we do this:

{% layout 'landing-page-layout' %}

That tells Shopify to use our layout file at layouts/landing-page-layout.liquid

The power of this approach means we can create as many totally different page layouts as we want, all within a single shopify store and without any ugly hacks or workarounds.

Another situation the layout option can be useful, is situations where you don’t want theme.liquid to be applied to a page. This can be useful for situations where you don’t want to render a page in a conventional way such as displaying JSON data. You can do this with:

{% layout none %}

now will only render the code inside the page template and not the header and footer content inside the default layout file you create or you want to not render.

Leave a Comment