Show Specific Product Variants on Collection Page with Custom Order

Online Store and Theme Development
1

Hi,

I’m trying to display multiple product variants on a collection page, and I’d like them to be individually re-orderable.

Currently, I’m testing something like this:

{% for product in collection.products %}
  {% for variant in product.variants %}
  {% endfor %}
{% endfor %}

However, this approach doesn’t let me control the order of the variants or choose which variants from each product should be shown.

Is there a way to do this?

Thanks

2

Hey @AWoodcock,

while there are a few workarounds to achieve this I would highly urge you to try an approach that uses one product per item you want to show. (If your merchant uses Shopify Plus you could use combined lisitngs to then re-connect those products.)

Nonetheless, here are some approaches you could evaluate to handle this within liquid.

First things first: Pagination will be messy, all of these should only be considered for small collections.

#1 Product variant Metafield attatched to your collection

Instead of using collection.products to iterate over, you could create a metafield of the type list.variant_reference and use that. You are able to reorder those within the metafield.

{% for variant in collection.metafields.custom.my_variants.value %}
{% endfor %}

Please have in mind: there is a 128 item limit on list metafields. Also filters won’t work.

#2 Product variant metafield on the parent product

Similar to #1 but instead you are able to reorder the variants on the product level.

{% for product in collection.products %}
  {% for variant in product.metafields.custom.my_variants.value %}
  {% endfor %}
{% endfor %}

This will support product-level filters. You need to fill those metafields though. (Or implement a fallback to product.variants)

Hope I could give you a starting point for orientation. If you have more questions feel free to ask.

Best regards,

Kevin :hatching_chick:

2 Likes
3

I certainly think a solution where each variant is expanded into separate products are the way to go.

You can hack your way to achieve it, however with compromises, with true Variants in small collections, as @Kevin_Sieger mentions, and larger collections you’d have to rely 100% on a custom Javascript-based solution.

Expand your Variants to separate Products and link them together via metafields or even Combined Listings (be sure your theme supports it).

You can show them close to your variant picker in the PDP to make the look like variants, but with a page change on click (new Product resource). If the page reload is a dealbreaker, you can look into the Speculation Rules API to make that feel great.

2 Likes