Visualizing personalized orders

Last updated on October 28, 2025
•
7 minutes to read

When integrating Customer's Canvas with your e-commerce platform, you may need to work with completed orders that contain personalized designs. This functionality is essential for both the admin panel and the customer's order history on the storefront.

This article explains how to:

Determine if an order contains personalized designs.
Render previews of personalized designs for specific line items.

Determining if an order contains personalized designs

Suppose you have a list of order IDs in your system, and you need to identify which orders contain personalized data.

Option 1: Store project ID in your system

The simplest approach is to store the Customer's Canvas project ID in your order metadata immediately after project creation. This allows you to retrieve this information directly from your system.

However, this approach may not always be suitable:

If your retention policy deletes outdated orders, data integrity may be compromised.
You may prefer not to store Customer's Canvas-specific information in your system.

Option 2: Search for projects in Customer's Canvas

An alternative is to store your system's order ID in Customer's Canvas when creating the project. You can then use the Storefront API endpoint GET /api/storefront/v1/projects to search for projects associated with that order ID.

Example request: Search for projects by order ID

For example, if your e-commerce order has the identifier "54321", you can retrieve the corresponding Customer's Canvas project like this:

curl -X GET "https://api.customerscanvashub.com/api/storefront/v1/orders?storefrontId=12&orderID=54321" \
-H "accept: text/plain" \
-H "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/storefront/v1/orders?storefrontId=12&orderID=54321

var storefrontId = 12; // Set a real storefront ID here
var orderID = "54321"; // Set a real order ID here
var orders = await ordersApiClient.GetAllAsync(orderID: orderID, storefrontId: storefrontId);

var storefrontId = 12; // Set a real storefront ID here
var orderID = "54321"; // Set a real order ID here
var orders = ordersApiClient.getAll(null, null, null, null, null, null, null, null, orderID, null, null, storefrontId);

$storefrontId = 12; // Set a real storefront ID here
$orderID = "54321"; // Set a real order ID here
$orders = $ordersApiClient->ordersGetAll(null, null, null, null, null, null, null, null, $orderID, $storefrontId);

Success response example

{
  "id": 906,
  "storefrontId": 1410,
  "tenantId": 1,
  "orderId": "562850929686",
  "orderUrl": "https://example.com/admin/orders/562850929686",
  "orderNumber": 1002,
  "customerId": "anon_911f63ee",
  "customerName": null,
  "name": "order#1002",
  "ownerId": "anon_911f63ee",
  "items": [
    {
      "id": 80711,
      "name": "Business Card",
      "quantity": 200,
      "orderLineItemId": "13371779743934",
      "orderLineItemIndex": 0,
      "productReference": "7846621020350",
      "fields": {},
      "hidden": {
        "images": [""],
        "originalProductId": "7846621020350",
        "originalProductUrl": "/products/business-card",
        "sku": "business card se"
      },
      "designIds": [ "6582b0bd2c3e183cd0efb0d5" ],
      "sku": "business card se",
      "resources": []
    }
  ],
  "status": 2,
  "created": "2025-10-20T09:15:41.8788256Z",
  "lastModified": "2025-10-20T09:18:05.1435081Z",
  "description": null,
  "processingStatus": "Completed"
}

Note

You may have multiple projects for a single order (e.g., if you create a separate project for each line item). However, finding at least one project with designIds confirms that the order contains personalized data.

For more details, refer to the Working with projects topic.

Displaying previews for line items

Suppose you want to display a preview for a specific line item. Among all projects related to the order, you need to:

Identify the project associated with the line item.
Review the project's items to find all designIds related to the line item.
Use these designIds and their ownerId to render previews.

Example requests for previews

Thumbnails

Thumbnails are small previews suitable for quick reference when you need to display a list of designs. Render thumbnails of personalized designs with the following Asset Processor API endpoints:

Get the thumbnail file as binary data:

GET /api/processor/v1/private-designs/{id}/preview/{namespace}/{name}/{width}x{height}
Get a link to the thumbnail file:

GET /api/processor/v1/private-designs/{id}/preview/{namespace}/{name}/{width}x{height}/url

For example, let's generate URLs to thumbnail files:

curl -X \
  GET "https://api.customerscanvashub.com/api/processor/v1/private-designs/6698b073306ecea21de39b11/preview/cart/thumbnail/160x120/url" \
  -H  "accept: text/plain" \
  -H  "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/processor/v1/private-designs/6698b073306ecea21de39b11/preview/cart/thumbnail/160x120/url

var designId = "6698b073306ecea21de39b11"; // Put your real design ID here
var previewNamespace = "cart"; // Put your real preview name space here
var previewName = "thumbnail"; // Put your real preview name here
var width = 160; // Put your real preview width here
var height = 120; // Put your real preview height here
var response = await privateDesignProcessorApiClient.PreparePreviewUrlAsync(designId, previewNamespace, width, height);
var url = await response.Content.ReadAsStringAsync();

var designId = "6698b073306ecea21de39b11"; // Put your real design ID here
var previewNamespace = "cart"; // Put your real preview name space here
var previewName = "thumbnail"; // Put your real preview name here
var width = 160; // Put your real preview width here
var height = 120; // Put your real preview height here
var response = await _privateDesignProcessorApiClient.preparePreviewUrl(designId, previewNamespace, width, height);
var url = await response.text();

