Customization - Static Area For Previewing Uploaded Artwork

If you want to allow your users upload some image, for example, photo in a frame in a predefined static area, you need to create a custom layer and then associate it with a category 'Image Upload'. Images get passed to the cart as links to google cloud cdn with uploaded original files associated with the order. Both the links for complete product preview with the uploaded image and the original file of the uploaded image are available in order details as product properties.

Now the uploaded customer pictures can be colourized with a new feature in Custom Product Builder. 

There are two ways to use that feature. The first way is for a specific colour of uploaded images, the customer has no choice. The second way is for multiple colour options, the customer can choose the colour himself. 

Detailed instructions for both ways are provided below.

You can also watch our video instruction at the bottom of the page.

To use the first way, please follow these steps:

Fill in the following fields

Title: any title, the more descriptive the better.

Type: File upload.

You can also choose types of files that could be uploaded. This option is set for all types of images by default.

Save

Fill in the following fields

Label: some name, the more descriptive the better.

Save

Fill in the following fields and go to the Advanced tab

Fill in the following fields in the Advanced tab

• Colourize images from color picker [  o]  Enable.
• Rotate the image, change the scale and position on the set area
• Get Image from upload category [  o] Enable.
• Choose the panel, category and option that are responsible for uploading the images.
• Choose the colour.

Finish

IMPORTANT. You can give the static field any shape you wish adjusting points in its corners. Normally there are only 4 points, but you can set any number by clicking in the edges of the area. You can also use  "Round path tool" to get rid of the angles and "Hide Path tool" and hide the points.  

If you'd like to use the second way, please follow these steps:

In this way, we'll need the new option "Color Thumbnail".

Add all the colour options you need.

Fill in the following fields in the Advanced tab

• Colourize images from category [  o]  Enable.
• Choose the panel and category that are responsible for uploading the images.

Finish

IMPORTANT:  To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.

 

Create Customization Category

• Inside one of the Tabs create a new Customization. You can call it ‘Upload Your Artwork’.

• Create an option under the category i.e ‘Upload Image’.

• Click Save at the bottom of the page.

Create Custom Layer

• Click on the ‘Layers’ Tab in the top right corner.

• In the panel that opened up on the right side create a new custom layer and select the fill in the fields:

In General Settings:

• Add custom layer title. Be specific in naming them. The longer the better.
• Choose type 'Display artwork' for image upload and preview

• Position the image path on the product preview side using the corners. You can add additional anchor points with CMD (CNTRL) button. You can also remove anchors by clicking on an anchor while holding the Shift button.
• Move to the Advanced settings.

• Panel: the panel in which the necessary category is located
• Category: the category in which the required option is located
• Option: option with “File Upload” type only. In the advanced tab select the Panel > Category > Option (Image Upload) that was created in the first step.

• Click Finish.

The "Get Option Layer Image" option allows you to upload the image from the option to the static area.

1. Set an image as a layer in the "edit option".

2. In the layer do all the steps from the guide above, but instead of selecting "Get Image From File Upload Category" in Advanced option choose "Get Option Layer Image". You can choose multiple categories that will be used in this layer.

3. Don't forget to save changes.

Colours for the Artwork Fields for easier navigation

In case if you are using multiply artwork layers it may be difficult for you to navigate between them. To help yourself you can change the default, hover and active colours of layers. This option can be chosen in the "Advanced" tab of the custom layer.

On the frontend the users can now upload an image and do basic manipulations with it: zoom in / zoom out, fit into the area vertically or horizontally.

 

 

IMPORTANT:  To make sure the product categories/options are saved properly – the first click SAVE at the bottom of the category/panel/option screen, and only after that the SAVE button at the top of the page.