I suspect a lot of Shopify developers are like me and spend so much time daily working on template, section, and snippet files that it is easy to overlook the most powerful part of the Shopify theme architecture: layout files. Don’t worry, none of us have time for everything, and if you do… well then what are you doing here? Go make another Facebook!

In most projects, we often work with the theme.liquid layout file, adding CSS, scripts and various other things at a global level. That process often covers everything we need, since the layout is usually the same across the store. But what if we hit a scenario where we need some pages to look totally different? In the modern world of complete customization, that is totally possible! 

Let's say we build a Shopify store for a client but they also want a number of separate standalone promotional landing pages that have a unique design that has little in common with the store layout?

While you could add if/else logic to the theme.liquid to apply different base HTML, CSS and javascript to the landing pages and show/hide the appropriate elements with CSS, these approaches are far from clean and would add a lot of overhead to both the landing pages and the main store, since the code needed for each would be loaded on both.

Instead the ideal way to solve this problem is to leverage the power of alternate layouts. This allows you to create a dedicated layout for the landing pages and it allows us to follow the DRY (Don't Repeat Yourself) principle by keeping everything we need housed within a single custom layout.

The first step is to create the master layout file inside the /layouts directory of your theme. Let's call this landing-page-layout.liquid. Inside this we add the base layout code we need, in the same way we would normally do with theme.liquid but in this case we tailor it to fit our landing page.

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 the conventional way such as displaying JSON data. You can do this with:

{% layout none %}

This will render only the code inside the page template and not the additional header and footer content inside the default layout file.

And there you have it! A simple, clean, and effective solution to creating content that breaks the mold from the rest of your website, but doesn’t take forever to build and maintain. Simplicity is always key, and this elegant solution puts it at the forefront of your development process! Hope this helps!