Remove "best selling option" from my sort by on collection page

[shopmentor]

Hey guys, I want to remove the option "best selling" from my sort by on collection page. I use the Impact theme 4.7.1 but I can't figure out which custom css I need to use to hide this option.

I don't want to change the theme code, I want to be able to hide this option via custom css in the theme customizer.

Thanks for your help! 

[ThePrimeWeb]

Hey @shopmentor ,

You can use CSS code to hide it

.checkbox-container:has(> input[value="best-selling"]) {
    display: none;
}

Basically, hide the parent if the child has a certain value.

[shopmentor]

Thank you very much. That worked perfect for me! I noticed that the best selling option is only hidden on mobile devices now. The desktop version has a different class as you can see in the screenshot.

I tried this code, but it looks I did something wrong. Can you help me to identify the issue?

.popover-listbox__option group:has(> input[value="best-selling"]) {
  display: none;
}

[ThePrimeWeb · Accepted solution]

Hey @shopmentor,

Please try this. 

.popover-listbox__option[value="best-selling"] {
  display: none;
}

[shopmentor]

Thank you @ThePrimeWeb! That worked perfect for me. Let me know if there is anything I can help you with in the future!

[watzupmark]

Hi @ThePrimeWeb - I have a very similar question I am battling with on the STUDIO theme: https://themes.shopify.com/themes/studio/styles/default/preview. The classes are slightly different and what would I use on this theme to hide "Best selling"? I have tried many variations of this and nothing works...

.facet-filters__sort[value="Best-selling"] {
  display: none;
}

Can you perhaps help me on my theme?

[ThePrimeWeb]

@watzupmark,

.facet-filters__sort option[value="best-selling"] {
  display: none;
}