The Custom Product Builder For Magento 2 User Guide.

Size: px

Start display at page:

Download "The Custom Product Builder For Magento 2 User Guide."

Shanon Conley
5 years ago
Views:

1 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

2 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.

3 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.

Create Custom Layers Steps to create Path Custom Layer Click button. The form for creating a new layer has been opened.

Fill in the following fields in the Settings tab Title: some title Type: Path View: change view Panel to select: The panel to

4 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.

5 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.

6 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.

7 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

8 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.

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

9 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.

10 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

11 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

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.

12 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.

13 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

14 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.

15 Click Save and collapse settings by pressing the button

16 General Settings: Select currency Select layouts:

17 (columns tabs) (columns list) Preview Controls:

io email and request a free quote for custom development.

18 (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 us at 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.)

19 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

20 Result

$/*Loading*/.cpb-loading-label{ background: url(//cdn.shopify.com/s/files/1/1774/1587/files/southern_spun_logo_200x.png?$

21 /*Loading*/.cpb-loading-label{ background: url(//cdn.shopify.com/s/files/1/1774/1587/files/southern_spun_logo_200x.png?v= ); 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 { font-family: 'retina'; src: url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot? ");

22 src: url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.eot?%23iefix& ") format("embedded-opentype"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.woff? ") format("woff"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.ttf? ") format("truetype"), url("//cdn.shopify.com/s/files/1/1162/8602/t/8/assets/retina.svg? ") 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;

23 .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= ")!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;

24 /* 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;

25 .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;

26 .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- 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.

27 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=" target="_blank" class="icon-twitter" title="share this on Twitter"></a> <a href=" 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="

28 ></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- " title=" 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); )();

PUBLISHER SPECIFIC CSS RULES

PUBLISHER SPECIFIC CSS RULES Solita Oy Helsinki Tampere Oulu 26.1.2016 2 (24) Document History Version Date Author Description 0.1 August 17, 2015 J. Similä First draft 0.2 January 26, 2015 A. Autio Fixed