---
title: "What is a product? | Customer's Canvas Hub"
canonical: "https://customerscanvas.com/docs/hub/admin-guide/what-is-product/"
---

# What is a product?

> In this article, you will learn how Customer's Canvas product defines your storefront product.

In this article, you will learn how to start working in Customer's Canvas. First, you will read how a customer interacts with your storefront products.

Then, you will read how Customer's Canvas helps you automate your processes. For example, Customer's Canvas provides options and option values for your product, a design, and then creates a high resolution print file.

Next, you will consider the concepts of Customer's Canvas products in detail such as a *product*, *assets*, *product variants*, and so on. Each paragraph contains the link to the corresponding sections with tutorials.

Let's start from a *storefront product*.

## Storefront product

Your product catalog consists of *storefront products*. They configure customer navigating.

![Storefront product.](./images/what-is-product-storefront-product.png)

A storefront product consists of *product variants*. These are all the items that you sell in your product.

For example, your product is a T-shirt, and your customer can select its color: green, blue, or white. So, you sell three product variants in the T-shirt storefront product.

![Product anatomy.](./images/what-is-product-storefront.png)

When customers select your product, they start a personalization process.

## Personalization process
 
A *personalization process* is the process when your customers edit a product variant design. Customer's Canvas allows you to set up a personalization process for your ideas. You can find different examples in our [Demo section](https://customerscanvas.com/demos/product).

Let's consider an example of a personalization process.

1. First, your customer selects a storefront product.
2. Then, the customer selects a product variant: green, blue, or white T-shirt. Let's assume that a customer selects a green T-shirt.
3. Your customer starts personalization: adds text or uploads a photo.
4. Next, your customer approves the personalization result and adds the product to a cart. Customer's Canvas creates a *cart product*.

![Personalization process.](./images/what-is-product-personalization-process.png)

## Cart product

When customers add your product to cart, your storefront creates a *cart product* and add this product to a cart.

A cart product is based on:

* A product variant from Customer's Canvas product
* Personalization data by a customer

![Cart product anatomy.](./images/what-is-product-cart-product.png)

The counterpart of a storefront product is a *Customer's Canvas product*. Let's consider what this product contains.

## Customer's Canvas product

Customer's Canvas product defines the counterpart of a storefront product. Read the [Creating Products](https://customerscanvas.com/docs/hub/admin-guide/pim/creating-products.md) article, to learn how to create a new product.

This product contains: 

* Options and option values
* Product variants 
* SKU
* Assets
* E-commerce product connection
* A workflow with personalization process
* A pipeline

These components define your storefront product.  Customer's Canvas product provides your personalization process, options and option values, product variants, SKU, editors, and assets.

When a customer clicks the **Add to card** button, Customer's Canvas renders a high-resolution image and creates a *project*. In this project, you will see how pipeline has worked and download the image to print.

You can see the area of responsibility in the following schema.

