Widget Layers

Widget layers is a feature to give customer have ability designing products by themselves. The customer can choose their product color, inserting text and image and much more. Without it we can’t design our product, so this part is very important.

Widget layers have 3 main menus. There are front side, back side and preload element. For front side is used to design front product. There will be 4 part to design front product: front main, front base, front transparent, and front mask.
Front main: this part is to see how our product looks like. this part at the bottom product.
Front base: front base is used for coloring product, without it we can’t give color to the product.
Front transparent: this part is used to give product effect such highlight, shadow, and another effect.
Front mask: this part is used to make editable area boundaries.

The back side also has four-part like front side. for last part preload element, we use this for the product to has an ability uploading customer image or logo and also give a text to the product. preload element has two type , one is text and the other one is an image.

We can put preload image and text on front side and back side area. Or you can set to one side front area only or back side area only. The most important thing for this preload image or text we have to configure it properly. To make preload text, click on the text then the configuration will show up like the image below :

Area: enter the area you want to put this preload for front area or back area
Element name: enter a title for this element this field is required.
Content: if you want to add some text just input the content if not leave it blank.
Font family: you can choose which font you will use for this text.
Text align style: to make text align in left, center, or right.
Font size: size for your text font you will use.
Font weight: weight of the font can be normal, italic, and bold.
Position x: control the position text where the text will appear by horizontal.
Position y: control the position text where the text will appear by diagonal.
Text color: default text will be used.
Line height: define line height for preload text.
Max chars: To set limit the character of text that can be used.
Removable: give customer ability to remove text.
Resizable: Give customer ability to resize the text.
Movable: text can be moved or not if yes that’s mean customer can move text to another place, if no it will locking text at that area only.
Text width: to limit width text area.
Opacity: visibility of text.
Curve: to set text become curve if yes text will be curved.
Reserve: ability to reserving text.

Preload image Configuration :

Area: choose the area you want to put this preload for the front area or back area.
Element name: enter the title for this element, this field is required.
Image: select the image you want to use.
Left: Image position diagonal
Right: image position horizontal
Removable: give customer ability to remove the image.
Resizable: Give customer ability to resize the image.
Movable: image can be moved or not if “yes” it means customer can move image to another
Opacity: visibility of the image.
Upload zone: customer can upload their own image.
Resize to width: resize the image with default setting or we fixed the width.