[How-to] Multiple Dropdown Sorting Boxes on Collection Pages (Brooklyn)

Excursionist
14 1 2

I am posting this to help anyone with the Brooklyn theme that wants to add sorting dropdown boxes to their Collections pages. I am no programmer. I have been tinkering with websites/programming for over 25 year or so. I had to piece this together myself from bits I found online. It works perfect for my store. Please use at your own risk. BE SURE to backup your theme before applying this code.

Here is an example of the dropdowns on my Collection pages.

Here is how I did it.

Go to Online Store>Themes and click Actions button, then Edit Code. Find Snippits and open collection-template.liquid.

  • Scroll down and find </header>. 
  • Just above the </header> paste the following code.

<!-- Multiple Dropdown Sorting Boxes - Collections START -->   
      <div class="clearfix filter">
      <p>Filters</p>
      <div class="four-columns">
        <p>Style:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.tags %}
            {% if tag contains 'style-' %}
             {% assign tagName = tag | remove: 'style-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="four-columns">
        <p>Color/Pattern:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.tags %}
            {% if tag contains 'col-' %}
             {% assign tagName = tag | remove: 'col-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>
      <div class="four-columns">
        <p>Season:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.tags %}
            {% if tag contains 'sea-' %}
             {% assign tagName = tag | remove: 'sea-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>      
      <div class="four-columns">
        <p>Length:</p>
        <select class="coll-filter">
          <option value="">All</option>
          {% for tag in collection.tags %}
            {% if tag contains 'len-' %}
             {% assign tagName = tag | remove: 'len-' %}         
              {% if current_tags contains tag %}
              <option value="{{ tag | handle }}" selected>{{ tagName }}</option>
              {% else %}
              <option value="{{ tag | handle }}">{{ tagName }}</option>
              {% endif %}                     
            {% endif %}
          {% endfor %}
        </select>
      </div>      
    </div> 
<!-- Multiple Dropdown Sorting Boxes - Collections END -->

  • Click Save

Now go to Assets and open theme.scss.liquid.

  • At the very bottom of the file add this code

// Multiple Dropdown Sorting Boxes - CSS START //  
  .four-columns {
    display: inline-block;
    margin: 0px 25px 0px 25px;
  }
// Multiple Dropdown Sorting Boxes - CSS END //  

  • Click Save

That is it for the code.

In order for new products to show in sorting dropdown boxes you need to be sure to assign the correct tags to the products.

Style Dropdown Box

  • To show in the Style dropdown sorting box you need to assign tags with 'style-' in front (ie. style-casual).

Color/Pattern Dropdown Box

  • To show in the Color/Pattern dropdown sorting box you need to assign tags with 'col-' in front (ie. col-red).

Season Dropdown Box

  • To show in the Season dropdown sorting box you need to assign tags with 'sea-' in front (ie. sea-winter).

Length Dropdown Box

  • To show in the Length dropdown sorting box you need to assign tags with 'len-' in front (ie. len-maxi).

NOTE: You can make these dropdown boxes anything you like. You will just need to change the code above accordingly.  

I will try and explain the best I can on how to make this change. Let us change the Style box to Brand. In the code above you will see by the formatting that there are 4 sections that start with <div class="four-columns"> and then end with </div>. Each of these sections are a Dropdown Box. In that first section you want to find the word Style and change it to Brand. Then find the two references to 'style-' and change them to 'brand-'. Then save the file.

Now all you have to do is add a tag to your products that you want to show in the Brand dropdown box with a 'brand-' in front (ie. brand-Nike, brand-Adidas, etc)

If you only need 3 boxes then delete out one of the sections that start with <div class="four-columns"> and then end with </div>. If you need more sorting boxes than add another section in and change it accordingly. You may need to make some changes to the columns. Info on how the columns work can be found here. I set mine using the four-columns format. Deleting or adding more columns may change this.

https://outofthesandbox.com/blogs/shopify-theme-blog/77838981-a-column-about-columns-pro-tips-for-ma...

Hoping I did not forget something. Good luck!

One last thing, If you also want to be able to only allow specific tags to show in your Collections you can see how by going here

https://ecommerce.shopify.com/c/ecommerce-design/t/solved-only-allow-specific-tags-to-show-on-collec...

1 Like
Highlighted
New Member
2 0 2

Hi,

I added the code into my website, but whenever I make a filter selection it does not filter down my products. Is there a step that I am missing?

0 Likes
New Member
1 0 0

Likewise, I'm also not able to "Sort". It's working fine as just a selection box, but it doesn't actually do anything. Any hints on how to actually rig this up to get it working? I must say I'm not the most familiar with JS, Liquid, or HTML.

EDIT: Figured it out. Had to follow the beginnings of this guide: https://help.shopify.com/en/themes/customization/collections/filter-collections-with-product-tags

 

by adding some script to the theme.liquid file. Cheers!

0 Likes
New Member
1 0 0

Filtering is not working. I am using venture theme, boxes are showing, but no actual filtering is happening.

I added the script also same as 

Any ideas? 

 

0 Likes
Excursionist
15 1 1

I am using this filtering setup with some additional code I have added to help the functionality. 

 

Have you had issues with how many tags you are using? My filters have been working up until today and now anything new added isn't working?

0 Likes