Only allow specific Tags to show on Collections Pages (Brooklyn Theme)

Solved
Shawn19
Excursionist
14 1 4

I have been scouring the interwebs looking for an answer to this. I have come up with a few posts from others but none were using the Brooklyn theme and I was unable to figure it out. The following is from another post that looks like a good way to make it work but I cannot seem to adapt it to Brooklyn. It appears that Brooklyn does not use the same naming structure

So in this scenario I would add some sort of prefix to my filtering tags that I can check for ('filter-Nike, filter-Adidas, filter-Reebok') and rename however I want.

Here is the standard code in the OPs theme.

{% if settings.collections_tags_enable %}
  {% include 'collection-tags' %}
{% endif %}

Supposed to replace that code with this:

{% if settings.collections_tags_enable %}
  {% include 'collection-tags' %}
{% for tag in collection.all_tags %}
  {% if tag contains 'filter-' %}
    {% assign tagName = tag | remove: 'filter-' %}
    {% if current_tags contains tag %}    
        <li class="tag--active">
          {{ tagName | link_to_tag: tag }}
        </li>
      {% else %}
        <li>
          {{ tagName | link_to_remove_tag: tag }}
        </li>
      {% endif %}   
  {% endif %}
{% endfor %}
{% endif %}

It looks like it would work if I could adapt it to Brooklyn. Can someone please help me out?

Or is there another/easier way to control what Tags show (for sorting) on the Collections pages?

Thanks,

Shawn

0 Likes
Shawn19
Excursionist
14 1 4

I don't know what it is about the Brooklyn theme but I have noticed there are a lot of posts for help with this theme with little to NO response. 

I am definitely not the first person to request help for this. Can anyone shed some light on this?

0 Likes
Shawn19
Excursionist
14 1 4

OK so I have found the area where I would make the changes and have attempted to get this to work. I am able to filter the tags correctly on the page but for some reason when I click on one of the tags it does not filter the products. It just shows ALL.

Here is the code I replaced

        {% for tag in collection.all_tags %}
          {% if current_tags contains tag %}
            <li class="tag--active">
              {{ tag | link_to_remove_tag: tag }}
            </li>
          {% else %}
            <li>
              {% comment %}
                Use link_to_add_tag if you want to allow filtering
                by multiple tags
              {% endcomment %}
              {{ tag | link_to_tag: tag }}
            </li>
          {% endif %}
        {% endfor %}

Here is the new code

        {% for tag in collection.all_tags %}    
         {% if tag contains 'show-' %}
           {% assign tagName = tag | remove: 'show-' %}
           {% if current_tags contains tag %}    
               <li class="tag--active">
                 {{ tagName | link_to_tag: tag }}
               </li>
             {% else %}
               <li>
                 {{ tagName | link_to_remove_tag: tag }}
               </li>
             {% endif %}   
         {% endif %}    
        {% endfor %}

So I added a couple tags called show-Casual and show-Summer to one of my products. I attached an image showing how it looks on my Collection page. It looks exactly how I want. Unfortunately it does not sort. 

Can someone with more coding knowledge please take a look and tell me what I am missing here?

Thanks

 

0 Likes
Shawn19
Excursionist
14 1 4

This is an accepted solution.

>>> SOLVED! <<<

After looking everywhere for a solution and reaching out for help here, I decided to try and figure this out on my own since no one seems to know a solution. The following is how I was able to make only tags I want to show on the Collections pages.

Click on 'Online Store' in your Shopify Admin section. Then on the Brooklyn theme click on 'Actions' and then 'Edit code'. Once the code editor comes up click on 'Snippets' and open 'collection-template.liquid'.

Now scroll down until you see the following code (beginning roughly around line 53, depending on what edits have been made in that file).

        {% for tag in collection.all_tags %}
          {% if current_tags contains tag %}
            <li class="tag--active">
              {{ tag | link_to_remove_tag: tag }}
            </li>
          {% else %}
            <li>
              {% comment %}
                Use link_to_add_tag if you want to allow filtering
                by multiple tags
              {% endcomment %}
              {{ tag | link_to_tag: tag }}
            </li>
          {% endif %}
        {% endfor %}

