How do I hide a collection from the collection list?

2Hops · ‎08-05-2024

I have a best sellers collection so I can display best sellers on my homepage. I want to hide it from the collections list page.

https://2hopsindustries.com/collections

vinh0225 · ‎08-05-2024

Hi @2Hops

Please follow these steps:
1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme that you want to edit, click the ... button to open the actions menu, and then click Edit code.
3. Open the file layout/theme.liquid and add the following snippet before </body>.

<script>
  document.addEventListener('DOMContentLoaded', function() {
    var collectionListItems = document.querySelectorAll('.collection-list__item');
    collectionListItems.forEach(function(item) {
      var link = item.querySelector('a[href="/collections/best-sellers"]');
      if (link) {
        item.style.display = 'none';
      }
    });
  });
</script>

4. Save file and check. That's it.

Was my response useful? 👍 Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

2Hops · ‎08-05-2024

The code works very well. However when landing on the collection page the 'best sellers' very briefly appear, it is a small thing but is there a way to fix that?

vinh0225 · ‎08-05-2024

@2Hops Yes, the above solution will execute after loading the page.

To remove it completely, I need to update Liquid code. Would you make me access your codebase?

Was my response useful?  Click Like to let me know!
Was your query resolved? ✓ Mark it as a Resolved Solution
If you need custom Shopify changes, ⚒️you can hire me.
Contact me at ✉️ jalicorich@gmail.com.

JohnGray33 · ‎08-05-2024

Hi @2Hops

You can do that by adding this code to theme.liquid file, after <head> in Online Store > Themes > Edit code

<style>
.collection-list__item:has(a[href="/collections/best-sellers"]) { display: none; }
</style>

EBOOST · ‎08-05-2024

Hi @2Hops ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code

2. Sections/main-list-collections.liquid
3. Replace content of this file by code below:

{{ 'component-card.css' | asset_url | stylesheet_tag }}
{{ 'section-collection-list.css' | asset_url | stylesheet_tag }}

<div class="page-width">
  <h1 class="title title--primary inline-richtext{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ section.settings.title }}
  </h1>
  {%- liquid
    case section.settings.sort
      when 'products_high', 'products_low'
        assign collections = collections | sort: 'all_products_count'
      when 'date', 'date_reversed'
        assign collections = collections | sort: 'published_at'
    endcase

    if section.settings.sort == 'products_high' or section.settings.sort == 'date_reversed' or section.settings.sort == 'alphabetical_reversed'
      assign collections = collections | reverse
    endif

    assign moduloResult = 28 | modulo: section.settings.columns_desktop
    assign paginate_by = 30
    if moduloResult == 0
      assign paginate_by = 28
    endif
  -%}
  {%- paginate collections by paginate_by -%}
    <ul
      class="collection-list grid grid--{{ section.settings.columns_desktop }}-col-desktop grid--{{ section.settings.columns_mobile }}-col-tablet-down"
      role="list"
    >
      {%- for collection in collections -%}
        {%  unless collection.handle ==  'best-sellers' %}
        <li
          class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
          {% if settings.animations_reveal_on_scroll %}
            data-cascade
            style="--animation-order: {{ forloop.index }};"
          {% endif %}
        >
          {% render 'card-collection',
            card_collection: collection,
            media_aspect_ratio: section.settings.image_ratio,
            columns: 3
          %}
        </li>
          {%  endunless %}
      {%- endfor -%}
    </ul>
    {% render 'pagination', paginate: paginate %}
  {%- endpaginate -%}
</div>
{% schema %}
{
  "name": "t:sections.main-list-collections.name",
  "class": "section",
  "settings": [
    {
      "type": "inline_richtext",
      "id": "title",
      "label": "t:sections.main-list-collections.settings.title.label",
      "default": "t:sections.main-list-collections.settings.title.default"
    },
    {
      "type": "select",
      "id": "sort",
      "options": [
        {
          "value": "alphabetical",
          "label": "t:sections.main-list-collections.settings.sort.options__1.label"
        },
        {
          "value": "alphabetical_reversed",
          "label": "t:sections.main-list-collections.settings.sort.options__2.label"
        },
        {
          "value": "date_reversed",
          "label": "t:sections.main-list-collections.settings.sort.options__3.label"
        },
        {
          "value": "date",
          "label": "t:sections.main-list-collections.settings.sort.options__4.label"
        },
        {
          "value": "products_high",
          "label": "t:sections.main-list-collections.settings.sort.options__5.label"
        },
        {
          "value": "products_low",
          "label": "t:sections.main-list-collections.settings.sort.options__6.label"
        }
      ],
      "default": "alphabetical",
      "label": "t:sections.main-list-collections.settings.sort.label"
    },
    {
      "type": "select",
      "id": "image_ratio",
      "options": [
        {
          "value": "adapt",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__1.label"
        },
        {
          "value": "portrait",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__2.label"
        },
        {
          "value": "square",
          "label": "t:sections.main-list-collections.settings.image_ratio.options__3.label"
        }
      ],
      "default": "adapt",
      "label": "t:sections.main-list-collections.settings.image_ratio.label",
      "info": "t:sections.main-list-collections.settings.image_ratio.info"
    },
    {
      "type": "range",
      "id": "columns_desktop",
      "min": 1,
      "max": 6,
      "step": 1,
      "default": 3,
      "label": "t:sections.main-list-collections.settings.columns_desktop.label"
    },
    {
      "type": "header",
      "content": "t:sections.main-list-collections.settings.header_mobile.content"
    },
    {
      "type": "select",
      "id": "columns_mobile",
      "options": [
        {
          "value": "1",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__1.label"
        },
        {
          "value": "2",
          "label": "t:sections.main-list-collections.settings.columns_mobile.options__2.label"
        }
      ],
      "default": "2",
      "label": "t:sections.main-list-collections.settings.columns_mobile.label"
    }
  ]
}
{% endschema %}

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤Coffee tips

artgazette · ‎08-14-2024

I came across this thread as trying to do the exact same thing, but with MULTIPLE collections being hidden, and your post @EBOOST got me on the right track, and then with some ChatGPT magic it helped me create the multiple logic as follows:

--------- CHATGPT AMEND -------

To hide multiple collections, you can use the contains filter in Liquid to check if the collection.handle exists in an array of collection handles. Here’s how you can update your code:

{%- assign hidden_collections = "best-sellers,summer-sale,another-collection-handle" | split: "," -%}

{%- for collection in collections -%}
  {%- unless hidden_collections contains collection.handle -%}
    <li
      class="collection-list__item grid__item{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}"
      {% if settings.animations_reveal_on_scroll %}
        data-cascade
        style="--animation-order: {{ forloop.index }};"
      {% endif %}
    >
      {% render 'card-collection',
        card_collection: collection,
        media_aspect_ratio: section.settings.image_ratio,
        columns: 3
      %}
    </li>
  {%- endunless -%}
{%- endfor -%}

Explanation:

Step 1:
- Create an array hidden_collections using assign and split.
- This array contains the handles of all the collections you want to hide.
Step 2:
- Use unless hidden_collections contains collection.handle to check if the current collection's handle is in the hidden_collections array.
- If it is, the unless block will skip rendering that collection.

This code will hide any collections listed in the hidden_collections array from appearing on the Collections Listing page.

First time Shopify store owner, looking to learn. Semi comfortable with CSS.

How do I hide a collection from the collection list?

How do I hide a collection from the collection list?

Explanation:

Community Blog Articles