Custom Product Configurations and Javascript

Blog / Software Development / Custom Product Configurations and Javascript
9/5/2017 | Joel Stephens

Custom Online Product Configurators

In case you were wondering, "Configurator" isn't actually a word but WikiPedia defines it as an online tool.   With that out of the way... we are all familiar with online configurators like what we see with shopping cart websites.  Typically in a case like Shopify, Magento or even WooCommerce you see simple product configurations like changing the color or an item or the size.  Typically these require the owner of the website to upload different images for each configuration.  So if you have coffee mugs for sale on your website and you want to sell them in green, red and black you would need to upload three images.  The site displays the correct image depending on what the user selects.

Common Problems with Online Product Configurators

So the example above works okay if you only have a few variations you need to create unique images for.  What happens if you have a product with lots of variations.  Say, 25,920 unique options?  We had a client with just such a challenge and the answer was to use so javascript trickery around overlaying images, image transparency and some other magic.  Check out their online product configurator and you can see what we mean.  The solution was to have a seperate image for the "Trim" at the top, and seperate image for the bottom.  We then used javascript to do image overlays to change the colors, add the appropriate shadows and ultimately piece the image together into a single image.

Browser Compatibility

Let us know if it doesn't work in your browser but we used Browser Stack for some quick testing and the javscript compatibility with modern browsers seems to work flawlessly.  We are currently working on another custom tool for CAPSA for their online medical cart sales and will blog about that when it comes out to the public.  If you have a product that you want to display online and it doesn't work with a standard shopping cart give us a call or fill out our Contact Us to contact the best web development company in Columbus.