How to modify your theme.liquid file in Shopify

Filter is an indispensable tool for any website to improve its customer journey. One of the easiest ways to let clients filter your collection is by editing your theme code. After checking your theme, the next thing you should do is to modify your theme.liquid.file. The tutorial will show you steps to change theme on desktop and iPhone/Android.

Table of content

What are Shopify product tags?

Product tags are searchable keywords related to our products. An ecommerce store with huge inventories and a lot of variations of a product type may take advantage of using a filter system. Many Shopify themes include the option to enable a drop-down menu to filter collection based on product tags.

Now, let’s move the main parts of this tutorial to see how to modify theme.liquid.file.

How to modify your theme.liquid file on desktop

  • Step 1: Access to Shopify admin, click Online Store > Themes.
  • Step 2: Choose the layout you want to edit, then click Actions > Edit Codes.
  • Step 3: Click theme.liquid in layout directory.
  • Step 4: Find the closing body tag near the bottom of the file. Copy and paste the code below before the bottom line.

<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
    }
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>


  • Step 5: Save

How to modify your theme.liquid file on iPhone/Android (Click here)

Step 1: Open Store in Shopify App
Step 2: Click Online Store on Sales Channel
Step 3: Tap Manage Theme
Step 4: Choose the layout you want to edit, then click Actions > Edit Codes.
Step 5: Click theme.liquid in layout directory.
Step 6: Find the closing body tag near the bottom of the file. Copy and paste the code below before the bottom line.


<script>
  /* Product Tag Filters - Good for any number of filters on any type of collection pages */
  var collFilters = jQuery('.coll-filter');
  collFilters.change(function() {
    var newTags = [];
    collFilters.each(function() {
      if (jQuery(this).val()) {
        newTags.push(jQuery(this).val());
      }
    });
    if (newTags.length) {
      var query = newTags.join('+');
      window.location.href = jQuery('{{ 'tag' | link_to_tag: 'tag' }}').attr('href').replace('/' + 'tag', '/' + query);
    }
    else {
      {% if collection.handle %}
      window.location.href = '/collections/{{ collection.handle }}';
      {% elsif collection.products.first.type == collection.title %}
      window.location.href = '{{ collection.title | url_for_type }}';
      {% elsif collection.products.first.vendor == collection.title %}
      window.location.href = '{{ collection.title | url_for_vendor }}';
      {% endif %}
    }
  });
</script>


Step 7: Save

Conclusion

To sum up, using theme.file is supposed to be the easiest way to filter your collection. Your website will be more friendly with users if you equipes your webs with theme files. We hope that you will find a better solution when installing theme file liquid.