Make filter and sort a button on mobile (Dawn)

Store Design

Topic summary

A user wants to convert the filter and sort section into a button on mobile devices for their Dawn theme store, potentially removing the product count display.

Current Issue:

  • Filter and sort elements appear as separate components on mobile
  • User seeks a consolidated button interface similar to standard mobile e-commerce patterns

Solutions Provided:
Two community members offered CSS-based solutions:

  1. First approach: Add custom CSS code to theme.liquid file (above </body> tag) to modify the mobile facets display

  2. Second approach: Similar implementation method with additional styling:

    • Hides product count on mobile (display: none for .product-count)
    • Styles the filter button with white text, centered content, and dark background
    • Applies only to screens 767px and below

Both solutions involve editing the theme’s liquid file and adding media queries to customize the mobile view without affecting desktop display.

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

Hello,

I’m trying to make the filter and sort section a button on mobile, it may be necessary to remove the element that show amount of products.

How it looks on my store:

Skärmavbild 2024-07-19 kl. 11.15.32.png
Skärmavbild 2024-07-19 kl. 11.15.32.png390×167 4.97 KB

How i want it to look like:

Skärmavbild 2024-07-19 kl. 11.14.01.png
Skärmavbild 2024-07-19 kl. 11.14.01.png388×248 32.5 KB

My store: https://r1vex.myshopify.com/

2

Hey @manbru

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1721381295201.png
Moeed_0-1721381295201.png375×666 40.2 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Hello @manbru

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px) { .product-count { display: none !important; } .mobile-facets__open { color: #fff !important; font-weight: 600; } .mobile-facets__wrapper { justify-content: center; background: #000 !important; } }

techlyser_web_0-1721338357468.png
techlyser_web_0-1721338357468.png373×333 30.7 KB

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.