Supply Theme - How to Hide Certain Tags

New Member
2 0 0

Hello! 

I'm using the supply theme and would like to stop certain tags from displaying on my navigation. There are several older topics that describe how to hide individual tags, but they all seem to be outdated. 

Is there any way to accomplish this?

Here's the collection page code if that helps.

{% paginate collection.products by 20 %}

{% include 'breadcrumb' %}

{% assign has_sidebar = false %}
{% if collection.all_tags.size > 0 %}
  {% assign has_sidebar = true %}

{% endif %}

 

<div class="grid grid-border">

  {% if has_sidebar %}
  <aside class="sidebar grid-item large--one-fifth collection-filters" id="collectionFilters">
    {% include 'collection-sidebar' %}
  </aside>
  {% endif %}

  <div class="grid-item{% if has_sidebar %} large--four-fifths grid-border--left{% endif %}">

    {% comment %}
      Different markup if description is set
    {% endcomment %}
    {% if collection.description != blank %}
      <header class="section-header">
        <h1 class="section-header--title">{{ collection.title }}</h1>
        <div class="rte rte--header">
          {{ collection.description }}
        </div>
      </header>
      <hr{% if has_sidebar %} class="hr--offset-left"{% endif %}>
      <div class="section-header">
        <div class="section-header--right">
          {% include 'collection-sorting' %}
          {% include 'collection-views' %}
          {% include 'toggle-filters' %}
        </div>
      </div>
    {% else %}
    <header class="section-header">
      <h1 class="section-header--title section-header--left">{{ collection.title }}</h1>
      <div class="section-header--right">
        {% include 'collection-sorting' %}
        {% include 'collection-views' %}
        {% include 'toggle-filters' %}
      </div>
    </header>
    {% endif %}

    <div class="grid-uniform">

      {% for product in collection.products %}
        
        {% if has_sidebar %}
          {% assign grid_item_width = 'large--one-quarter medium--one-third small--one-half' %}
        {% else %}
          {% assign grid_item_width = 'large--one-fifth medium--one-third small--one-half' %}
        {% endif %}
        {% include 'product-grid-item' %}

      {% else %}

        <div class="grid-item">
          <p>{{ 'collections.general.no_matches' | t }}</p>
        </div>

      {% endfor %}

    </div>

  </div>

  {% if paginate.pages > 1 %}
  <div class="grid-item pagination-border-top">
    <div class="grid">
      <div class="grid-item{% if has_sidebar %} large--four-fifths push--large--one-fifth{% endif %}">
          <div class="text-center">
            {% include 'pagination-custom' %}
          </div>
      </div>
    </div>
  </div>
  {% endif %}

</div>

{% endpaginate %}

Thank you in advance!

0 Likes
Shopify Staff
Shopify Staff
45 0 10

Hi Babette,

To hide certain tags, start by going to Online Store > Themes > "..." button > Edit HTML/CSS > Open Snippets / collection-sidebar.liquid.

Scroll down near the bottom of the template until you see this block of code:

      {% if is_advanced_tag == false %}
          {% if current_tags contains tag %}
            <li class="active-filter">{{ tag }}</li>
          {% else %}
            <li>{{ tag | link_to_tag: tag }}</li>
          {% endif %}
        {% endif %}
      {% endfor %}

What we're going to do is add a class to each list item based on the name of the tag. From there, you can hide those list-items with CSS using their new classes. Here is the solution:

Add class="{{ tag | handleize }}" to the <li> tag:

      {% if is_advanced_tag == false %}
          {% if current_tags contains tag %}
            <li class="active-filter">{{ tag }}</li>
          {% else %}
            <li class="{{ tag | handleize }}">{{ tag | link_to_tag: tag }}</li>   			
          {% endif %}
        {% endif %}
      {% endfor %}

Keep in mind if your tag name is "My Awesome Tag", the class name will be "my-awesome-tag".

Next, add some CSS to hide the tags that you don't want displayed:

<style>
  .my-awesome-tag-one, 
  .my-awesome-tag-two,
  .my-awesome-tag-three{
    display:none;
  }
</style>

You can place the CSS code at the top of the template file if you like.

And that should do it. If you're ever not sure about the class name for a tag, right-click on the frontend collection page, and click "View Source Code". Scroll down until you see the tag list and all of your classes will appear there inside of the <li> tags.

All the best!
Justin.

0 Likes
New Member
2 0 0

Thank you so much, Justin!

Very easy to add and worked like a charm. Thanks again!

0 Likes
Tourist
5 0 0

Hi @Justin_W1  How would i do this on Venture?


0 Likes
Shopify Partner
107 0 11

How would we do this on Brooklyn?  The example 'advanced' code doesn't exist on that template.

Shopify expert, software developer and designer.
1 Like
New Member
5 0 0

Anyone from Shopify going to answer the 2 outstanding questions above? I need to know how to do the same thing on Canopy. Maybe instead of spending time sending emails acting like you care, try spending time answering questions right in front of your faces....

0 Likes