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:
<div class="sizes">
<div class="sizes-title">Size:</div>
<select data-size-dropdown aria-label="size dropdown">
{% for product in current_collection.products %}
<option id="{{product.id}}" value="{{product.title}}">
{{ product.title }}
</option>
{% endfor %}
</select>
</div>
Let's repeat this logic for colors, and add a few more things in the input data in order to use it with JS.
<div class="section__title" data-color-name>select a color</div>
<div class="color__container">
{% for product in current_collection.products %}
<div class="colors" name="id" data-sizes="{{product.title}}">
{% assign sortedVariants = product.variants %}
{% for variant in sortedVariants %}
{% if variant.available %}
{%- assign variantOptionAvailability = 1 -%}
<input
id="{{variant.id}}"
type="radio"
name="id"
class="colors__input"
data-color="{{variant.title | downcase | replace: " ", "-"}}"
data-sku="{{variant.sku}}"
data-quantity="{{variant.inventory_quantity}}"
data-inventory-policy="{{variant.inventory_policy}}"
data-tags="{% for tag in product.tags %}{{tag}}{% if forloop.last == false %},{% endif %}{% endfor %}"
data-img-src="{{variant.image.src | img_url: "1000x1000", format: "pjpg"}}"
data-item-price="{{variant.price | money}}"
data-item-compare-at-price="{{variant.compare_at_price | money}}"
value="{{variant.id}}"
>
<label
for="{{variant.id}}"
class="colors__label available {{variant.title | downcase | replace: " ", "-"}}"
data-color-label-name="{{variant.title | downcase }}"
>
<img
class="colors__label__img"
src="{{variant.image.src | img_url: '65x65', scale: 2}}"
alt="{{variant.title}} sheet set"
width="65"
height="65"
loading="lazy"
>
{% if variant.inventory_quantity <= 0 and variant.inventory_policy == 'continue' %}
<div class="pre-order-tag">Pre-Order</div>
{% endif %}
</label>
{% endif %}
{% endfor %}
</div>
{% endfor %}
</div>
You can use JS to set the initial option you'd like to load and Voila.
