PrintXpand – Canvas Resize

Introduction

PrintXpand- Canvas Resize Add-on provides customization options so that the user can set the size of the Postcard or Cover letter from the product designer tool.

First, it is important to configure the Canvas Size from the backend.

Backend Configuration

From the Backend, you can add Canvas Size templates for different types of cards, letters, and cover pages. You can also set the configuration for the maximum canvas height & width, minimum canvas height & width, and Set DPI.

Manage Canvas Size Templates

You can set the default canvas size that can be used directly from the designer page. For that, add the Canvas Size Templates from the Product Designer -> Manage Canvas Size Templates.

By clicking on it, the list of the templates will be displayed (if already added).

To set a new Canvas Size, click on the Add Canvas Size button and you will be redirected to the “Add Canvas Size” page with the following information to insert:

– Template Name: Insert the relevant template name. i.e. Postcard, invitation card, etc.

– Canvas Width: Insert the pixel for Canvas Width.

– Canvas Height: Insert the pixel for Canvas Height.

– Store Views: Select the store(s) on which the Canvas Size Templates will be accessible.

– Status: Select the status to Enable/Disable the Design Canvas Template.

After inserting the details, click on the Save Canvas Size button. Thereafter, the new Canvas Size Template can be seen on the list.

Later, you can edit any template as you change and delete any unwanted template.

Stores -> Configuration

After configuring the Templates, you must configure from the Store -> Configuration.

Canvas Resize

By scrolling down on the Configuration page, you will find the Canvas Resize option. Here you can configure the validations:

– Enable Canvas Size Template: To display the Canvas Size Template on the Product designer tool, select Yes else No.

– Default Selected Unit: Select the ‘unit’ that you want to display in Canvas Size Templates on the Product Designer Tool.

– Maximum Canvas Width: Enter maximum size of canvas width in pixel.

– Maximum Canvas Height: Enter maximum size of canvas height in pixel. 

– Minimum Canvas Width: Enter minimum size of canvas width in pixel.

– Minimum Canvas Height: Enter minimum size of canvas height in pixel.

By scrolling down on the Configuration page, you will find the DPI Configuration option.

Set DPI: Select DPI for JPG image output.

 

Note: To convert Pixels to Inches & Centimeters based on the DPI, Formula:

Pixels ÷ DPI = Inches

Pixels ÷ (DPI * 2.54) =  Centimeter

Select Canvas option at Product level

You must select the “Customize Size” at the Product level if you want to keep the Dynamic Pricing

For that, go to any product for which you want the Customize the canvas size option, click on it, and by scrolling down, under the ‘Product Designer’ option, you will find the “Type” option and insert the following required details:

– Type: The Dynamic price will enable only if you select the Customize Size.

– Flat Pricing: Insert the Flat Price for the product until the Threshold value exceeds.

– Dynamic Pricing: Once the Threshold limits are exceeded, the Dynamic price will consider as per the square area.

– Canvas Threshold Value: Insert the value in the Square meter. Once this threshold value is exceeded, the dynamic price will calculate automatically.

 

Template & Default Width-Height selection

By scrolling down, you need to select the Canvas size template to display in the Canvas Resize option on the product designer tool and you can add the default height & width of the canvas for the selected product:

 – Custom Size Templates: Select the template(s) that you displayed on the product designer tool. If you have not selected any template, it will display all the templates to the customers.

 – Maximum Canvas Width: Enter maximum size of canvas width in pixel.

 – Maximum Canvas Height: Enter maximum size of canvas height in pixel.

 – Minimum Canvas Width: Enter minimum size of canvas width in pixel.

 – Minimum Canvas Height: Enter minimum size of canvas height in pixel.

 After configuring the details click on the ‘Save’ button to apply the changes.

Frontend View

Once all the backend configurations are done, your customers will get the Canvas Resize option under the designer tool panel on the right side of the product designer page.

Change size unit: Your customer can change the size unit in Pixel, Inch & Centimeter as per the selected product’s canvas size.

Select Default Template: If you’ve added the Canvas Size Template and enabled the Canvas Size Templates, your customer will get the option of Select Default Template, the customer can select the template as per the product design.

If you have selected the specific templates under the product, the customers will get only those canvas templates.

Insert Width & Height: You can also insert the Width & height manually.

– Insert Width & Height: You can also insert the Width & height manually.

The Product price will be calculated as per the Flat Pricing, Dynamic Pricing & Canvas Threshold values inserted in the backend in the product details page.

-> If the canvas area value is less than Threshold, the Product Price will calculate: Flat Price X Qty.

-> If the canvas area value is greater than or equal to the Threshold, the Product Price will calculate:
(l X b X Dynamic Price) X Qty

– Suppose from the backend the following Value are inserted:
Flat Pricing: 15
Dynamic Pricing: 35
Canvas Threshold Value: 0.05 (meter)

Flat Rate:

Now, if you inserted Width: 0.10 & Height: 0.15, Flat Rate would calculate.
Area: 0.10*0.15 = 015 which is less than the Threshold Value of 0.05 m.
So the Flat Rate will calculate Product Price (100€) + Flat Rate(15€) = 115€

Dynamic Rate:

Now, if you inserted Width: 0.42 & Height: 0.42, the Dynamic Rate would calculate.
Area: 0.42*0.42 = 1764 is greater than or equal to the Threshold of 0.05 m.
So the Dynamic Rate will calculate: 100€ + (0.1764*35€)*1 = 100€ + 6.17€ = 106.17