Create multicolored shoe product for customers to design

Question

We have a webshop with predefined sets of multicolored shoes for customers to order. Recently we obtained the ability to produce these shoes faster. Because we do not want to add every possible color combination our selfs we want to give customers the option to design there own. We already have taken photos from every color shoe and isolated the different colored pieces. What would be the best way to implement this in magento? Do we have to write our own code or are there any plugins with this function?

Answer 1

I managed to implement this functionality and it surprised me how easy it was.

There where two options I considered, the first one was to create a simple product with extra options which used a modified select.phtml with added javascript to change the images. But this would require some form of translation for choosing which images to use and does not support supply management of the individual parts.

The way I implemented it was with a bundle product which had a per part product option. This gives the ability to manage the supply and I can use the images supplied at part level.

To layer the parts on top of each other I had to create an alternative version of the media.phtml and reference it in the bundle product. To get the image urls I edited the bundle select.phtml and added a property direcly to each option. With some added javascript I just set the image source on the onchange event to the selected options property field.

The only problem I had was referencing an alternative version of the bundle select.phtml so I replaced the original one in my theme. If someone could give me a hint how to do that it'll be great!

Answer 2

I would add enough product attributes of type "image" to be able to represent each type of part, e.g. "sole", "laces" (or whatever groups of interchangeable parts you have). I would then create them as configurable products and apply the appropriate images. To keep the template simple (and avoid rendering weirdness with some browsers), I would create all of your "part" images on a transparent PNG of a fixed size, where the location of the actual part corresponds to the location it will be in a finished image of the shoe. Then, in the template, output each of your images and position them one above the other. Implement javascript on the drop-downs (as suggested above) that would swap the appropriate images. I've implemented something very similar myself and it's working pretty well for us.

Answer 3

There is nothing in Magento built-in that will give you this functionality, but if you were to use bundle products instead of configurables and design the product in such a way that each of the chosen bundle product images were the isolated images - with a little bit of coding and template work - you may be able to layer the images on top of each other achieving the effect you're looking for.

But this isn't how I'd do it.

Instead, I would create unique configurable product assets for each product type (similar to how you're doing now) but each image would represent each unique combination - one for every conceivable combination of product.

To gain some efficiency/automation here you could create a Photoshop layer comp for each combination of layer visibility, and name the layers and layer groups in a way that, when the images are saved, it somehow maps to the Sku that is generated in Magento.

After that uploading the images is a breeze and you'd get the image-swap functionality out of the box with Magento configurables.