Changing filters style above item grid

Store Design
, , ,
1

I have just managed to get my collection filters to appear above my product grid instead of to the left, but i’d like the filters (price, brand, material) to list horizontally. (image below)

Any and all help appreciated, i’ve been playing around with the css and js but can’t figure it out.

filter-help
filter-help1890×1417 100 KB

2

Hey @somanyqu3stions,

Could you please share your store URL and password [if applicable] so that I can take a look and provide you solution code.
Looking forward to hearing back from you.
Thanks

3

Thank you :slight_smile:

4

Thanks for sharing the store url.

In order to do the requested changes requires to do the custom code in your theme file. Could you please share your store collab code in the p/m so that I can take a look by myself.
Thanks

5

I checked the code and I think you need a developer to do that for you. Also, you need to consider the UI for smaller screens.

6

Hi,

Hope this will help

  • Add CSS at base.css, theme.css, theme.scss.liquid, or styles.css.

CSS example

/* --- Generic horizontal filters --- */
/* 1) Make the filter wrapper a row */
.collection-filters {
  display: flex;            /* line children up in a row */
  gap: 12px;                /* space between filter groups */
  align-items: center;      /* vertically align items */
  flex-wrap: wrap;          /* let them wrap to next line on small screens */
  margin-bottom: 20px;      /* space under the filters */
}

/* 2) Make each filter group sit horizontally (title + options) */
.collection-filters .filter-group,
.collection-filters .facet,
.collection-filters .filter {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;           /* prevent stretching — helps horizontal scroll on mobile */
  padding: 6px 10px;        /* optional visual padding */
  border-radius: 8px;       /* optional rounded look */
  background: transparent;  /* change if you want a background for each group */
}

/* 3) If filter options are a list (<ul><li>), make the list horizontal */
.collection-filters ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.collection-filters li { margin: 0; }

/* 4) Mobile: allow horizontal scrolling if too many filters */
@media (max-width: 767px) {
  .collection-filters {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* smooth on iOS */
    padding-bottom: 8px;
  }
  .collection-filters .filter-group { flex: 0 0 auto; }
}

/* 5) If your theme still forces column layout, add more specificity or !important */
.collection-filters { display: flex !important; }
.collection-filters .filter-group { display: flex !important; }