Difference between revisions of "Theme.liquid"

From Spiffy Stores Knowledge Base

m
 
(7 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
== Overview ==
 
== Overview ==
  
The file '''theme.liquid'' is basically an HTML/XHTML file that contains liquid tags and provides the overall ''theme'' of the site. In this file, you will want everything that is normally included in a standard ''index.html'' page.
+
The '''theme.liquid''' file is basically an HTML/XHTML file that contains liquid tags and provides the overall ''theme'' of the site. In this file, you will want everything that is normally included in a standard ''index.html'' page.
  
 
For example, you will need
 
For example, you will need
  
* A doctype specifying whether it's transitional or strict
+
* A Doctype specifying whether it's transitional or strict
* A head tag
+
* A Head tag
* A body tag
+
* A Body tag
  
 
This file contains all the static elements of your site.
 
This file contains all the static elements of your site.
  
You must include the following two lines somewhere within the file.
+
You '''must''' include the following two lines somewhere within the file.
  
 
* head section:
 
* head section:
Line 18: Line 18:
 
   <pre> {{ content_for_layout }}</pre>
 
   <pre> {{ content_for_layout }}</pre>
  
The dynamic content(meaning all the other liquid templates being found in ../templates) such as the products screen or articles are rendered at the position where you included this tag.
+
The dynamic content is provided by the other liquid templates and the result of rendering these templates is included at the position where you included the ''content_for_layout'' tag.
  
Most likely you will want to specify javascript and stylesheet includes in the head tag of this file.
+
Normally, you will want to specify javascript and stylesheet includes in the head tag of this file.
  
An example of a javascript include tag with a liquid filter
+
Here is an example of a javascript include tag with a liquid filter
  
{{ 'shop.js' | asset_url | script_tag }}
+
<pre>{{ 'shop.js' | asset_url | script_tag }}</pre>
  
An example of a stylesheet include tag with a liquid filter
+
This is an example of a stylesheet include tag with a liquid filter
  
{{ 'shop.css' | asset_url | stylesheet_tag }}
+
<pre>{{ 'shop.css' | asset_url | stylesheet_tag }}</pre>
  
 
=== Variables ===
 
=== Variables ===
  
You have access to the following liquid variables:
+
In this file you have access to the following liquid variables:
  
* template
+
* [[Liquid Template Variables - template|template]]
* handle
+
* [[Liquid Template Variables - page_title|page_title]]
* shop
+
* [[Liquid Template Variables - handle|handle]]
* cart
+
* [[Liquid Template Variables - shop|shop]]
* collections
+
* [[Liquid Template Variables - cart|cart]]
* linklists
+
* [[Liquid Template Variables - products|products]]
* pages
+
* [[Liquid Template Variables - collections|collections]]
* blogs
+
* [[Liquid Template Variables - linklists|linklists]]
 +
* [[Liquid Template Variables - pages|pages]]
 +
* [[Liquid Template Variables - blogs|blogs]]
 +
* [[Liquid Template Variables - request|request]]
 +
* [[Liquid Template Variables - cookies|cookies]]
 +
 
 +
== Further Reference ==
 +
 
 +
* [[Liquid Basics]]
 +
* [[Liquid Tag Reference]]
 +
* [[Liquid Filter Reference]]
 +
* [[Liquid Variable Reference]]
 +
* [[Liquid Paginate Tag|Pagination ]]

Latest revision as of 13:17, 25 June 2018

Overview

The theme.liquid file is basically an HTML/XHTML file that contains liquid tags and provides the overall theme of the site. In this file, you will want everything that is normally included in a standard index.html page.

For example, you will need

  • A Doctype specifying whether it's transitional or strict
  • A Head tag
  • A Body tag

This file contains all the static elements of your site.

You must include the following two lines somewhere within the file.

  • head section:
{{ content_for_header }}
  • main content area:
 {{ content_for_layout }}

The dynamic content is provided by the other liquid templates and the result of rendering these templates is included at the position where you included the content_for_layout tag.

Normally, you will want to specify javascript and stylesheet includes in the head tag of this file.

Here is an example of a javascript include tag with a liquid filter

{{ 'shop.js' | asset_url | script_tag }}

This is an example of a stylesheet include tag with a liquid filter

{{ 'shop.css' | asset_url | stylesheet_tag }}

Variables

In this file you have access to the following liquid variables:

Further Reference