![The area of responsibility for Customer's Canvas products. ](./images/what-is-product-area-of-responsibility.png)

Let's consider the product properties in detail.

## Option and option values

An *option* configures a product. For example, `Color` and `Size`. Options may impact on a product price, product appearance, and so on.

Options have *option values*. They define an option. For example, your option is `Color`, and the option value are `Green`, `Blue`, and `White`

Let's see an example. Imagine that your product is a T-shirt. The options and the option values are the following:

* `Size`: `S` and `M`
* `Color`: `Green`, `Blue`, and `White`

![Options and option values.](./images/what-is-product-option-option-values.png)

Read the [Editing Options](https://customerscanvas.com/docs/hub/admin-guide/pim/editing-options.md) article to set up options and option values in a product.

Let's see how options and option values may affect the price and the appearance of a product:

1. Your product is a T-shirt. The product has the `Color` option. Whether a customer selects a color, it doesn't affect the price.

2. Your product is a business card. The product has the `Paper Quality` option. Depending on the paper quality, the final price will be different.

3. Your product is a brochure. The product has the `Orientation` format. If you select the `portrait`, you will see a vertical design. If you select `Landscape`, you will see a horizontal design. This doesn't affect the price.

Option and option values define *product variants*.

## Product variants 

*Product variants* are the combinations of options and option values in a product.

For example, your product is a T-shirt, and your options and option values may be the following:

* `Size`: `S` and `M`
* `Color`: `Green`, `Blue`, and `White`

In this case, the product will have the following variants:

* `Green/S`
* `Green/M`
* `Blue/S`
* `Blue/M`
* `White/S`
* `White/M`

![Product variants.](./images/what-is-product-product-variants.png)

When a customer selects the `Black` color and the `S` size, Customer's Canvas selects the `Black/S` product variant.

Read more about product variants properties in the [Product variants](https://customerscanvas.com/docs/hub/admin-guide/pim/variants.md) article.

### SKU

*SKU* stands for stock keeping unit. Each product variant has *SKU*. SKUs allow you to:

* Account your merchandise in a warehouse
* Add your product to a cart on your storefront

Read how to set SKU for your product variants in the [Product SKU](https://customerscanvas.com/docs/hub/admin-guide/pim/variants.md#sku) paragraph.

### Availability

Sometimes you may find some product variants out of stock. For example, your white t-shirts of the L size are over. Your customers can't select such a variant to add to a cart.

In Customer's Canvas, you can manage the availability of a product variant by the **Available** property. Learn how to do this in the [Variant Availability](https://customerscanvas.com/docs/hub/admin-guide/pim/variants.md#availability) paragraph.

## Assets

*Assets* are files for personalization purposes. They can be divided into groups:

- Graphics: `designs`, `mockups`, and `images`.
- Visual elements: `fonts`, `color profiles`, and `documents`.

![Assets.](./images/what-is-product-assets.png)

### Designs

When customers want to buy your product, they personalize *designs*, and then you print this design file for a customer.

Let's see an example. This is the design of a brochure.

![Design.](./images/what-is-product-design.png)

Learn more about designs in the [Designs](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/design.md) section.

Customer's Canvas suggests you several tools to create a design:

* Adobe Photoshop
* Adobe InDesign
* Template Editor

You can learn more about creating designs in the [Designer's Manual](https://customerscanvas.com/docs/hub/designers-manual.md) section.

### Mockups

*A mockup* is a realistic image of your product. After the personalization process, customers can see how the result looks like on the surface of a product. Learn more about mockups in the [Importing mockup files](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/mockups/importing-mockups.md) article.

![Mockup](./images/what-is-product-mockup.png)

You can create mockups only in the PSD format in Photoshop in the PSD format. To learn how to create mockups, read the [Creating mockups](https://customerscanvas.com/docs/hub/designers-manual/mockups/pim-mockups.md) section.

### Images

You can organize a collection of images, clipart, and photos for your different purposes. Read more in the [Images](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/images.md) article.

### Fonts

You can add text to your designs. You need to upload fonts before creating a design in Template Editor or import PSD or IDML designs.

:::note
Customer's Canvas supports the TTF and OTF font formats.
:::

Learn more about fonts in the [Fonts](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/fonts.md) article.

### Color profiles

Customer's Canvas uses color profile files in the ICC and ICM formats. They are used in color management when it is necessary to convert color spaces defined for graphic elements or the entire design, for example, from RGB to CMYK. Your account already has pre-installed universal color profiles. However, to achieve accurate color conversion, you may need to upload color profiles for your specific printing equipment.

Read more about color profiles in the [Ccolor profiles](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/color-profiles.md) article.

### Documents

In Documents, you can store any files (i.e. images, archives, etc.). However, Customer's Canvas uses the **.json**, **.xml**, **.pdf**, and **.tgset** files for setting up integrations and products.

For packaging, you need to connect die cut models when defining products. These models are saved in PDF documents.

For classifying design elements, setting the properties of these classes, Customer's Canvas uses toggle sets. They are saved in the JSON format with **.tgset** extension.

Learn more about creating ang using documents in the [Documents](https://customerscanvas.com/docs/hub/admin-guide/manage-assets/documents.md) section.

## Connecting assets

Designs and mockups provide visualization of a product in a storefront. To make this happen, you must connect them to your product.

When you connect assets to a product, you select option values for an asset.

For example, the green-s.png file may represent the `Green` and `S` option values.

To learn how to connect assets to a product, read the [Connecting assets to products](https://customerscanvas.com/docs/hub/admin-guide/pim/connecting-assets-to-products.md) article.

## Workflows

A *workflow* configures a *personalization process*. This process defines how your customer will personalize a product.

![An example of a workflow.](./images/workflow-demo-1.gif)

Customer's Canvas allows you to create your own personalization processes for your product in *workflows files*. These are JSON files, where you can define *steps*, *widgets*, and additional data.

Read more about workflows in the [Workflows](https://customerscanvas.com/docs/hub/admin-guide/workflows.md) section.

## Projects

Customer's Canvas creates *projects*, when your customers create an order. A project keeps the result of personalization process.

In a project, you can see information about the order:

* Status of this project
* A customer's name
* Dates of creation and last modification
* Your integration
* Order line item
* Pipelines
* High-resolution print file

Read more about projects in the [Projects](https://customerscanvas.com/docs/hub/printer-guide/projects.md) section.

## Pipelines

*Pipelines* define what happens to an order when a customer adds a product to a card. They are a sequence of tasks. You can see your pipeline in your project.

A pipeline may consist of:

* Rendering a PDF file
* Post-processing the PDF file
* Delivering the result and so on

![How pipelines look.](./images/what-is-product-pipeline.png)

A pipeline is a JSON file containing *tasks*.

Read more about creating a pipeline in the [Pipelines](https://customerscanvas.com/docs/hub/printer-guide/pipelines.md) section.

## Integration

You can integrate Customer's Canvas to your custom storefront or to such e-commerce systems as `Shopify`, `WooCommerce`, `nopCommerce`, and `Magento`. If you have a custom storefront or work in other e-commerce system, read the [Developer Center](https://customerscanvas.com/docs/hub/dev-center/frontend-integration.md) section.

### Connection to storefront products

To make a Customer's Canvas product work in your storefront, you need to establish a connection between the Customer's Canvas product and a storefront product. For setting up this connection, please refer to the articles [Product connections](https://customerscanvas.com/docs/hub/admin-guide/pim/connections.md) and [Connecting products to an online store product](https://customerscanvas.com/docs/hub/admin-guide/product-specification.md#connecting-to-an-online-store-product).

### Product links

A *product link* is an implementation of a PIM product with a predefined set of options. Read the [Product links](https://customerscanvas.com/docs/hub/admin-guide/pim/products-links.md) article to set up a product link.

Product links allow your storefront product to use properties from your Customer's Canvas product:

* Options and option values
* Product variants and their settings
* Connected designs and mockups
* Workflow
* Pipeline
* SKU