--- title: "Creating a project | Customer's Canvas Hub" canonical: "https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/creating-a-project/" --- # Creating a project > 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. - Create and manage projects for orders. ## 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`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/projects/GetAll) 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** ```bash curl -X GET "https://api.customerscanvashub.com/api/storefront/v1/orders?storefrontId=12&orderID=54321" \ -H "accept: text/plain" \ -H "Authorization: Bearer " ``` **HTTP** ```http GET https://api.customerscanvashub.com/api/storefront/v1/orders?storefrontId=12&orderID=54321 ``` **C#** ```csharp 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); ``` **TS** ```typescript 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); ``` **PHP** ```php $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 ```json { "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](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) 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: 1. Identify the project associated with the line item. 2. Review the project's items to find all `designIds` related to the line item. 3. 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}`](https://customerscanvas.com/docs/hub/dev-center/api/asset-processor.md#tag/privatedesignprocessor/PreparePreview) - Get a link to the thumbnail file: [`GET /api/processor/v1/private-designs/{id}/preview/{namespace}/{name}/{width}x{height}/url`](https://customerscanvas.com/docs/hub/dev-center/api/asset-processor.md#tag/privatedesignprocessor/PreparePreviewUrl) For example, let's generate URLs to thumbnail files: **cURL** ```bash 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 " ``` **HTTP** ```bash GET https://api.customerscanvashub.com/api/processor/v1/private-designs/6698b073306ecea21de39b11/preview/cart/thumbnail/160x120/url ``` **C#** ```csharp 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(); ``` **TS** ```typescript 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(); ``` **PHP** ```php $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](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/generating-proofs-and-previews.md#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`](https://customerscanvas.com/docs/hub/dev-center/api/design-atoms.md#tag/designatomsservice/RenderDesignPreview) - Save the rendered preview as a resource and retrieve its details: [`POST /api/atoms/v1/designs/render-preview/to-resource`](https://customerscanvas.com/docs/hub/dev-center/api/design-atoms.md#tag/designatomsservice/RenderDesignPreviewToResource) For example, let's generate URLs to preview files: **cURL** ```bash 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 " \ -d '{ "designId": "6698b073306ecea21de39a00", "ownerId": "crisford", "renderingConfig": { "fileFormat": "Jpeg" } }' ``` **HTTP** ```http POST https://api.customerscanvashub.com/api/atoms/v1/designs/render-preview Content-Type: application/json { "designId": "6698b073306ecea21de39a00", "ownerId": "crisford", "renderingConfig": { "fileFormat": "Jpeg" } } ``` **C#** ```csharp // Define request body var body = """ { "designId": "6698b073306ecea21de39a00", "ownerId": "crisford", "renderingConfig": { "fileFormat": "Jpeg" } } """; // Send request var preview = await designAtomsServiceApiClient.RenderDesignPreviewAsync(body: body); ``` **TS** ```typescript // Define request body const body = { designId: "6698b073306ecea21de39a00", ownerId: "crisford", renderingConfig: { fileFormat: "Jpeg" } }; // Send request const preview = _designAtomsServiceApiClient.renderDesignPreview(null, null, body); ``` **PHP** ```php // 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](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/generating-proofs-and-previews.md#product-preview) 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`](https://customerscanvas.com/docs/hub/dev-center/api/storefront.md#tag/projects/GetProjectProcessingResults). 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** ```bash curl -X GET "https://api.customerscanvashub.com/api/storefront/v1/projects/906/processing-results" \ -H "accept: text/plain" \ -H "Authorization: Bearer " ``` **HTTP** ```http GET https://api.customerscanvashub.com/api/storefront/v1/projects/906/processing-results ``` **C#** ```csharp var projectId = 906; // Set a project ID here var pdfLink = await projectsApiClient.GetProjectPdfUrlAsync(projectId); ``` **TS** ```typescript var projectId = 906; // Set a project ID here var pdfLink = _projectsApiClient.getProjectPdfUrl(projectId); ``` **PHP** ```php $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: ```javascript 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: "" // 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](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/starting-personalization-session.md) topic. ## Learn more - [Working with Projects](https://customerscanvas.com/docs/hub/dev-center/api/storefront/working-with-projects.md) - [Preview Private Designs](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/generating-proofs-and-previews.md) - [Reopening the editor with personalized data](https://customerscanvas.com/docs/hub/dev-center/scenarios/online-store/starting-personalization-session.md)