Canvas Adjuster Module
This module allows your customers to adjust the canvas dimension before or during designing, custom dimensions can be given or have them pick from a list of preset values you created for the particular product.
How to Enable and Configure Canvas Adjuster on a Design
To enable this feature, navigate to your designs page, simply click the Configure button on the design you like to assign this to. Then navigate to the Modules Tab. There you will find the Canvas Adjuster module. Click to enable it and the configuration panel shows up as shown below:
Title: Provide a title that users get to see on the panel. For example “Set banner dimensions“
Variation element selector: This is an automated way of syncing the size selector in your product page with the canvas adjuster module. Following the example link above, the selected size in the product page is automatically used by the design app without any additional integration. Also if the size is changed in the app, the product page selector is auto-updated. It is a two way sync and if you have a linked pricing, the price is also updated.
The value to be placed here is the jQuery element unique id or class for the size selector in your product page. This changes from theme to them and differs even on framework. Should you need help in accessing the element, do send us a ticket with a direct link to your product page.
- Lock Aspect Ratio: If this is enabled, then the values entered in by the customer are locked in proportion based on the default page dimension of the initial design
- Apply to all pages: When enabled, the dimensions applied to one page reflects across to all the pages when the customer changes the dimension.
- Clients can enter custom values: This gives your users the ability to enter in their own custom values as against choosing from your preset list.
- Add a Preset Value: When you click this button, you get to add a preset value to the list. In the front designer, your customers get to pick from this list. To delete any, just click on the red button with the cross against the row. Also remember, this value is set in the design’s default value. You can enter as many values or none. If none is provided, then the preset list is not shown.
Mask mode: This is an extension of the Photo mode feature. In the default Photo mode, the canvas is adjusted to fit the aspect ratio of the main photo. But with the mask mode enabled, the Photo is masked to fit the canvas area and the user is given tools to zoom and position the photo as desired.
Think of it as a Photo Print feature where customers can order photo prints in standard sizes by placing their photos on the canvas and have it fit that dimension. And when they choose a different dimension, the photo will adjust to fit the new size.
A sample can be found here: https://wp.demo.pitchprint.io/product/canvas-prints/
Dock panel: This docks the custom size panel on the top of the window for easy modification of canvas sizes as shown:
- Photo Canvas mode: When selected, this feature allows users to create a canvas photo by adjusting the canvas size to the ratio of their uploaded photos. It is suited for plain canvases without any item where users can simply drag their photos unto the canvas and the canvas will shrink or expand to the dimension of the photo placed on it.
- Capture Presets from Selector: When enabled the designer will open with the dimensions selected by the customer on the product page.
When the Photo Canvas option is selected, the custom size option is obviously disabled for that design since canvas ratio is strictly based on the uploaded photo.