Shopify theme with collection filters at the top

A Shopify theme with collection filters at the top lines filters up horizontally, right above the product grid: each filter (availability, price and so on) opens as a dropdown, and sorting sits on the right. The grid keeps its full width and filters stay in sight. In FullStack, this is the inline mode of the Filters and sort block.

Why inline filters above the grid

Inline filters sit halfway between the two other layouts. Unlike a side column, they take no width away from the grid: product cards stay large. Unlike a drawer, they stay visible: shoppers instantly see they can filter by price or availability, with no button to hunt for.

This layout suits short to mid-size catalogs with a few simple criteria. That covers many direct to consumer brands (skincare, food, accessories): a clear range, polished visuals, and two or three filters that do the job.

How inline filters work in FullStack

The filter bar is the Filters and sort block (filters-and-sort), rendered automatically by the main section of the collection page. In the theme editor, on the Collection template:

• Display mode (display_mode) set to inline. The default is sidebar, so you need to change it.
• Show filters (show_filters) and Show sorting (show_sorting): independent, so you can show sorting only, for example.
• Show on (show_on_display): desktop and mobile, desktop only or mobile only.

Each filter becomes a dropdown in the bar. The filter list is set up on the Shopify side with the Search & Discovery app: the theme shows what Shopify provides.

What inline filters work with in FullStack

• Full width grid: grid_columns from 2 to 5 on desktop, 1 or 2 on mobile, and products_per_page from 10 to 40 (24 by default). With no side column, 4 columns stay comfortable.
• Composable product card: on the Skin demo, the card is wrapped in a colored card, with badges, compare at price and an add to cart button. You build it once for the whole grid.
• Navigation section: placed above the filter bar, it adds shortcuts to your collections. See the navigation buttons section: browse by category at the top, fine filtering right below.

Examples by store type

Skincare: a short range

Just like the Skin demo store: inline mode, availability and price filters, sorting on the right, a 4 column grid. Shoppers see products first, with filters within reach.

Supplements or gourmet food: filter by need

Create a metafield filter in Search & Discovery (benefit, diet, flavor): it shows up as one more dropdown in the bar. Add a row of navigation buttons above it, pointing to your themed collections.

Accessories: sorting first

If shoppers mostly compare prices or new arrivals, keep show_sorting on and cut filters down to the essentials. The bar stays light and fits on a single line.

Best practices

• Stick to a few filters: beyond that, the bar gets crowded and a side column reads better.
• Name your filters clearly in Search & Discovery: the label is all shoppers see before opening the list.
• Take care of the manual collection order in Shopify: the first visible products are still the most seen.
• Check the mobile view in the editor before publishing.

Limits to know

For a deep catalog with many criteria (sizes, colors, materials), an inline bar fills up fast: go for side filters or a drawer instead. The block only exists on the Collection template, with one layout per template. The filters themselves depend on your Shopify setup, not on the theme. Licensing details are on the pricing page.

FAQ

How do I show filters above products in FullStack?

In the theme editor, open the Collection template, select the Filters and sort block in the main section and set the display mode to Inline.

How is this different from side filters?

The sidebar takes 25% of the width at all times and suits deep catalogs. The inline bar leaves the full width to products and suits shorter catalogs.

Can I add custom filters?

Yes, through Shopify’s Search & Discovery app, for example based on product metafields. They then show up in the bar.