I have done it both ways and I find creating a separate product for each color (like the koio.co site) works better. Having a separate product for each color is advantageous when filtering by color because the customer sees the image that matches the color they are searching for. Additionally this approach gets around the 100 variant limitation on a product which comes into play easily with shoes. If you have 13 sizes per color a single product can only support 7 colors. If you add an option for width with medium and wide you are down to 3 colors.
The koio.com implementation is one way of getting all the products on a page, but there are others that do not require a page reload every time a different color is selected. Regardless of the approach the first step is to group the related color-products together into a collection so that we know what to show together. You can use tags or other attributes of the product to create the collections.
Showing them together:
This means that for most any theme we can add variants to the product JSON and the DOM that the Shopify code uses to display and navigate options without breaking that functionality.
Start by identifying the collection associated with the product that defines the group. This code looks for a collection that has a description starting with the word style:
{% for collection in product.collections %}
{% assign a = collection.description | downcase | truncate: 5, '' %}
{% if a == 'style' %}
{% assign product_collection = collection %}
{% break %}
{% endif %}
{% endfor %}Next create arrays of variants and images in the group:
{% assign variants = product.variants %}
{% assign images = product.images %}
{% if product_collection %}
{% for p in product_collection.products %}
{% if p.id != product.id and p.available %}
{% assign variants = variants | concat: p.variants %}
{% endif %}
{% endfor %}
{% for p in product_collection.products %}
{% if p.id != product.id and p.available %}
{% assign images = images | concat: p.images %}
{% endif %}
{% endfor %}
{% endif %}
Go through the code in the file and replace loops that use product.variants and product.images with variants and images variables.
Replace {{ product | json }} with code to recreate a product JSON that contains all variants and images:
{"id":{{product.id | json}},"title":{{product.title | json}}, "handle":{{product.handle | json}},
"description":{{product.description | json}}, "published_at":{{product.published_at | json}},
"created_at":{{product.created_at | json }}, "vendor":{{product.vendor | json}}, "type":{{product.type | json}},
"tags":{{product.tags | json}}, "price":{{product.price | json}},"price_min":{{product.price_min | json}},
"price_max":{{product.price_max | json}}, "available":{{product.available | json}}, "price_varies":{{product.price_varies | json}},
"compare_at_price":{{product.compare_at_price | json}},"compare_at_price_min":{{product.compare_at_price_min | json}},
"compare_at_price_max":{{product.compare_at_price_max | json}}, "compare_at_price_varies":{{product.compare_at_price_varies | json}},
"variants":[
{% for variant in variants %}
{{variant | json}}{% unless forloop.last == true %},{%endunless%}
{% endfor %}
],
"images":[
{% for image in images %}
{{image | json}}{% unless forloop.last == true %},{%endunless%}
{% endfor %}
], "featured_image": {{product.featured_image | json}}, "options":{{product.options | json}},
"content":{{product.comntent | json}}
}
Additional effort is required to show only the images associated with the "color-product" for the selected variant.
