1) download it from git.buildateam.io, and then open a command line, where you should write the direction for your magento folder and ‘setup:upgrade’ and click enter 
2) After the process finished write the second command: ‘deploy:mode:set production’ 
,click enter and wait till the end of compilation.
3) After it successfully ended you should go to the admin panel of your magento store 
, enter the login and password, and you will come to the main page.
4) There you should go to ‘stores’ on the left menu (1), and click on ‘configuration’ button in the settings menu (2)
5) Make sure that Product Builder is installed successfully, you will see it in that page
You can also see the video instructions for installing The Custom Product Builder plugin for your magento store:
You can export created product configuration in Admin Panel Catalog/Products by clicking on «Export» button in «Custom Product Builder» field.
1) you should go to ‘catalog’ on the left menu (1), and there select ‘products’ button (2).
2) You will see a list of your products, and then you should press the ‘edit’ button on the right of the product 
3) You will see the settings of the chosen product. After that you should scroll down till you find the ‘Custom Product Configuration’ option (1), and then click on ‘import’ button (2) and select the file of the product which you’d like to import and click open. After that please wait some time for product to be loaded. After the load finished you will see the appeared third button of export .
4) Copy SKU of the product – you can see it almost on the top of the list of options (1), and then press save button on the left (2).
5) After that go to your magento store, and in the search bar paste the SKU you copied.
This is an example of exported JSON file:
{“settings”:{“isAdmin”:true,”theme”:{“id”:”alpine-white”},”views”:{“front”:true,”back”:false,”left”:false,”right”:false,”top”:false,”bottom”:false},
“currentView”:”front”,”currentTab”:0,”defaultView”:”front”,”viewControls”:”arrows”,”hasSummary”:true,”layout”:”col-tabs”,”custom”:{“js”:””,”css”:””},
“defaultOptions”:{},”cdnPath”:”https://magento.thecustomproductbuilder.com/media/”,”currency”:”USD”},
“data”:{“name”:null,”base”:{“price”:null,”image”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”}},
“panels”:[{“id”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”categories”:[{“id”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”zIndex”:1,
“type”:”text”,”options”:[{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},
“option”:{“data”:{“label”:”Maple”,”value”:”100″}},”price”:”0100″,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”m9bWDxXoVIYVzpvmZdR1SOTp”},
{“preview”:{“type”:”img”,”data”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null}},”option”:{“data”:{“label”:”Ash”,”value”:”50″}},
“price”:0,”inStock”:true,”logic”:{“rules”:[],”action”:”hide”},”id”:”AA_Sud03Y5zwseKovI6bQnDB”}],”title”:”Maple”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”WS0HXzoi1l78IZj4Vghw0y83″,”zIndex”:1,”type”:”text”,”options”:[],”title”:”Ash”,”description”:””,”clearNext”:””,”logic”:{“rules”:[],”action”:”hide”}}],
“title”:”Finish”,”description”:””,”logic”:{“rules”:[],”action”:”hide”}},{“id”:”xiHEOjpHEkAaR4awCFM9SBBJ”,”categories”:[],”title”:”hardware”,”description”:””,
“logic”:{“rules”:[],”action”:”hide”}}],”layers”:[{“panel”:”base”,”category”:”base”,”option”:”base”,
“preview”:{“front”:”blob:https://magento.thecustomproductbuilder.com/dc563d64-112f-40af-bca8-bb9a6fd6a93a”},”price”:null,”zIndex”:1},
{“panel”:”zNlxQyvJG1AJWrZiUvOkAfLz”,”category”:”qxzG5v9vUY8jK6oJD1HtqHvF”,”option”:”AA_Sud03Y5zwseKovI6bQnDB”,
“preview”:{“front”:null,”back”:null,”left”:null,”right”:null,”top”:null,”bottom”:null},”value”:”50″,”price”:0,”zIndex”:1}],”customLayers”:[{“id”:”rrfrGN7dXyL8eNfY16EaxaeI”,
“title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},
{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:false},
{“id”:”F5GcUDgpsNwv_tGU6LzoieX8″,”title”:null,”position”:{“x”:0.5,”y”:0.5},”selectPanel”:null,”points”:[{“x”:0.4,”y”:0.6},{“x”:0.6,”y”:0.6},{“x”:0.6,”y”:0.4},
{“x”:0.4,”y”:0.4}],”value”:null,”view”:”front”,”type”:”path”,”hoverColor”:false,”zIndex”:1,”logic”:{“rules”:[],”action”:”hide”},”active”:true}],
“price”:0,”isFetchingCategories”:true}}
In Admin Panel Catalog/Product add new product. By clicking on «Configure» button you can configure your custom options by adding new panels, categories and options.
Printable Areas offer an ability to add images and logos to a predefined area and manipulate those images and text inside of that area. This is something that is used for Promotional Products or Tshirt design prints.
Please note that this feature is under active development and we are working on making it better.
Enjoy Printable Areas on your product!
Also, you can create rules to specify behavior (when panels and categories are visible or hidden)
When someone sharing product by clicking «Share» button on frontend product page, the hash parameter «configid» is adding to current URL. For example, #configid=TEnEZ3ECIq9WHhixVOnKV6UJ
JSON configuration data is sending in request and saving in database in «cpb_product_config» table. We save «configid», «technicalData» (panel, category and option ids) and path to image.
And when someone opens shared link this stored data is loading on page.
Custom layers are one of the main parts of the system. With their help, you can create engraving on objects, upload a custom image to any part of the product, paint parts of the product without loading additional images. And much more …
Steps to create “Path” Custom Layer
Click button.
The form for creating a new layer has been opened.
Click button “Add New Custom Layer”.
The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Path
View: change view
Panel to select: The panel to which to go after clicking on the custom layer
Next, if you want to change the shape, the size of the layer and the position on the page, you must drag the layer or individual points with the mouse cursor. To delete unnecessary points, you need to press the Shift and click on it with the mouse.
Fill in the following fields in the Advanced tab
Use Color Hover – If you want to use color hover, turn on the switch. This functionality is only for painting the layer when it has hovered over the mouse
Image Upload – If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.
Fill in the following fields
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.
Click Save and collapse settings by pressing the button 
Steps to create “Text” Custom Layer
Click button.
The form for creating a new layer has been opened.
Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Text
View: change view
Panel to select: there is no need to fill
Text: add some text
Fill in the following fields in the Advanced tab
Font Size
Font Family
Font Color
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located
Option: option with “Text Field” type only.
Click Save and collapse settings by pressing the button 
If you want to add several fonts you must to create one Custom Layer for each font.
Steps to create “Image” Custom Layer
Click button. The form for creating a new layer has been opened.
Click button “Add New Custom Layer”. The new layer added. Click it in the Layer Selection Column.
Fill in the following fields in the Settings tab
Title: some title
Type: Image
View: change view
Panel to select: there is no need to fill
Image: You need to upload PNG image with transparency and image positioning
Fill in the following fields in the Advanced tab
Colorize image layer – If you want to change colors of any texture, for example, aquaprinting pattern colors on any thing, you need turn on the switch.
Fill in the following fields
Panel: the panel in which the necessary category is located
Category: the category in which the required option is located with “Color thumbnail” type only
Alpha Transparency: alpha transparency level.
Image Upload – If you want to upload some image, for example, print on a T-shirt, you need turn on the switch.
Fill in the following fields
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.
Click Save and collapse settings by pressing the button
Now, the functionality is ready to use. Switch colors and your image will be painted in the right color without the need to upload new images.
Overlaying textures
Changing the colors of individual elements
With the help of this instruction you can not just add text, but give the buyer the opportunity to choose from the options for color, size and font. We present you a powerful tool for working with text layers.
For most interesting ideas, you do not need more than one type of font design. And you need to perform just a couple of simple actions.
An example can be viewed from this link. The “Simple color” tab.
Sometimes it is necessary that there are a lot of fonts, colors and the possibility of resizing. In this situation, it takes a little longer, but the result is worth it.
You need to make Custom layer shown if the user selects the desired color, size and font
An example can be viewed from this link. The “Multi color” tab.
This description is just an example. The way you set it up depends entirely on your imagination.
