Dynamic image

Hello

Is there a way to dynamically change the colors of the product image as the customer selects a different color from product options?

I know this is possible with manually uploading each images and dynamically changing the images as they select different color options but my products have several color options.

You can change the color of:

1. top
   
   
2. middle
   
   
3. bottom
   

With each option having multiple color options - that would be hundreds of color combination and hundreds of images for ONE product alone.

Here's an example of what we're looking to do:

https://maruccisports.com/ap5-custom-pro/

Do you know of a tool ,API or eCommerce platform capable of this ? Or is extensive coding the only way ?

Thank you very much for your help

 

Hello Victor.I
is it possible to see a screenshot of the product here?

 

Hello hdewantara
No it is not possible as my project is only in pototyping right now.
Also, I did get an answer from the developper of https://maruccisports.com/ap5-custom-pro/
He said :" I'm the developer who built the website you linked. We use custom scripting that renders the image based on the selected options. Each layer is exported as an individual image, and we're using the HTML Canvas API to overlay the images into one. It's definitely something you'd need to customize a theme for though. The other option would be to do an API integration to make creating the image rules easier. I'm sorry there's not an easy answer!"

 

I get worried the way people throw around the word "API" these days, as if you magically need some high level abstraction to give you access to OS level operations and hardware control to make a website.

This isn't rocket science, and it sure as shine-ola isn't worthy of the name "Application Program Interface".

Make each of your three sections as alpha transparent PNG files and load them as images. The transparency in those images should be the area you want to colour, leaving your background around the images opaque. When you click on the colour, apply that colour as the background-image CSS property of said IMG tags.

You could also use radio buttons with the CSS3 :checked attribute to absolute position sibling elements an INPUT using a 'painters algorithm' of z-index to place/set the colours for each section.

Mind you, with normal HTML this technique would only work if all your sections intersect horizontally or vertically. IF the edges between coloured areas are straight you'd need to get CANVAS or SVG involved, but that too isn't entirely rocket-science.

I'm on the way towards a medicated nap right now thanks to double-pounding cold medicine like it was a dunkins iced coffee, but when I get up I'll toss together a simple example to show you what I mean.

 

You can apply this principal to develop something your own:

http://jsfiddle.net/v63kzdyL/3/