The Power of Alternate Layout Files in Shopify Theme Development

This is the second article in a series of advanced Liquid tutorials for designers and theme development. My previous post focused on how to create and use alternate templates when creating Shopify themes, however today I would like to turn our attention to Liquid “layout” files.

If you aren’t familiar with layouts you’ll find the default file, theme.liquid, in the “layouts” folder within your theme directory. If you’ve never seen one before you might be wondering what’s going on!

The theme.liquid file can be thought of as the master template for your store. Effectively it’s a wrapper for all our other templates found in the templates folder. As a general rule, elements that are repeated in a theme (ex: site navigations, header, footer, etc.) will be often be placed inside theme.liquid.

It’s entirely up to the theme designer to decide how much, or little, code is included in a layout file. For example, I often prefer to have certain elements of a layout file included as a snippet as this allows me to re-use them in alternate layout files — a topic we’ll cover shortly.

Just remember that all rendered pages in a Shopify theme, unless stated, will be based on the default theme.liquid layout file.

You might also like: How to Use Alternate Templates in Shopify Theme Development

The benefits of layout files

One of the main benefits of layouts is that they enable us to follow the DRY (Don’t Repeat Yourself) principle. By having all our common elements in a single file, it allows us to make global changes very easily. Another benefit is that our templates (product.liquid, collection.liquid etc) aren’t cluttered with markup that is repeated across the store.

Are you working with Visual Studio Code for development? Check out our article on the best Visual Studio Code extensions.

Creating a layout file

Regardless of how much HTML you include in a layout file, there are two important Liquid tags that you must include in a Shopify layout file:

{{ content_for_header }} must be placed between the opening and closing <head> tag. This inserts the necessary Shopify scripts into the <head> which includes scripts for Google Analytics, Shopify analytics, for Shopify apps, and more.
{{ content_for_layout }} must be placed between the opening and closing <body> tag. This outputs dynamic content generated by all of the other templates (index.liquid, product.liquid, etc.).

theme.liquid, along with its two required placeholders tags, are required in order for Shopify to validate a theme.

Alternate layouts

One layout file isn’t going to cover every eventuality and there will be situations where you will require a completely different layout. You could start hiding elements with CSS but that feels a little wrong - the far better approach is to create an alternate layout complete with different HTML markup.

A good example of this might be a specific landing page for a product or perhaps a newsletter sign up page that doesn’t require the same “site furniture” as the rest of the site. In these situations, it’s possible to designate that the micro render with an “alternative” layout file.

Creating an alternative layout is very straightforward. The first thing to do is create a new file and give it a relevant name and the .liquid extension. Next save it in the layouts folder in your theme directory. In this file place any HTML you need (i.e. HTML declarations, CSS, JS links etc) along with the two placeholders discussed above.

In order to use this layout file, and effectively override the default theme.liquid layout file, we use the following Liquid syntax as the first line in any of a template file (index.liquid, product.liquid, etc.):

{% layout 'alternative' %}

In this instance, the default theme.liquid will be not be applied but rather the layout called alternative.liquid.

It’s also possible to request that the layout file isn't applied. The syntax to request that a layout file isn't applied is:

{% layout none %}

This needs to be the first line at the top of the relevant template (index.liquid, product.liquid, etc.). A use case for this might be when rendering output from your store in an alternative syntax such as JSON.

Take a look at some of the top prototyping tools and how rapid prototyping can help your design and development process.

Using snippets to be even more DRY

If I know that a theme will be using multiple layouts I often remove code out of the layout file and into a snippet. This means that I can reuse code across multiple layouts. For example, I often have the following structure:

snippets/html-header.liquid - Contains all the essential head items right up to the opening body tag
snippets/html-footer.liquid - Contains any relevant script tags and the closing body tag
snippets/header.liquid - The main header that is used across the majority of the site
snippets/footer.liquid - The main footer that is used across the majority of the site

In order to use these are base layout file would look as follows:

{% include html-header %}
{% include header %}
{% include footer %}
{% include html-footer %}

The benefit of this approach is that when you come to create an alternate layout file you don’t need to recreate all your HTML header and footer content meaning you can update it all from two files. If you are only using one or two layouts it’s perhaps overkill.

Start using alternate layouts in your Shopify theme development workflow

Alternate layout files can come in extremely handy when you require radically different markup for a particular page or set of pages. Coupled together with the use of alternate templates it’s a powerful tool in your theme building toolbox and literally gives you endless possibilities to customise the look and feel of a store.

You might also like: How to Optimize Themes for Performance