How to hide filters in mobile view? Using the theme shopify spark

Store Design
, , , ,

Topic summary

A user needed to hide both the filter and sort buttons from their collection page, but only in mobile view on the Shopify Spark theme.

Solution provided:

  • Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
  • Open the CSS file in the Assets folder (base.css, style.css, or theme.css)
  • Add the following CSS at the bottom of the file:
@media only screen and (max-width: 749px) {
  .filter-bar {
    display: none;
  }
}

Outcome: The solution successfully resolved the issue. The CSS media query targets mobile devices (max-width 749px) and hides the filter bar container, which includes both filter and sort functionality.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

Trying to remove filter buttons from the collections page in mobile view only.

Page URL: https://katharos.co.in/collections/aromadiffusercombo

1 Like
2

Hi @ishaankatharos ,

I just liek to clarify, you like to remove the filter only not the sort? They have same container with the sort if we remove the filter then the sort also remove. If you like the filter only then it needs a Javascript to remove filter.

3

yes I wanna remove both but only from the mobile view

1 Like
4

Thank you for clarification. Try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
@media only screen and (max-width: 719px) {
    .filter-bar {
        display: none;
}
}

Result:

Ribe_Dagandara_0-1689505290460.png
Ribe_Dagandara_0-1689505290460.png708Ă—381 78.6 KB

I hope it help.

1 Like
5

It worked. thanks a lot bro

1 Like