Shopify Shop by Variant Collection Page

Posy Intimates approached me in 2025 to help them with a bespoke style of collection page.

What might look like a regular collection page on the surface is instead a grid of variants.

But this solution was more than just expanding a list of products into individual variants. There was also the requirement that the list could be filtered.

Given that Storefront Filtering on Shopify applies only at the product level, I needed to come up with a solution that leverages Storefront Filtering where possible but still allowed the customer to filter based on colour as well.

After a quick call, I was able to establish the four parameters that - when combined - determine the full list of variants on the store.

These were style, cut, colour and size.

While size and colour were implemented as variant option parameters, style and cut were baked in at the product-level.

In other words, each product in the store represented a combination of style and cut whilst each variant represented a combination of size and colour.

In the example above, the first line (after the image) is the product title. The second is the colour (second variant option parameter).

"Active" and "Everyday" are examples of Styles and "Original", "Bikini" and "Supportive" are examples of Cuts

As you might imagine, the client didn't want a seperate variant shown for each size, only for each colour.

This left us with three parameters for filtering.

Given that we only had 8 products to work with, we agreed to simply tag each product with attribute tags that identified what style and cut the product was.

The benefit of using tags is the native filtering at the Liquid-level via the url

Appending 'style-active' to the end of the url meant being able to take advantage of native Storefront Filtering.

But what about the colours?

Using the variant option filters in Storefront Filtering wasn't an option given that that solution is still at the product level meaning that it would still show the other variants in any product that contained the variant being filtered on.

That being said, it was still easy enough to implement at the Javascript level simply by labelling each variant with its colour and setting up conditional CSS to hide and show based on the user's selection.

Combining the two tag filters (for Style and Cut) and the colour filter, the customer can now easily find the exact variant they are looking for.