An Upload Zone is a placeholder for a custom added element. Customers can click on an Upload Zone and add elements to it. An Upload Zone expects one element only, clipping (masking) is enabled automatically, so you can guarantee that the element (image, text, design) stays within the upload zone. Here is an example of a product with 3 different Upload Zones.
You can also utilize SVG images for the upload zone, which results in the shape of the SVG serving as a mask for any media element added to the upload zone.
Creating an Upload Zone
- First of all you need an image that should be used as placeholder. Check out this demo to see how a placeholder image could look like.
- Go to the Fancy Product Designer -> Product Builder
- Select a view of a Fancy Product
- Click Upload Zone in the Layers panel to add an upload zone.
- Enter a title and select the default image for the Upload Zone (if you add multiple upload zones please be sure to use different names for each individual upload zone).
Upload Zone Settings & Allowed Media Types
You will notice the tab "Upload Zone" in the sidebar when an Upload Zone is selected in which you are able to define the settings for the selected Upload Zone.
- Image uploads: customer can upload images
- Custom texts: customer can add a text in the upload zone instead of actually uploading an image
- Designs: customer can add one of your provided design
- Movable: decide if your customers are able to move the upload zone within the canvas theirselves
- Design Categories: if you want to provide designs in your upload zone you can specifically select categories for each individual upload zone, e.g., t-shirt front upload zone > offer logo designs, t-shirt back upload zone > offer lettering designs
- Scale Mode: decide if you want the uploaded element to perfectly fit inside the upload zone or if it should show as a cover and fill the entire upload zone
Scale Mode = Fit: the image, text or design will fit inside the upload zone, this means the entire element will be shown and there will be empty areas within the upload zone if it does not come with the same aspect ratio as the upload zone itself
Scale Mode = Cover: the entire upload zone will be filled with the image, text or design, this means that parts of the image will be clipped off if it does not come with the same aspect ratio as the upload zone itself
Upload Zones Always On Top
One global setting you might be interested in when it comes to Upload Zones is to keep the upload zones always on top of all elements. Settings > Advanced > Miscellaneous > Upload Zones Always On Top.
