Resize designs

After a user has worked on their design, they sometimes want to change its dimensions. This lets the user:

  • Print their design at a higher (or lower) resolution.

  • Print their design on a different product.

This guide explains how to resize an existing design.

You can use this feature to upsell users to more profitable products.

How resizing works

Resizing a design works by creating a copy of an existing design with different properties (for example, a different width, height, etc). This prevents users from accidentally destroying their original design.

Step 1: Save the ID of the user's design

When a user creates a design, use the onDesignOpen callback to save the ID of the design. The following snippet demonstrates how to store the design's ID in a variable:

let userDesignId;
(async () => {
const api = await Canva.Partnership.initialize({
apiKey: '<partner_api_key>',
autoAuthToken: '<auto_auth_token>',
container: document.getElementById('container'),
});
api.showCatalog({
onProductSelect: (opts) => {
api.createDesign({
...opts,
onDesignOpen: ({ designId }) => userDesignId = designId;
});
},
});
})();

A real integration would likely save the design's ID in a database and associate it with the current user.

Step 2: Use the designId to create a new design

Later in the flow, such as when the user clicks a "Resize" button, call the createDesign method again, but pass the ID of the design into the method via the designId property.

api.createDesign({
designId: userDesignId,
partnerProductId: "<partner_productId>",
type: "<design_type>",
width: 7,
height: 5,
units: "in",
});

When the designId property is defined, the Partnership SDK uses the existing design as the starting point of a new design.

Limitations

  • Users can't resize their design from inside the Canva editor.