How can I setup design areas on the live preview?
To allow customers to customize a specific area on your product, you can set up a design area that can be referenced across different elements like text, images, or uploads.
Area layer
On the live preview section, create a new layer and select the type "Area":
Drag and resize the area box on the preview to your desired position:
Area connection
IMPORTANT: to use the design area on other layers, you have to connect to it from the other layer (e.g. Text layer) in the Advanced tab > Area=Box > Area layer: (select the area layer from the dropdown)
When a layer is connected to the design area, the box will be taken from the design area:
Layer ordering
The area layer always has to be added before the layer that is connected to it:
Show in preview
By default, the area layer is not visible in the preview. To show it, enable the “Show in preview” setting:
Visibility can be set to “Always” or "Interactive". The latter only shows the area layer when a connected layer is being dragged. This allows one to make it clear where the design area is, but not to show it all the time.
Snap to center
When a layer is dragged on the preview, the "Snap elements" setting can be enabled to automatically snap the layer to the vertical and horizontal center of the design area. This is useful to align text or images in the design area:
Bleed lines
One practical use of the design area is to show an area as bleed lines. Bleed lines are usually a bit more strict than the full design area. You can add a separate area layer just for the bleed lines:
Conditions
Area layers can also have conditions, for example, if you have different design areas based on a selected product option (e.g a phone model). You can set up a design area for each phone model.
Area key
To create a group of design areas, set a common Area key.
The other layers are then connected to the area key instead of the area layer name.
Area group
The design element are all connected to the same area key:
The conditions are evaluated for each design area, and the design elements are automatically connected to the matching design area.
Auto-reposition
When the connected area on a layer is changed, the layer will be repositioned automatically. For example, if you have placed a text layer on top of the current design area, and then the phone model is changed, the text layer will move to fit into the new design area.
Example Template
You view our example template here: Custom Phone Case