This page serves as a demonstration and integration guide for the UnmadeOS Design Transfer functionality.

For full API specification see the Integration Reference.

Here we see an Unmade Editor embedded in your site. The user has selected various colours, patterns and personalisations to style their garment as needed.

When the user chooses to click Save and add this design to their cart, a Design ID is created. Your site can then use this Design ID to generate Transfer Previews.

Use the Editor below to make some changes to the design.

Using the Design Transfer functionality, you can now show the user how their design looks on a variety of different products in your range. These images could be presented on a PDP or team-store page to provide users with a "You may also be interested in..." or similar section.

As well as a live preview of the transferred design, the user has the ability to open the new product in the editor and either purchase it directly, or make their own further modifications.

Note: The designs shown in these transfer previews cannot be ordered directly since no Design ID exists for them yet. The user must enter the Editor and add the design to their cart through the normal process to place an order. This step also ensures that the user has the opportunity to see the design from all angles and make any additional changes before proceeding with the purchase.

The choice of products to use for Transfer Previews is left entirely to you. Design Transfers work better if an entire range of products has been set up with this functionality in mind, so you may wish to store a list of "Pre-approved" products that will be used to show Transfer Previews for each product on your site.

Ask your Unmade contact for details of how to design your new product ranges to maximise transferability.

Displaying Transfer Previews to your user is a two-step process:

1. Create Transfer Previews
2. Select and use preview URLs

To send this request, you will need:

1. Your Unmade Embed site URL
2. Your Unmade API Token
3. The slug of the product for which you'd like to create the previews
4. The Design ID you'd like to transfer

You can then create transfer previews by making a POST request to the v1/transfer_previews/ endpoint of your Unmade Embed site.

A successful response from this endpoint will contain one or more preview objects:

The preview URLs returned by the Transfer Previews API function identically to standard Unmade v1/previews/ URLs. The images themselves are generated on-demand when you first request the URL. The image URL is the full-resolution preview which will be delivered at the resolution agreed between you and Unmade during the product setup process. The thumbnail URL is a ~400px thumbnail of the main image. Requesting either URL will generate and cache both versions so call whichever is convenient for your purposes.

You can use these preview URLs directly in <img> tags like so:

Because these high-resolution images are generated on-demand, the initial request can take a small amount of time (approximately 5 seconds). As such, it is usually desirable to provide a placeholder image and a loading indicator when loading images in this way.

It will usually make sense to use a "default" product image for this placeholder. If / when you choose to update this image to show a Transfer Preview, you can activate the loading indicator and set it to deactivate once the Transfer Preview loads.