Liquid Templates and Snippets can be added to help you extend existing pages or build Custom Pages for your site.

Templates are full layouts and customizations used to build Custom Pages.

Snippets are reusable pieces of code that can be included in a Template to avoid re-creating the same piece on every page. Examples: header, footer, top navigation bar.

NOTE: Before working in the Code Editor, it is strongly recommended that you create a backup of your theme under Customization > Backups > Create Backup.

To start, you’ll need to access the Code Editor, under Customization > Advanced > Code Editor. Once there, you’ll see Templates (1) and Snippets (2) in the left column.

To create a new Template or Snippet for use with a Custom Page, you’ll click the +New File button at the top right of the page:

The New File screen will come up. You’ll need to enter a name and select liquid as the File Format.

NOTE: Naming the file correctly is important

  • If you include an underscore before the name, it will be automatically created as a Snippet. Example: “_snippet-name”

  • If you do not include an underscore before the name, it will be created as a Template. Example: “template-name”

Once you click Create New Template or Snippet, you’ll be brought to the Code Editor with your new template in the edit box. See the image below where the template-name and the _snippet-name files were automatically assigned to the correct section.

Liquid documents accept Liquid, Javascript, HTML, and CSS natively.

If you’ve created a Snippet, you can include that snippet in an existing liquid template (or another snippet) by adding the code below in place where you’d like it to appear. You'll use the following format:

{% include 'snippet-name' %}

You would replace snippet-name with the name you chose for your snippet but don't include the underscore. In the example image below, the snippet is placed to appear below the Header section of the home page (index):

If you’ve created an entire Template, you can apply it to a Custom Page under Customization > Pages > New Page. Set up the new page and choose your new template at the bottom before clicking Create New Page.

In this example, the page created was titled New Page, with the URL https://uscreen-test.com/pages/new-page

If you want your new page to show up in Google search results, you’ll need to add it to the _seo.liquid snippet.

From the example image below, you’ll want to copy the {% when “page” %} section, including the <title> and <meta name…> tags and edit the HTML to match the new page.

So we’ll enter this in the _seo.liquid snippet:

{% when "new-page" %}

<title>{{ program.meta_title | escape }} | {{ storefront.title }}</title>

<meta name="description" content="{{ program.meta_description | strip_html | escape | truncate: 195 }}">

NOTE: You would replace the term new-page with your name for the Page URL above

Once your template is ready and the new page is created and set up, you can check the Show on site checkbox to make your new page live on your site!

Your page is now ready to be viewed by your customers. You can add a link to the new page in your Navigation menu or as a link anywhere on your site.

Did this answer your question?