---
title: "Specifying Product Tags"
canonical: https://customerscanvas.com/docs/cc6/product-tags.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["6.15.0", "6.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Specifying Product Tags

**Applies to:** Customer's Canvas On-Premises; Design Editor 6.15.0, 6.x (may differ) · **Archived documentation**
 
You may want to tag your products with related details. Customer's Canvas supports two types of these details. First, you can provide them as PDF metadata in the hi-res output. Also, you can add tags as keywords to your product that can improve the product design process in the web-to-print editor.
 
## PDF metadata
  
Customer's Canvas allows you to save five properties in PDF hi-res outputs:
 
- Author
- Creator
- Keywords
- Subject
- Title

You can both predefine these properties prior to loading the editor and specify them at runtime.
 
To predefine metadata, set up the [hiResOutputPdfMetadata](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.irenderingproperty.htm.md) object for [rendering](https://customerscanvas.com/docs/cc6/client-config.htm.md) through either the `~\Configuration\clientConfig.json` file or the [IPdfMetadata](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.configuration.ipdfmetadata.htm.md) interface:
 
```
// Initialize the editor with the "Postcard.psd" template.
productDefinition = {
    surfaces: ["Postcard"]
};

// Set up PDF metadata.
configuration = {
    rendering: {
        hiResOutputPdfMetadata: {
            title: "The red postcard",
            keywords: "red,flower,postcard"
        }
    }
};

CustomersCanvas.IframeApi.loadEditor(iframe, productDefinition, configuration);
```
 
The [setPdfMetadata](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.runtimeconfiguration.setpdfmetadata.htm.md) and [getPdfMetadata](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.runtimeconfiguration.getpdfmetadata.htm.md) methods allow working with PDF metadata at runtime.
 
## Tags
  
To pass attributes, which you may need at the moment of processing the ordered product, you can use tags. Customer's Canvas provides two ways of defining these tags: by using the [Web API](https://customerscanvas.com/docs/cc6/web-api-for-manipulating-states.htm.md) and IFrame API.
 
The [Product.setTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.settags.htm.md) method allows you to specify tags through the IFrame API. To read these tags, use the [Product.getTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.gettags.htm.md) method. The following example shows how you can set product tags.
 
```
// The product is a postcard with a flower image in red colors.
var newTags = ["red", "flower", "postcard"];

editor.getProduct()
    .then(function (product) {
        product.setTags(newTags)
        .catch(function (error) {
            console.error("Setting tags failed with exception: ", error);
        });
    });
```
 
Here, you classify the product by the palette, image, and type.
 
Let us look at how you can set up [mockups](https://customerscanvas.com/docs/cc6/mockups.htm.md) based on product tags at runtime. In the following example, we set up a foreground mockup for photos and a background mockup for cups.
 
```
var frameMockup = {
    // Set up the foreground mockup "photoFrame.psd".
    up: "photoFrame"
}

var cupMockup = {
    // Set up the background mockup "paperCup.psd".
    down: "paperCup"
}

editor.getProduct()
    .then(function (product) {
        product.getTags()
        .then(function (tags) {
            if (tags != null) {
                // Set up the background mockup for cups.
                if (tags.indexOf("cup") != -1) {
                    product.currentSurface.setMockup(cupMockup);
                }
                // Set up the foreground mockup for photos.
                if (tags.indexOf("photo") != -1) {
                    product.currentSurface.setMockup(frameMockup);
                }
            }
        })
        .catch(function (error) {
            console.error("Getting tags failed with exception: ", error);
        });
    });
```
 
## See Also
  
### Manual
 
- [Introducing the IFrame API](https://customerscanvas.com/docs/cc6/handling-product-customization.htm.md)
- [clientConfig.json configuration file](https://customerscanvas.com/docs/cc6/client-config.htm.md)
- [Mockups](https://customerscanvas.com/docs/cc6/mockups.htm.md)
- [Web API for manipulating product tags](https://customerscanvas.com/docs/cc6/web-api-for-manipulating-states.htm.md)

### IFrame API Reference
 
- [Product.setTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.settags.htm.md)
- [Product.getTags](https://customerscanvas.com/docs/cc6/customerscanvas.iframeapi.objectmodel.product.gettags.htm.md)