The Custom Product Builder For Magento 2 User Guide. Link to User Guide Online

Revolutionize your online store! Offer an easy and engaging way to order custom made-to-order

products.

Our plugin works with png images of the same size with transparent backgrounds. Each png image

represents a layer on the product preview. By stacking images representing different product parts

on top of each other you can create a full representation of the product and offer a true ‘Build Your

Own Product’ experience.

This app is very flexible and can work with almost an unlimited number of product types: jewelry,

apparel, cars, accessories, musical instruments, furniture, sports equipment etc.. We believe that the

world would be a better place if more people could order custom products.

Here are some examples of the plugin in action:

● Custom Hat

● Custom Made Jewelry

● Custom Made Controller

● Build Your Own Controller

● Custom Leggings

● Build Your Own Sunglasses

● Build Your Own Shoes

● Personalized Pouch

CONFIGURE PRODUCTS 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.

CONDITIONAL LOGIC Also you can create rules to specify behavior (when panels and categories are visible or hidden)

CUSTOM LAYERS 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 …

Types of Custom Layers 1. Path – This type is used to create click areas and load custom photos on a product, bounded

by the layer area. 2. Text – This type is used to add text to the product. For example, an inscription on a T-shirt or

other object or engraving.

3. Image – This type is used to add image whose color can be changed later. Or adding textures to objects whose colors can also be changed.

Create Custom Layers 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 “Image 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.

Layer colorization and on the fly 1. Create a new custom layer with “Image” type. How to do this, see the tab “Custom Layers”. 2. Create a new Panel with the “Color thumbnail” category and add some color options. 3. Enjoy the result

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

Inserting user image 1. Create a new custom layer with “Path” type. How to do this, see the tab “Custom Layers”. 2. Create a new Panel with the “File upload” category and add file upload option. 3. Enjoy the result

Custom user text 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.

One color, one font, one size. 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.

1. Create a new custom layer with “Text” type. How to do this, see the tab “Custom Layers”. 2. Create a new Panel with the “Text field” category and add text field option. 3. Enjoy the result

An example can be viewed from this link. The “Simple color” tab.

Multi color, multi font, multi size. 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.

1. Create a new custom layers with “Text” type. For each color a separate layer. For each font a separate layer. For each font size a separate layer. How to do this, see the tab “Custom Layers”.

2. Create a new Panel 3. For color switching create a new “Color thumbnail” category and add color thumbnail options. 4. For font switching create a new “Image Thumbnail” category and add image thumbnail options with

uploaded samples of font images. 5. For size switching create a new “Text list” category and add text list options. 6. Create a new Panel with the “Text field” category and add text field option. 7. Set up the rulers in each Custom Layer

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.

Click Save and collapse settings by pressing the button

General Settings:

Select currency

Select layouts:

(columns tabs)

(columns list) Preview Controls:

(buttons)

(arrows) Change Themes:

Customize CSS If you know CSS, you can customize the themes by following this link. You can override theme classes and ids with custom CSS there. You can also email us at support@buildateam.io email and request a free quote for custom development. If you want to customize your loading screen you need to make a few simply steps 1. Go to your admin panel and go to the store setup 2. Upload a new image that you want to use (I used the URL of our logo as an example.)

3. Then go to your admin panel and go to the store setup 4. Go to Edit Code and find ‘customproductbuilder.css’ file there 5. Paste the section /*Loading*/ with your image URL there and save changes

Result

/*Loading*/

.cpb-loading-label{

background:

url(//cdn.shopify.com/s/files/1/1774/1587/files/southern_spun_logo_200x.png?v=1494

899763);

background-size: contain;

background-repeat: no-repeat;

text-indent: -400px;

display: block;

color: rgba(0, 0, 0, 0);

margin-top: 15px !important;

}

Examples of Custom CSS

@font-face {

font-family: 'retina';

src:

url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot?86063878728061505

00");

src:

url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot?%23iefix&860638787

2806150500") format("embedded-opentype"),

url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.woff?8606387872806150

500") format("woff"),

url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.ttf?860638787280615050

0") format("truetype"),

url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.svg?86063878728061505

00") format("svg");

font-weight: normal;

font-style: normal

}

/* Please use this file to customize the syles of the custom product builder */

::selection {

background: #FFF7B6;

color: black;

}

#product-builder {

width: 100%;

min-height: 600px;

position: relative;

border: none;

font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;

}

.product-builder {

background: transparent !important;

}

.product-builder .product-name{

font-size: 24px;

line-height: 1.5em;

margin: 14px 10px;

clear: both;

font-weight: normal;

padding-top: 4px;

text-transform: uppercase;

margin-bottom: 25px;

}

.product-builder .builder-wrapper {

background: transparent !important;

flex-direction: row-reverse !important;

}

.product-builder a, .product-builder p, .product-builder h1,

.title>div,

span.price {

color: white !important;

}

.builder-layout {

margin: 0 !important;

padding: 0px !important;

}

#loading{

background:

url("//cdn.shopify.com/s/files/1/1162/8602/files/website_background_2449dee7-1c79-

405c-b490-c20a387477c7_2000x.jpg?v=1503496313") !important;

z-index: 9999 !important;;

color: #fff !important;;

}

#loading .content .ball{

background-color: #fff !important;

}

/*

Tabs

*/

.nav-tabs{

border-bottom: none !important;

}

.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container

.nav-tabs li{

padding: 10px !important;

}

.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container

.nav-tabs li a{

padding: 0 !important;

font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;

font-weight: bold !important;

font-size: 15px !important;

text-transform: uppercase !important;

color: #ffffff !important;

position: relative !important;

display: block !important;

letter-spacing: 1px !important;

padding-bottom: 8px !important;

opacity: 1 !important;

}

