Search

Searching USERS

Export Page

Product Customization

This is the quick start guide for the Product Customization application. This application allows for SVGs to be tested with various parameter configurations prior to release to your website.

A typical workflow for users of this app is shown on the Product Customization Workflow page.

Product Customization Introduction

The Amplience product customization features make it possible to see how customized versions of products would look in the commerce storefront.

 See the Business Drivers for Product Customization...

Business Drivers for Product Customization and Configuration

What can product customization do for you? That is the question. We aim to answer it by first considering the key business drivers that define the problems to be solved. Those business drivers are...

Increase Conversion and Engagement

Allowing customers to configure and personalize their products helps build deep customer and brand engagement, and it increases conversion by cultivating emotional attachment.

Reduce Return Rates

Providing accurate representations of products at the point of sale ensures shoppers are fully aware of the product features and quality prior to purchase. 

Save Time, Money and Effort

For products that can be configured into various color combinations, or otherwise customized through monogramming, presenting them online can be time-consuming and costly. For example, displaying multiple product variants on an e-commerce storefront would first entail physically building each product variant, then photographing each one individually in a studio. Or at least re-touching a single product image manually (e.g. in Photoshop) to provide every possible permutation as an individual image. Massive efficiency gains can be achieved by doing this entirely digitally on-the-fly.

Beat the Bulk Sellers

The largest warehouse-based e-stores in the world are unable to respond to customization requests at a detailed level, and they generally buy stock in bulk to maintain their margins. Product customization gives smaller retailers an advantage over Amazon (and others) by highlighting a highly configurable product range, and by providing an ability to configure those products according to the shopper’s requirements.

 Read about the Technical Challenges...

The Technical Challenges

We have already highlighted the basic business-level problem that with a personalized product line it is virtually impossible to take pictures of every possible permutation. This problem is compounded by the fact that such product lines may be ever-expanding with additional customizable attributes. In addition to these business problems, there are some technical challenges to be overcome when searching for a solution:

  • There are no real off-the-shelf solutions, except for photographic studios who will provide an off-the-shelf solution for photographing all your products.
  • Some personalization services such as Scene 7 are expensive and complicated.
  • Building your own in-house solutions would take a significant amount of development time followed by an eternity of maintaining the necessarily complex technical architecture.
  • Any such solution should provide accurate on-screen representations of how purchased products will look in practice, in terms of color-matching stock and monogramming fonts.
 See the Product Customization Use Cases...

Product Customization Use Cases

Our application allows multiple colorized, monogrammed and otherwise personalized product images to be served dynamically to an e-commerce storefront from a single base image. This allows our customers to cut costs and provide a better shopping experience.

As a concrete example, consider the following three product images that were generated dynamically from a single base product image. The base product image (left picture) could have certain elements re-colored from black to gray (middle picture) and then some personalized initials monogrammed on the label (right image): 

As illustrated by the above example, the two use cases we are specifically targeting are...

Monogramming: adding initials and names to products such as shirt cuffs, towels and robes.

Colorization: showing products such as soft furnishings in different color choices.

And there is an additional use case, which is...

Related Products: conditionally swapping combinations of products in a scene, such as with home furniture; visualizing different combinations of product finishes, for example black lacquer bed frame with white lacquer bedside tables.

 Find out what we see in SVG...

The Amplience Solution

Our solution is based on Scalable Vector Graphics (SVG), and here's why...

The Wonders of Working with SVG

SVG is an open standard specification developed in 1999 by the WWW consortium; see https://www.w3.org/Graphics/SVG/. SVGs are supported by all major web browsers, and they can be authored using existing designer tools like Adobe Illustrator and Inkscape.

SVG images are constructed from XML instructions describing lines and 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.

Key Features of Our Solution

Building on the base functionality provided by SVG, we devised a solution with the following key features:

  • Designers can create rich product image templates using familiar web tools (Adobe Illustrator, Inkscape & CSS) and can personalize them with substitution rules.
  • 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 when requesting 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.

Product Customization Overview Video

This video provides an overview of Product Customization, explaining the concepts, walking you through some of the recipes from the Playground and showing you how to use the Product Customization app.

Colorization Quick-Start

Here we present a simple "quick start" run-through of the Product Customization application, in this case for the "colorization" use case.

 See "Step 1: Parameterize the SVG"...

Step 1: Parameterize the SVG

As the basis of this example, a designer has created an SVG image of an armchair that includes the necessary filters to support colorization.

Note that you can download the complete SVG XML code for this example by right clicking and choosing "save link as..." HERE but for the purposes of this tutorial you only really need to be aware of the additions that we made to the original SVG image file.

When modifying the SVG XML code for this image, we will be referencing our ampsvg namespace. So before making any further modifications to the file, we must include the namespace definition in the list of namespaces at the head of the file like this:

In order to parameterize the SVG for colorization, the following code snippet is inserted into the <metadata> section of the SVG XML.

