Shopify Theming

Work from a duplicate theme

Before you customize a theme, it's a good idea to make a backup copy so that you can discard your changes and start again if you need to. If you already have 20 themes added to your Shopify admin, then you'll need to delete one before you can duplicate another.

Steps:

1. From your Shopify admin, go to Online Store > Themes.
2. For the theme that you want to duplicate, click Actions > Duplicate.

Use Theme Kit

Theme Kit makes it possible for us to have maintain version control far better than if we just leave 20 different themes within the admin. Whenever changing a theme using theme kit push to a feature branch in git. Then once the change goes live merge your changes into master. A nice bonus is that our IDE's are much faster than the one built into shopify.

?> Install instructions can be found here.

Killswitch

!> All new features, or snippets need to have a killswitch built into the Customize Theme admin.

Adding options to the Customize Theme admin is super easy. Configuring theme settings is even easier. Guide for all the settings here.

Essentially, we want any text, numbers, or color options to be customizable by our partners. To do this we need a couple pieces of code in place. settings_schema.json and self contained snippet including our code changes.

{
    "name": "Promotional Bar",
    "settings": [
          {
            "type": "header",
            "content": "Promo Bar Options"
          },
          {
            "type": "checkbox",
            "id": "promo_active",
            "label": "Promo Bar Active",
            "default": true
          },
          {
            "type": "color",
            "id": "promo_background_color",
            "label": "Promo Background color",
            "default": "#8aa3a7"
          }
    ]
}

Next we need a conditional located where you want our code to live. This conditional is just looking at the admin, checking if promo_active is returning true or false and displaying the promo-bar if it returns true

{% if settings.promo_active %}
    {% include 'promo-bar' %}
{% endif %}

Nested snippets can be an issue

Too many nested snippets can be an issue. Keep nested snippets to a two-level maximum — anything beyond that gets messy. Simple as that.

Assets Directory

Make use of your theme’s assets directory by creating new JavaScript files for each script you have running on your Shopify Theme. This not only allows you to pull assets from the directory throughout the theme, but will allow browsers to cache the JavaScript instead of reloading it every time someone visits a page on your client’s ecommerce site.

Another JavaScript best practice, is to write JavaScript defensively — creating Module JavaScript items that don’t depend on each other, but that can work cohesively with each other. This will also help with performance, and mitigate the chances of your code breaking with the implementation of a third-party product.

Remove stuff

If your theme has slow-loading components, or components that require a lot of bandwidth, remove them. This will not only improve the performance of your theme, but also the user experience on the client’s website.

Know when to use JavaScript instead of Liquid

It’s important to remember that Liquid isn’t meant to be a programming language. Its purpose is to output the data you’re working with and create markup. Although it’s generally preferred to do logic in Liquid, it’s sometimes clearer to hand the data off to JavaScript.

<script>
  Shopify.currentProduct = {{ product | json }};
  if (Shopify.currentProduct) {
    console.log(Shopify.currentProduct.variants);
  }
</script>

To give an example, we recently had a client who wanted to show customers whether they had already purchased a particular product upon viewing. In order to do this well, we chose to AJAX customer orders with a custom account template (more on this later) and use UnderscoreJS to check if the product had already been purchased.

Yes, this could be done using Liquid, but nowhere near as elegant. Remember, great code is always manageable. Don’t leave yourself a mess of curly braces that’s 400+ lines long. Fire up the trusty JavaScript machine and put it to work.

Build your own JSON endpoints for dynamic data

When you really want to do something special, making use of template views can make all the difference. Each Liquid template can be suffixed with a unique view, and used for a specific purpose.

For example, if you have a set of unique product pages, you could create a template like product.unique.liquid and select that template within the Shopify admin. Alternatively, you can pass in the name of the template in the “view” parameter in the URL to tell Shopify to use a specific template. This is really powerful because it means you can create whatever data you want, and request it from any page within the store.

Let’s use autocomplete searching as a common example. You could create templates/search.json.liquid as a template, and build the JSON response within the file. It might be as simple as:

{% layout none %}
{% paginate search.results by 50 %}
  {
    "results": {{ search.results | json }} 
  }
{% endpaginate  %}

Then in JavaScript:

$.getJSON('/search?q=shirt&view=json', function(response) {
  console.log(response)
});

Notice here that we’re passing search the “view” parameter, which is set to our template suffix named “JSON.” Of course, this is a simple example, but this opens the door to a lot of opportunity for building very dynamic features.

I've used this method alongside Relatable to use JavaScript to power custom logic within shops. Remember, this applies to any template, which means you could do the same thing for customer data.