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?


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.

| improve this answer | |
  • Please explain "I would then create them as customisable products". To use an attribute for a customisable product it would have to be a dropdown type. And how about managing the supply count of the parts? – thommie Mar 12 '14 at 22:23
  • You're right, I meant "configurable products", not "customisable products" (just edited). That's also a very good point about managing stock levels for the parts. If you definitely need to do stock management within Magento, then bundled products would make sense. I stick by my advice about having separate image attributes for each part type though. You'd just leave the other ones bank on the bundled products and only specify the image type that applied to that part. – faithix Mar 14 '14 at 12:36

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.

| improve this answer | |
  • Doing the latter wouldn't be future prove, other employees should be able to just add new "parts" and automaticly be available at the front-end. – thommie Mar 10 '14 at 14:57
  • I appreciate your feedback - I'm not sure of your company's structure/business practice, giving you general advice. IMHO your product import process should include generation of layer/image assets from design/marketing depts -- all employees responsible for product load should be trained how to make use of those assets from external sources. I was responsible for organizing product load for [redacted] where just one person was responsible for 2-3000 products / week with dozens of images apiece; clothing, apparel with multiple colors and features as you're suggesting. – philwinkle Mar 10 '14 at 15:02

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!

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.