The substitutions tag defines a parameter named $color that can be provided to our Dynamic Imaging service, and it also sets the mapping of that parameter value onto the flood-color attribute of the flood filter that was already defined in the SVG file as shown here: (it's what defines the color of the armchair)

The tokens tag of our newly-inserted metadata instructs the application to allow the substitution parameter value to be changed via the user interface.

Once parameterized, we upload the SVG to our Digital Asset Manager (DAM).

 See "Step 2: Locate in the SVG Library"...

Step 2: Locate the SVG in the SVG Library

In this step we locate the SVG image in the SVG Library of the application. Select the "View contact sheet" option from the pull-down menu option. This will take you to the contact sheet which will be empty at this point. Select the "ADD PREVIEW" button and move

 See "Step 3: Preview the SVG"...

Step 3: Preview the SVG

Now it's time to preview and test colorized variants of the SVG, which means:

  • Changing the substitution parameter value for the armchair material color.
  • The preview will generate automatically
  • Selecting pass or fail will add the preview to the contact sheet

 See "Step 4: View the Contact Sheet"...

Step 4: View the Contact Sheet

Having run the preview process (Step 3) several times, we can then view the variants of the SVG image via the Contact Sheet:

 

 See "Step 5: Publish the Image"...

Step 5: Publish the Image

The final step of the quick-start process is to publish the image, which can be done from the SVG Library as shown here:

Note that the application supports a workflow for reviewing and approving SVG variants.

 See "Bonus Step 6: Retrieve the Dynamic Image"...

Bonus Step 6: Retrieve the Dynamic Image

This is a bonus step because it does not relate to the testing and reviewing of SVG images in the app. However, these images can now be retrieved via the Dynamic Imaging service with the parameter substitutions specified in the image retrieval URLs.

The colorization is achieved by appending (in this case) ?color=%23828948 to the image retrieval URL provided by the Digital Asset Manager (DAM). The result when displayed in a web browser window looks like this:

This concludes the quick-start tutorial that has taken us from an initial SVG file to the final contact sheet (and ultimate image retrieval).

 

 

Monogramming Quick-Start

Here we present a simple "quick start" run-through of the SVG Personalization app, in this case for the "monogramming" use case.

 See "Step 1: Parameterize the SVG"...

Step 1: Parameterize the SVG

As the basis of this example, a designer has created an SVG image of a football shirt that includes monogrammed text that can be changed.

Note that you can download the complete SVG XML code for this example HERE (hint: right-click and choose "save link as...") but for the purposes of this tutorial you only really need to be aware of the additions that we made to the original SVG image file.

When modifying the SVG XML code for this image, we will be referencing our ampsvg namespace. So before making any further modifications to the file, we must include the namespace definition in the list of namespaces at the head of the file like this:

In order to parameterize the SVG to change the text, the following code snippet is inserted into the <metadata> section of the SVG XML.

The substitutions tag defines the parameter (named $name) that can be provided to our Dynamic Imaging service. The substitutions tag also sets the mapping of those parameter values into the tspan tags that were already defined in the SVG file thus:

(note that these tspan tags have been simplified for presentation here, by removing the font information)

The tokens tag of our newly-inserted metadata instructs the application to allow the substitution parameter values to be changed via the user interface.

Once parameterized, we upload the SVG to our Digital Asset Manager (DAM).

 See "Step 2: Locate in the SVG Library"...

Step 2: Locate the SVG

In this step we locate the SVG image and navigate to the Preview Screen. Double clicking the SVG will take you to the contact sheet and from there you are able to create a new preview.

 See "Step 3: Preview the SVG"...

Step 3: Preview the SVG

Now it's time to preview and test the monogrammed variants of the SVG, which means:

  • Changing the substitution parameter value for the shirt name.
  • Previews will be generated automatically and can be added to the contact sheet by selecting pass or fail.

 

 See "Step 4: View the Contact Sheet"...

Step 4: View the Contact Sheet

Having run the test process (Step 3) several times, we can then view the variants of the SVG image via the Contact Sheet:

 See "Step 5: Publish the Image"...

Step 5: Publish the Image

The final step of the quick-start process is to publish the image, which can be done from the SVG Library by selecting Publish on the contextual menu:


 See "Bonus Step 6: Retrieve the Dynamic Image"...

Bonus Step 6: Retrieve the Dynamic Image

This is a bonus step because it does not relate to the testing and reviewing of SVG images in the app. However, the whole point of uploading these images to DAM is so that they can be retrieved via the Dynamic Imaging service with the parameter substitutions specified in the image retrieval URLs.

The monogramming is achieved by appending (in this case) ?name=BERTRAM to the image retrieval URL provided by the Digital Asset Manager (DAM). The result when displayed in a web browser window looks like this:

This concludes the quick-start tutorial that has taken us from an initial SVG file to the final contact sheet (and ultimate image retrieval).

  • No labels