Remove Filters on Mobile for Foodie Theme

Store Design

Topic summary

Main issue: Remove collection filters on mobile in the Shopify Foodie theme to simplify navigation while the store has few products.

What changed: A custom CSS rule was added to the theme’s stylesheet (Online Store > Theme > Edit code > Assets > stylesheet.scss.liquid) to hide the mobile filters container (.collection__page–sm-filters …). The rule was placed inside an existing @media query if present. (@media is a CSS condition that applies styles only at certain screen sizes.)

Outcome: The shop owner confirmed the CSS solution worked as intended.

Status: Resolved; no further action requested.

Notes: The fix relies on CSS-only changes; no template or JavaScript edits were needed.

Summarized with AI on January 1. AI used: gpt-5.
1

Hi All,

After a bit too long in the land of google, I cannot figure out how to remove filters on my mobile view in shopify theme Foodie.

I just don’t have enough products yet and this creates a confusing consumer experience.

Link to site: eloiandstella.com

Thanks in advance for the help!

2

@nbeloiandstella ,

@media only screen and (min-width: 768px) {
.collection__page--sm-filters.span-12.lg-hide {
    display: none;
}
}

Add this CSS

Online Store->Theme->Edit code->Assets->stylesheet.scss.liquid

Note : If you are having already this media query then add in it.

3

@oscprofessional Worked perfectly!! Thank you!

4

Bush’s Chicken offers a variety of fried chicken options, including chicken tenders, bone-in pieces (such as breast, thigh, leg, or wing), and chicken sandwiches. The chicken is typically seasoned and fried to crispy perfection, making it a favorite among customers.