Product customization
Product customization allows you to take an SVG image asset and customize it, adding colorization, monogramming or a logo, for example. This makes it easier for developers to create web content that can be personalized, letting customers view products in different colors or add personalized banners to highlight special offers, among many other uses.
Video- Introducing product customizationLink copied!
This video provides an overview of Product Customization, explaining the concepts, walking you through some of the recipes and interactive examples from the product personalization playground and shows how to use the Product Customization app.
Use casesLink copied!
Our product customization solution allows multiple colorized, monogrammed and otherwise personalized product images to be served dynamically from a single base image. This allows you to cut costs and provide a better customer experience.
In the example below, three product images were generated dynamically from a single base product image. The base product image (left picture) has some elements re-colored from black to gray (middle picture) and then some personalized initials monogrammed on the label (right image):
The above example illustrates two use cases:
Monogramming:adding initials and names to products such as shirt cuffs, towels and robes. See the monogramming quickstart for a step by step example.
Colorization: showing products such as soft furnishings in different color choices. See the Creating a colorized product image for a complete example.
Take a look at the product personalization playground for some interactive examples and further use cases.
OverviewLink copied!
The Amplience solution is based on Scalable Vector Graphics (SVG).
SVG is an open standard specification and is supported by all major web browsers. SVGs can be authored using existing designer tools such as Adobe Illustrator and Inkscape.
SVG images are constructed from XML instructions describing lines an shapes rather than from bit-mapped pixels. They are therefore truly resolution-independent and it makes no difference whether you display the image in icon size or at 1024x768 resolution. This also means that SVG text is searchable and SEO-friendly if rendered client-side.
For the purposes of personalization, SVG provides a good base for us to work from since it supports layers, text on paths, text styling, colorization and scalability. SVGs can include embedded and linked images, and those images can be overlaid with effects applied to them.
Building on the base functionality provided by SVG, our solution has the following key features:
Designers can create rich product image templates using familiar web tools (such as Adobe Illustrator, Inkscape & CSS) and can personalize them with substitution rules. See Creating a colorized product image for an example of how to create an SVG that can be colorized.
Substitution rules can change text, fonts, styles, images, effects, layer visibility and filters on-the-fly.
Your e-commerce platform can pass in variables to the substitution rules whenrequesting the image template.
At every stage of the journey, the user can be shown a preview of their product to help make their buying decision.
Related pagesLink copied!
Creating a colorized product image