Product
Customizer

Graphic design
and the web

The SVG file format provides a bridge between graphic design software, like Adobe Illustrator, and the code of a web page.

Combining a SVG-formatted design with the client-side javascript of a web page, enables the creation of interactive product artwork for an eCommerce store.

Artwork can be connected to available product options, so that it updates in real-time, as preferred product options are chosen. Replacing a static image with interactive artwork, in this way, provides potential customers with a personalized and engaging shopping experience.

Considerations can be made to account for a multitude of product design options, like option-specific color swatches, real-time text sizing to a container, maximum text lengths, web font integrations, and more.

Progressive
enhancement

Since Javascript is required for this functionality, it can be built as a progressive enhancement, with a static image as its fall-back.

This concept has been implemented in eCommerce stores hosted by common platforms like Shopify, Wordpress, and Squarespace.