Home > Shopify Development > How to modify your theme.liquid file

How to modify your theme.liquid file in Shopify

Sam Updated: June 22, 2024

Drive 20-40% of your revenue with Avada

Get Started

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?
How to modify your theme.liquid file

What is 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.

How to delete the authors name in Shopify

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

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.

Catalog

How to modify the shipping calculator HTML How to add the gift-wrapping snippet in your cart template How to modify your theme.liquid file How to insert some JavaScript to your theme Delete the author's name in your theme Insert the search box on your Jekyll site using lunr.js Liquid Variables: assign, capture, increment, increment Liquid paginate: Split into multiple pages Update the product form to support dynamic checkout buttons Select which page to show when customers log in to your online store Modify the code for your payment icons Insert the security badge code to your theme Insert Disqus to your blog Insert breadcrumb navigation to your store Generate your snippet generate the "How did you hear about us" form field Generate and include an age-check snippet Generate a back-to-the-top snippet Edit correct quantities on the cart page silently Apply a class to your templates Update item quantity fields in the cart Update the collection-template.liquid file Modify the theme code to add the shipping calculator Insert the notification form code to your theme Insert custom fields to your theme's customer registration form Add Custom Fields to Contact Form in Shopify Insert a form field to your theme code Insert a Continue shopping link to your cart page Insert a checkbox to your cart page in sectioned themes How To Create A Contact Page On Shopify: Our Step-by-Step Guide

Sam Nguyen

Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.