How can I conceal filters in the Debut theme?

Store Design
1

Hi,

I have some filters that I’m using for the purposes of sorting my collections, but I don’t want them to appear as filters on the live shop site. How do I hide the filters ‘New’ and ‘Rings & Ring Boxes’ on my site? My shop is https://onyx-and-elm.myshopify.com/admin and the password is aulick

2 Likes
2

@shelleyd ,

for filters are you using any app ? did you check the setting ?

3

Hi @shelleyd ,

To change you follow the instruction:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css->paste below code at the bottom of the file:
.filters-toolbar__input option[value="/collections/all/new"],
.filters-toolbar__input option[value="/collections/all/rings-ring-boxes"] {
    display: none;
}

I hope it would help you.

4

No, I’m not using any apps.

5

Thanks. I’ve pasted the code as directed but the filters are still showing up in the online store.

6

Hi @shelleyd ,

I see 2 filters “New” and “Rings & Ring Boxes” have been removed already. Do you mean to remove all filters?

AvadaCommerce_0-1642416681069.png
AvadaCommerce_0-1642416681069.png1314×541 458 KB

7

Hi @shelleyd ,

for filters you have check the customizer for your collection All page.

share the screenshot for collection page customization section . there may be having an option for filters

8

No, not all the filters, just the two. I’m still seeing them:

shelleyd_0-1642417027663.png
shelleyd_0-1642417027663.png608×440 104 KB

9

Hi @shelleyd ,

Sorry, we are testing on collection all. ^^

Please try this code again:

.filters-toolbar__input option[value$=new],
.filters-toolbar__input option[value$=rings-ring-boxes] {
    display: none;
}
10

@shelleyd ,

#shopify-section-collection-template .filters-toolbar__item-wrapper option:nth-child(2), .filters-toolbar__item-wrapper option:nth-child(5) {
    display: none;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->theme.scss.liquid

11

Do I replace the last code with this one? Or add it in addition?

12

@shelleyd

You can disable the sorting feature by following these steps:

  • Head to Online store > Themes > Customize
  • Select “Collection pages” from the dropdown menu
  • De-select “Enable sorting”

20-11-07nt0-s51ku.png
20-11-07nt0-s51ku.png629×1195 61.2 KB

20-11-07nt0-s51ku (1).png
20-11-07nt0-s51ku (1).png629×1195 61.2 KB

Let me know if this helps!

13

Hi @shelleyd ,

You replace this old code:

.filters-toolbar__input option[value="/collections/all/new"],
.filters-toolbar__input option[value="/collections/all/rings-ring-boxes"] {
    display: none;
}

by below code:

.filters-toolbar__input option[value$=new],
.filters-toolbar__input option[value$=rings-ring-boxes] {
    display: none;
}
14

I added it to the code and it worked. Thanks.

1 Like
15

@AvadaCommerce

Hi,

I just realised that although the filters are working fine on the PC website, they’re still visible in the mobile version. How do I amend the code so that it applies the change to the mobile version too?

16

Hi @shelleyd ,

Sorry, css select option is not supported on IOS.

You can try this javascript snippet:

  1. Go to Online Store->Theme->Edit code
  2. Layout->/theme.liquid->Paste this code before the closing tag:

I hope it would help you.

17

That worked perfectly. Thanks.