Top

Liquid Code Install Bootcamp

Liquid is a template language invented by Shopify in 2006.  Since then, it has been adopted by several companies and open-source projects.  The code syntax is quite simple, it can hold large amounts of data, and is the magic in making things appear (or not appear) on your store pages.

  1. From "Shopify Admin", select Online Store.

    select online store 

  2. Duplicate your theme.

    Note: Before you start it is recommended that you duplicate your theme in case something goes wrong with the install and you need to revert back to a theme before the attempted install.

  3. Select Actions.

    Actions

  4. Select Edit code.

    Note: Your Shopify plan will need to be Basic, or higher to have a theme editor.

    Edit code

Here is where all the liquid edits are done.

Each Shopify theme is unique but has the same structure.  Every theme has Layout, Templates, Snippets, and Assets.  You may also see Sections, Config, and Locales. These are theme settings and should not be modified unless you know what you're doing.

Shopify file structure

Select the folders to open, close, and show the liquid files within them. The code install for many of our apps will mostly make changes to files in the "Templates" folder and commonly applies to product.liquid, collection.liquid and search.liquid.

Depending on the theme, the code that needs to be changed may be included in a file within the "Snippets" or "Sections" folders.

You may come across a line, such as: {% include 'product-form' %}, {% include 'product-loop' %} or similar.  The key here is anything that says include, usually refers to a "Snippet" or a "Section".

For Example, the {% include 'article-template' %} tells us that the code to modify can be found in the "Snippets" or "Sections" folder, and the file name is article-template.liquid.

file naming structure

As a result of an article published in the Atlantic: Crazy: 90 Percent of People Don't Know How to Use CTRL+F; we've put together a list of common, handy shortcuts and tricks that every computer user should know. 

Before we get started, let's tackle some basics. CTRL is an abbreviation for Control, and it's the main key on PC keyboards that are used for shortcuts. If you have a Mac, you also have a Control key, but your primary keyboard shortcut key is Command. Like Alt/Option and Shift, these are modifier keys. When you press them, nothing obvious happens. When you press them along with another letter or number, however, you can make your computer do things faster. 

These basic shortcuts should make things easier to find, and the liquid code easier to add. 

Shortcut  PC  Mac 
Find Ctrl-F  Control-F 
Copy  Ctrl-C  Command-C 
Paste  Ctrl-V  Control-V 

Shopify also has Keyboard Shortcuts that can be used within the Shopify Admin.