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

Store Design
, ,

Topic summary

Goal: hide the ‘Best selling’ sort option on collection pages via custom CSS (no theme code edits), starting with the Impact 4.7.1 theme.

  • Mobile (Impact): Worked by hiding the parent when a child input has value ‘best-selling’: .checkbox-container:has(> input[value=‘best-selling’]) { display: none; }.

  • Desktop (Impact): The initial :has() attempt failed due to different markup/classes. A direct selector worked: .popover-listbox__option[value=‘best-selling’] { display: none; }.

  • Studio theme request: For Studio, the provided solution targets the option element directly: .facet-filters__sort option[value=‘best-selling’] { display: none; }.

Notes:

  • Solutions rely on CSS attribute selectors and the :has() relational pseudo-class to target specific sort options. Different selectors are needed for mobile vs. desktop due to differing DOM/classes. Screenshots helped confirm class differences but were not essential to apply the fixes.

Status:

  • Impact theme: resolved (OP confirmed both mobile and desktop working).
  • Studio theme: guidance provided; user confirmation not reported. Discussion otherwise appears resolved.
Summarized with AI on December 29. AI used: gpt-5.
2

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.