Greg Martin, Arya Creative, July 18, 2017 | 4 min read

The powerful Shopify theme editor and what you can do with it

For those unfamiliar with Shopify, it is the fastest growing e-commerce platform out there today.  Shopify provides hosting, SSL certificate, admin panel, basic reporting, and payment gateway starting at $29/mo. 

As a front-end developer, my favorite feature of the Shopify platform is the theme code editor.  It offers so much more than similar editors on other platforms, such as WordPress with WooCommerce.

Before we start, a few quick notes:

What is Liquid?: Liquid is an open-source template language created by Shopify and written in Ruby. It is the backbone of Shopify themes and is used to load dynamic content on storefronts. -shopify.com

For more information, check out https://github.com/Shopify/liquid and https://help.shopify.com/themes/liquid

What is Timber?: Shopify built its own framework that is open-source and is used by most Shopify theme developers.  It’s basically their version of the Bootstrap grid system, but tailored to Shopify sites a little better.  Before you go nuts editing any themes, I’d recommend that you get familiar with the framework in the likely case that your theme is using it:

For more information, check out https://github.com/Shopify/Timber

Once in the theme editor, these are the categories of files that we can access and edit:

  1. Layouts:
    1. These files include your theme.liquid file, which is the “index.html” of a Shopify site.  You’ll include everything you need in your <head> tags, and inject the other sections of your website.
  2. Templates:
    1. Templates includes all of the styles that you can apply to product pages, blog posts, your cart, customer login pages, etc.  If you have a lot of products on your store, but need some of them to be in “Style A” and others to be “Style B”, you can just add a 2nd product template and assign it to the products you need.
  3. Sections:
    1. This is the newest feature of the Shopify theme framework.   Sections are blocks of code that allow you to add features to the home page of your theme.  You can then use the theme customizer panel to move them up or down, and change settings on each theme section.  Each section Liquid file allows you to add JSON directly to it, so you can add configurable options directly to the theme customizer panel.
    2. Some examples of sections are:
      1. An image slider
      2. A featured product or collection
      3. Images with text in a 2-column format
      4. Basic HTML
  4. Snippets:
    1. Snippets allow you to reuse chunks of code throughout your site.  This is particularly handy when you are adding your own custom blocks of code to a theme.  Instead of editing the theme Liquid files directly, you can just add your code as snippets, and then call them in any .liquid file with one line of code:
      1. {% include ‘my-snippet’ %} will inject the code that is saved in ‘my-snippet.liquid’ directly into the file that you want it included on.
  5. Assets:
    1. Here live our images, fonts, scripts, and stylesheets.  The best part of this section?  SASS!  Shopify allows you to write SASS directly into .scss stylesheets.   Shopify compiles it when you save and you never even have to look at the .css file.  Most Shopify themes (all the good ones, anyway) already have .scss files waiting for you.
    2. The only drawback here is that @import is not yet supported.
  6. Configs:
    1. The configs section contains 2 .json files. 
      1. settings_schema.json
        1. This file contains the values that will be available to the user in the theme customizer.  You can easily edit this schema to add more options as needed!  This is very helpful if you have a client who wants something that is variable added to their theme.  Instead of hard coding it, you can give them a place to change the value of that content in the future, without having to dive into the code editor.
      2. settings_data.json
        1. The data file will contain all the live (and preset) values for configurable options within the theme.  This includes anything that is in the theme customizer panel, and sometimes more.  Common options are theme colors, site width, logo URL, font choices, etc. Stuff that you’ll see with any theme in WordPress or a similar platform.
      3. Note: If you can’t find a configurable option in the settings_schema.json file, it is probably in one of the .liquid files in the “Sections” area.  Sections are a new feature that allows .json to be added directly to the bottom of those files, instead of in one central location.
  7. Locales:
    1. The locales section will hold text strings of phrases used throughout the website.  You can set any piece of text as a variable and place it in the locale .json file, in any language, allowing your clients to easily edit language throughout the site.
    2. For example: “Add to Cart” can be edited to say “Buy Now” throughout the entire site, if that string is available in the locales .json file.
    3. To see what strings are available for editing click on “Online Store > Themes > … > Edit Languate” from your Shopify Admin panel.

You can build as many stores as you want for free, just head to https://www.shopify.com/partners to get access to a developer account.

 

-Greg Martin
greg@aryacreativeco.com

Founding Partner at Arya Creative