The theme.liquid file

From Spiffy Stores Knowledge Base

Revision as of 09:42, 10 May 2017 by Shawn (talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Your theme can be edited in the Theme Editor, which can be found in the Design & Assets -> Theme Editor section of your store's Toolbox.

Your theme is a collection of files that control the layout of your website. Each individual file has the extension .liquid and is known as a Liquid template because it contains code written in the Liquid template language. Besides Liquid code, you can use other languages in a Liquid template, including HTML, CSS, and JavaScript.

The theme.liquid file can be thought of as the master template; all other templates are rendered inside of theme.liquid. Any elements that are repeated in a theme (ex: site navigation, header, footer, etc.) should be placed inside your theme.liquid file.

To edit your theme.liquid file, go to your Theme Editor, scroll down to the Store Layout section and click on the theme.liquid file.

Frequently asked questions about theme.liquid


1. How do I add in Javascript code for a widget?

Go to the Design & Assets -> Theme Editor section of your store's Toolbox, scroll down to the Store Layout section and click on the theme.liquid file to edit it.

In most cases, you should just be able to copy the code provided into the relevant part of your theme.liquid file. For example, some may ask that you copy their code into the <head> section. In that case, you paste your code just before the </head> line.

In other cases, they may ask you to add their code at the end of the <body> section. In that case, you paste your code just before the </body> line.


2. How do I add Google Analytics?

You shouldn't copy the code from Google into your theme, as your store can already integrate with Google Analytics in a far more advanced way. Refer to How to enable Google Analytics for more information


3. How do I add in a Facebook pixel?

Go to the Design & Assets -> Theme Editor section of your store's Toolbox, scroll down to the Store Layout section and click on the theme.liquid file to edit it.

You should just be able to copy the code provided into the relevant part of your theme.liquid file. Facebook ask that you copy their code into the <head> section. In that case, you paste your code just before the </head> line.