BYI – CANVAS RESIZE

Canvas Resize provides customization options so that the customers could resize the products as per their requirements from the product designer tool.

 

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

Backend Configurations

From the designer tool Backend, you can customize the canvas and set it as predefined for the different products. You can configure the Dynamic pricing for the canvas at the product level.

Manage Layouts

Before Canvas Resize configuration from the designer tool backend, you need to enable the canvas options at the store level (theme). For that, navigate to the PRODUCT DESIGNER –> Manage Layouts. [1] Edit the theme for that you want to enable the “Canvas Resize” options.

 

By clicking on the ‘edit’ icon, you will navigate to the Layout configuration options page. [2] You will see the two options under the “Canvas Resize” section:

 

– Enable Canvas Resize: By ticking the checkbox, you can enable the ‘canvas resize’ option on the product designer tool page.

– Enable Canvas Resize on Product Detail page: If you allow customers to set the size of the canvas from the product detail page, you need to enable this option. Tick the check box to enable.

 

Manage Predefined Sizes

Now, you can set the predefined canvas size for the different products. To manage the predefined canvas, navigate to PRODUCT DESIGNER TOOL Manage Predefined Sizes. [1]

 

You will navigate to the list of the predefined sizes. You can see the details in grid view such as Name, selected Unit, inserted Canvas Width & Height, Price, Status, Store View, and Action. [2]

 

To create a new Predefined Size for canvas, click on the Create Predefined Size. You will navigate to the “Add Predefined Size” page. You need to insert the following details: [3]

 

– Name: Insert the relevant name to identify. i.e., Postcard, invitation card, Standard, etc.

 

– Unit: Select the required unit for Canvas. i.e., Pixel, Inch, Centimeter, Millimeter, and Meter.

 

– Canvas Width: Insert according to the selected unit for Canvas Width.

 

– Canvas Height: Insert according to the selected unit for Canvas Height.

 

– Store Views: Select the store(s) on which the Predefined Size for canvas will be accessible.

 

– Price: Insert the price value that will be charged and added to the amount when the customers select the canvas.

 

– Status: Select the status to Enable/Disable the Predefiend Size for canvas.

 

After inserting detail, click on the Save button to add the predefined canvas. Thereafter, a new Predefined Size for the canvas can be seen in the list. Later, you can edit the canvas details as per need and you can delete any unwanted predefined size.

 

You will find the Products tab under the “Predefined Size Information” section. By clicking on the ‘Products’, you will see the products listing. You can filter the products and select them. [4]

 

You can select the product(s) under the specific Predefined Size. In this way, you can assign the predefined canvas by selecting the product(s). [5]

 

Click on the Save button to save the selected products for the predefined canvas. So, the canvas resize will be product-specific.

Stores Configuration

After configuring the Templates, you need to configure the DPI from the Stores Configuration. By scrolling down from the Configuration page, you will find the DPI Configuration option.

 

Set DPI: Select DPI for JPG image output.

 

After configuring the details click on the “Save Config” button to apply the changes.

 

Note: To convert pixels to inches, Centimeters based on the DPI, Formula:

Pixels ÷ DPI = Inches

Pixels ÷ (DPI * 2.54) =  Centimeter

Enable Canvas at Product Level

You need to configure the options at the product level to enable the canvas with defined pricing. Navigate to the CATALOG Products Edit the product. You will navigate to the product detail page whereby scrolling down, you will find the Product Designer tab.

 

To enable the Canvas Resize, you need to select the Custom Size in the “Type “(of product). You need to configure the following details at the product level: [1]

 

– Default Selected Units: Select the unit to calculate the canvas area.

 

– Default Predefined Custom Size: You will get the list of the predefined canvas list in which this product is selected.

 

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

 

– Dynamic Pricing: Once the Threshold limit is exceeded, the Dynamic price will be considered 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 be calculated automatically.

 

 

You can add the default height & width of the canvas for the selected product: [2]

 

– Maximum Canvas Width: Enter maximum size of canvas width according to selected unit.

 

– Maximum Canvas Height: Enter maximum size of canvas height according to selected unit.

 

– Minimum Canvas Width: Enter the minimum size of canvas width according to the selected unit.

 

– Minimum Canvas Height: Enter the minimum size of canvas height according to the selected unit.

 

After configuring the details click on the “Save” button to apply the changes.

Frontend View

You can add Canvas Size templates for different types of cards, letters, and cover pages. 

 

The customers can set the canvas (product size) to design the product if you have enabled the ‘canvas resize on the product detail page’ option from the Manage Layout. [1]

 

The customers will get the default predefined custom size as selected at a product level or insert the custom size.  [2]

 

The customers can insert the “Width” & “Height” of the canvas and change the size “Unit” in Pixel, Inch, Centimeter, Millimeter, or Meter as per the selected product’s canvas size. They can also enable the ‘aspect ratio’ by clicking on the tiny ‘lock’ icon to maintain the height & width in a proper format.

 

 

When you change the unit, the inserted value will be converted based on the DPI, formula:

Pixels ÷ DPI = Inches

Pixels ÷ (DPI * 2.54) =  Centimeter

 

Now, by clicking on the DESIGN IT button, the customers will be navigated to the product designer tool page where they can see the Canvas Resize on the header.

 

The canvas resize will appear as per the inserted details from the product detail page for Canvas. You can customize the height and width, size unit, and aspect ratio manually for product design. [3]

 

How will Flat & Dynamic prices be calculated?

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 the 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)

 

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

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

Canvas Resize- Mobile Responsive

Brush Your Ideas 3.0 “Product Designer Tool” is also responsive from mobile/tab devices. So, the customers can easily access the online store from Mobile or Tablet devices to design their desire products.

 

The customers can design their products from the Mobile/Tab device as well. They can access the Canvas Resize from their mobile/tab device easily.