.product-builder .alpine-white .builder-layout .builder-wrapper .panels-container

.nav-tabs li.active a:after{

background: #416864 !important;

}

.tab-content{

padding: 10px;

}

/*

Panels

*/

.product-builder .builder-layout .builder-wrapper .panels-container .panel .description{

display: none;

}

/*

Categories

*/

.product-builder .builder-layout .builder-wrapper .panels-container .panel

.categories-container .category .title{

font-size: 19px !important;

line-height: 1.5em !important;

margin: 0 auto 15px !important;

clear: both !important;

font-weight: bold !important;

padding-top: 4px !important;

}

/*

Options

*/

.product-builder .option.option-type-select .option-value select{

padding: 6px 16px !important !important;

font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;

background: none !important;

border: 1px solid #666 !important;

border-radius: 0 !important;

font-weight: bold !important;

color: #ececec !important;

outline: none !important;

min-width: 215px;

}

.product-builder .option.option-type-img{

width: 80px !important;

height: 80px !important;

padding: 5px !important;

border: 1px solid transparent !important;

display: inline-flex !important;

margin: 0px 10px 15px 0 !important;

}

.product-builder .category-3gc4USis_GgvjR4AQ1s6AFr8 .option.option-type-img{

width: 70px !important;

height: 50px !important;

}

.product-builder .option.option-type-img.active{

border-color: #666 !important;

}

.product-builder .alpine-white .option.option-type-img img{

height: 100% !important;

width: 100% !important;

border: #e2e2e2 1px solid !important;

}

/*

Aside Submit Area

*/

.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions{

margin: 10px !important;

flex-direction: row;

border-bottom: 1px solid #ccc;

padding-bottom: 24px;

}

.product-builder .builder-layout .builder-wrapper .panels-container

.builder-actions>div{

padding: 0 !important;

}

.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions

.cart-container button{

background: #416864 !important;

border-radius: 5px !important;

float: right !important;

font-size: 0.9em !important;

margin-right: 10px !important;

text-transform: uppercase;

padding: 6px 16px !important;

}

.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions

.cart-container button:first-child{

font-weight: 600 !important;

margin-right: 0 !importnant;

}

.product-builder .builder-layout .builder-wrapper .panels-container .builder-actions

.price{

font-family: Futura, 'Century Gothic', AppleGothic, sans-serif !important;

font-weight: 400 !important;

font-size: 18px !important;

}

.product-builder .builder-layout .builder-wrapper .social-buttons{

color: #416864 !important;

margin: 10px;

}

.product-builder .builder-layout .builder-wrapper .social-buttons a{

font-size: 18px;

padding-left: 10px;

position: relative;

top: 2px;

cursor: pointer;

color: #416864 !important;

}

.product-builder .builder-layout .builder-wrapper .social-buttons

[class^="icon-"]:before,

.product-builder .builder-layout .builder-wrapper .social-buttons [class*="

icon-"]:before {

font-family: "retina";

font-style: normal;

font-weight: normal;

speak: none;

display: inline-block;

text-decoration: inherit;

width: 1.01em;

margin-right: .2em;

text-align: center;

font-variant: normal;

text-transform: none;

line-height: 1em;

position: relative;

top: 1px;

}

.product-builder .builder-layout .builder-wrapper .social-buttons .icon-facebook:before

{

content: "\ea90"

}

.product-builder .builder-layout .builder-wrapper .social-buttons .icon-twitter:before {

content: "\ea96"

}

.product-builder .builder-layout .builder-wrapper .social-buttons .icon-gplus:before {

content: "\e907"

}

.product-builder .builder-layout .builder-wrapper .social-buttons .icon-pinterest:before

{

content: "\e906"

}

.product-builder .builder-layout .builder-wrapper .social-buttons .icon-email:before {

content: "\e905"

}

Custom JS If you know JS, you can add custom JS that would load within the tool. You can manipulate DOM elements in a similar way that ‘Optimizely.com’ does it. It’s a very powerful tool that allows almost any type of theme customizations.

Examples of custom JS (function(){

function converPriceToKr(){

var price=$(shadowNode).find(".price");

var value=price.html().split("DKK")[1];

if(!value) return;

price.html(value+" kr");

}

setTimeout(function(){

var title=document.title;

var url=document.location.href;

var media=$("meta[property='og:image:secure_url']")[0].content;

var html='<span class="social-buttons">Share: <a

href="https://twitter.com/intent/tweet?text='+title+'&url='+url+'" target="_blank"

class="icon-twitter" title="Share this on Twitter"></a> <a

href="https://www.facebook.com/sharer/sharer.php?u='+url+'" target="_blank"

class="icon-facebook" title="Share this on Facebook"></a> <a target="_blank"

data-pin-do="skipLink" class="icon-pinterest" title="Share this on Pinterest"

href="https://pinterest.com/pin/create/button/?url='+url+'&description='+title+'&media='+media+'"

></a> <a target="_blank" class="icon-gplus" title="Share this on Google+"

href="'+url+'"></a> <a href="mailto:?subject=Thought you might like '+title+'&body=Hey, I was

browsing Hornskov København and found '+title+'. I wanted to share it with

you.%0D%0A%0D%0A'+url+'" target="_blank" class="icon-email" title="Email this to a

friend"></a></span>';

$(shadowNode).find(".builder-actions").after(html);

var title='<h1 class="product-name">Custom Hat</h1>';

$(shadowNode).find(".panels-container").prepend(title);

converPriceToKr();

$(document.body).on("PRODUCT_BUILDER_LAYER_UPDATE", function () {

setTimeout(function(){

converPriceToKr();

},40);

});

},500);

})();