$designId = "6698b073306ecea21de39b11"; // Put your real design ID here
$previewNamespace = "cart"; // Put your real preview name space here
$previewName = "thumbnail"; // Put your real preview name here
$width = 160; // Put your real preview width here
$height = 120; // Put your real preview height here
$response = $privateDesignProcessorApiClient->privateDesignProcessorPreparePreviewUrl($designId, $previewNamespace, $previewName, $width, $height);
$url = $response->getBody()->getContents();

For more details, refer to the Thumbnails topic.

Product Preview

Product previews are images for detailed viewing. They can display mockups and populate placeholders with data. To visualize personalized products, use the following Design Atoms API endpoints:

Render the design preview as binary data:

POST /api/atoms/v1/designs/render-preview
Save the rendered preview as a resource and retrieve its details:

POST /api/atoms/v1/designs/render-preview/to-resource

For example, let's generate URLs to preview files:

curl -X \
POST "https://api.customerscanvashub.com/api/atoms/v1/designs/render-preview" \
-H  "accept: application/octet-stream" \
-H  "Content-Type: application/json" \
-H  "Authorization: Bearer <TOKEN>" \
-d '{
  "designId": "6698b073306ecea21de39a00",
  "ownerId": "crisford",
  "renderingConfig": {
    "fileFormat": "Jpeg"
  }
}'

POST https://api.customerscanvashub.com/api/atoms/v1/designs/render-preview
Content-Type: application/json
{
  "designId": "6698b073306ecea21de39a00",
  "ownerId": "crisford",
  "renderingConfig": {
    "fileFormat": "Jpeg"
  }
}

// Define request body
var body = """
{
    "designId": "6698b073306ecea21de39a00",
    "ownerId": "crisford",
    "renderingConfig": {
        "fileFormat": "Jpeg"
    }
}
""";

// Send request
var preview = await designAtomsServiceApiClient.RenderDesignPreviewAsync(body: body);

// Define request body
const body = {
    designId: "6698b073306ecea21de39a00",
    ownerId: "crisford",
    renderingConfig: {
        fileFormat: "Jpeg"
    }
};

// Send request
const preview = _designAtomsServiceApiClient.renderDesignPreview(null, null, body);

// Define request body
$data = [
    'designId' => '6698b073306ecea21de39a00',
    'ownerId' => 'crisford',
    'renderingConfig' => [
        'fileFormat' => 'Jpeg'
    ]
];

// Send request
$response = $designAtomsServiceApi->designAtomsServiceRenderDesignPreview(null, null, json_encode($data));

For more details, refer to the Product previews topic.

Note

You may have multiple images for a single design file (e.g., multi-page designs). Typically, you should use the first page of the first design in the project.

Using design IDs for reorders

The designId can be used not only for visualization but also for other purposes, such as facilitating reorders or resuming editing.

Without opening the editor

If you store the Customer's Canvas project ID (e.g., customers_canvas_project_id) in your order metadata, you can reuse the existing project and its previous design renders—without needing to open the editor. This is useful for quick reorders without modifications.

To download print files, you can get their URLs from the response of the endpoint GET /api/storefront/v1/projects/{id}/processing-results. The only parameter is the project identifier. For example, if the project ID is 906, you can get the print file links as follows:

curl -X \ GET "https://api.customerscanvashub.com/api/storefront/v1/projects/906/processing-results" \
-H  "accept: text/plain" \
-H  "Authorization: Bearer <TOKEN>"

GET https://api.customerscanvashub.com/api/storefront/v1/projects/906/processing-results

var projectId = 906; // Set a project ID here
var pdfLink = await projectsApiClient.GetProjectPdfUrlAsync(projectId);

var projectId = 906; // Set a project ID here
var pdfLink = _projectsApiClient.getProjectPdfUrl(projectId);

$projectId = 906; // Set a project ID here
$pdfLink = $projectsApiClient->projectsGetProjectPdfUrl($projectId);

With editor access

If a user needs to modify an existing design, you can open the product using the designId and other parameters from the project. Initialize the editor as follows:

simpleEditor.init({
    configVersion: 2,
    input: {
      productReferenceId: items[0].productReference, // "7846621020350" 
      productId: items[0].hidden.originalProductId,  // "7846621020350" (ID of the base product)
      designId: items[0].designIds[0],  // "6582b0bd2c3e183cd0efb0d5" (Use the first design ID)
      sku: items[0].sku  // "business card se" (SKU of the product)
    },
    integration: {
      tenantId: 1,       // From the project
      user: {
        id: "anon_911f63ee",  // From the project (customerId)
        token: "<userToken>"  // You need to generate or retrieve this token
      },
      storefrontId: 1410,  // From the project
      cchubApiGatewayUrl: "https://api.customerscanvashub.com/"
    }
    // Additional settings or workflow content can be included here
});

To learn how you can initialize the editor using the product link and version saved in the order metadata, refer to the Reopening the editor topic.

Learn more:

Visualizing personalized orders

Determining if an order contains personalized designs

Option 1: Store project ID in your system

Option 2: Search for projects in Customer's Canvas

Example request: Search for projects by order ID

Success response example

Note

Displaying previews for line items

Example requests for previews

Thumbnails

Product Preview

Note

Using design IDs for reorders

Without opening the editor

With editor access

Was this page helpful?