You will want to highlight this block of code and replace it with this code.

        {% for tag in collection.all_tags %}
         {% if tag contains 'show-' %}
          {% assign tagName = tag | remove: 'show-' %}
            {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
            {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}

Then save the file.

Now in order to make this work you will need to create new tags. For tags that you want to show in your Collection pages your tags will have 'show-' as the first part of your tag. Example would be 'show-Shoes' or 'show-Winter'. Any tags that do not have 'show-' as part of it will not be visible on the Collection pages. If you want to choose a different way of labeling your tags you can change 'show-' to whatever you want by replacing 'show-' in the 2nd and 3rd line of the code above.

I have tested this on both desktop and mobile devices and it works perfectly. 

Be sure you backup you file before you make this change in case you need to put it back.

Hope this helps. Good luck!

Shawn19
Excursionist
14 1 4

An added reminder. You will also need to change your conditions in your Collections to pickup the new tags if you have your Collections setup that way.

0 Likes
Karma1
New Member
1 0 0

Hey Shawn!

Thanks so much for taking the time to share your solution! It worked perfectly on my Brooklyn theme.

I did notice that in your store you were able to achieve multiple tag filtering (e.g. filter by color, season, etc). I was wondering how you were able to achieve that? Was it a plugin or did you code it yourself?

Thanks in advance! 

0 Likes
Shawn19
Excursionist
14 1 4

Hey Karma,

I am happy that this worked for you. I just posted a How-To on the dropdown boxes. You can view it here

https://ecommerce.shopify.com/c/ecommerce-design/t/how-to-multiple-dropdown-sorting-boxes-on-collect...

Let me know if there is something missing or not working. I am no programmer but I may be able to figure it out.

 

0 Likes
Tasha_Beal
New Member
7 0 0

Hey Shawn, thanks so much for providing this code! I really love the way it looks on my website! However, for some reason, all of my tags (show-Baseball Tees, for example) are appearing on some collection pages, and on other collection pages, only a few of the tags appear. In other words, I have 4 "show-" tags, and on a few collection pages, only 2 of them appear.

Any ideas what I can edit/change to make sure my collection pages include all of the tags? Not sure why they are selectively appearing on certain pages.

Thanks in advance for your help!

0 Likes
jeffmjack
New Member
2 0 0

If you want to do this without re-naming your tags, you can simply suppress certain tags from showing up in the filter list.

In collection-template.liquid, around line 79 you should see this:

          {%- for tag in collection.all_tags -%}
            {%- if current_tags contains tag -%}
              <li class="tag--active">
                {{ tag | link_to_remove_tag: tag }}
              </li>
            {%- else -%}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tag | link_to_tag: tag }}
              </li>
            {%- endif -%}
          {%- endfor -%}

 

you can add an if-statement that will suppress certain tags by replacing that section with the code below, changing out the tag names in caps for your tag names. You can keep chaining "and != "NEW_TAG" into this for as many tags as you want to suppress.

 

 {%- for tag in collection.all_tags -%}
         {%- if tag != "FIRST_TAG_TO_SUPPRESS_GOES_HERE" and tag != "SECOND_TAG" and != "THE_LAST_TAG" -%}
            {%- if current_tags contains tag -%}
              <li class="tag--active">
                {{ tag | link_to_remove_tag: tag }}
              </li>
            {%- else -%}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tag | link_to_tag: tag }}
              </li>
            {%- endif -%}
          {%- endif -%}
          {%- endfor -%}
0 Likes
Mayo
Excursionist
21 0 1

Hey @Shawn19 

I followed your steps and did tags filtering on my french wine shop, using a different tag prefix for each filters type. but I have a question : Do you know how to have an "or" logic rather than an "and" one ?

Using link_to_add_tag I am able to have multiple active tags but It works with a "and" logic. Then, as soon as an user filters with 2 or more styles, none of the product appears rather than having every products of each styles. 


Maybe seeing it as a preview will help : https://ru6wsy3jr9dvzm9h-16003519.shopifypreview.com

I also share html code here with liquid : 

{% assign haveActiveTag = false %}
{%- for tag in collection.all_tags -%}
  {% if current_tags contains tag %}{% assign haveActiveTag = true %}{% endif %}
{% endfor %}
<button class="accordion{% if haveActiveTag %} active{% endif %}" style="font-size: 16px;">Filtres</button>
 <div class="panel"{% if haveActiveTag %}style="max-height: none;"{% endif %}>    
   <div class="section group">
	<div class="col span_1_of_4">
	 <h3 class="titre_bloc">Style</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Style' -%}
              {% assign tagName = tag | remove: 'Style' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Vinification</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}

          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Vinif' -%}
              {% assign tagName = tag | remove: 'Vinif' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Terroir</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Terroir' -%}
              {% assign tagName = tag | remove: 'Terroir' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
         {% endif %}
        {% endfor %}
        </ul>
	</div>
	<div class="col span_1_of_4">
	<h3 class="titre_bloc">Appellation</h3>
        <ul class="tags tags--collection inline-list">
          {% comment %}
            Used for the catalog collection (/collections/all) and product collections (collections/{collection.handle})
          {% endcomment %}
          
          {%- for tag in collection.all_tags -%}
            {%- if tag contains 'Appell' -%}
              {% assign tagName = tag | remove: 'Appell' %}
                {% if current_tags contains tag %}
              <li class="tag--active">
                {{ tagName | link_to_remove_tag: tag }}
              </li>
             {% else %}
              <li>
                {% comment %}
                  Use link_to_add_tag if you want to allow filtering
                  by multiple tags
                {% endcomment %}
                {{ tagName | link_to_add_tag: tag }}
              </li>
            {% endif %} 
          {% endif %}
        {% endfor %}
        </ul>
	</div>


Do you know how to solve that ? I would be very grateful if you take a couple of minutes to help me on this one !
Thanks 

Florian

0 Likes