Hide a Collection from the Catalog

How to hide a collection from the catalog using custom code

Updated over a week ago

Hide collections from the catalog by adding custom code. Please note, a hidden collection will still display when doing a search.

NOTE: We highly recommend making a backup of your theme before making any changes to your site. Backing it up will help you restore previous settings.

  • Identify the collection you want to hide on the catalog page.

  • Use Inspect Element, hover over the collection, and select the entire div. swiper-wrapper

  • Click the dropdown arrow next to div. swiper-wrapper and select a div you want to hide

  • Right-click, select Copy > Copy Selector

  • Navigate to Customization > Advanced > Code Editor.

  • Click theme.liquid

  • Paste copied code.

We recommend adding the copied code above the closing Style tag. You then need to add { Display: None;} after the copied code.

Example: #page > div.page > div.swiper-wrapper > div.swiper-slide.swiper-slide-active {display: none;}

The collection is now hidden from the catalog page.

Did this answer your question?