Sure, you’ll have to create a new product template, create a collection, and add all products you want to bind.
You can manually change the order based on the order you want to show on the page.
Grab the collection ID from the URL.
In the product template, assign the collection like this:
{% for collection in collections %}
{% if collection.id == COLLECTIONID %}
{%- assign current_collection = collection -%}
{% endif %}
{% endfor %}
In this example, assuming each size is a different product, and each product contains color variations.
The idea is to show all available sizes, so we’re going to loop through the products within the collections:
Size:
Let’s repeat this logic for colors, and add a few more things in the input data in order to use it with JS.
select a color
{% for product in current_collection.products %}
{% assign sortedVariants = product.variants %}
{% for variant in sortedVariants %}
{% if variant.available %}
{%- assign variantOptionAvailability = 1 -%}
{% endif %}
{% endfor %}
{% endfor %}
You can use JS to set the initial option you’d like to load and Voila.