Create New Custom Product – Custom Product Builder / Quiz Support

LET'S CREATE OUR FIRST PRODUCT WITH CPB.

Please watch the following video to get a better idea of custom product builder interface:

First of all, we need to add images* for all the views we need. To activate additional views, open the Settings:

Then, pls, go to General -> Enabled Views:

*Remember. Our plugin works with png images of the same size with transparent backgrounds. Recommended size for the PNG images is 1500px X 1500px. Squares work best in general. Each png image represents a transparent layer with the product component on the product preview. The software stacks images automatically – showing 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.

Please note that if you upload big images (for example 3500x3500px) each more than 1 MB the custom product page will LOAD VERY SLOW and most likely the product won't add to the cart.

So please use smaller images (up to 1500px). And the recommended size for the images is 500kb - 800kb.

Go to Layers -> Upload front view background image layer:

Load the image from your disk:

On the first page, we need to create our first Step:

Let's fill in the following fields:

1. Step Title: Set the Step name here. This is used as a section of your product, and also as a product configuration step. Look, pls, at the following example of Step using:

2. Step Description (optional): Some additional information about your product or special offers.

3. Switch Product View (optional): You can choose the view that will be displayed when you go to this Step.

4. Step Combined SKU Prefix: You can add an SKU prefix that will participate in combining the complete SKU code.

5. Require selecting all custom options in this step before going to next one: If you check this box, your customer will not be able to proceed to the next step until he chooses something on the current tab. He will see the following message:

6. This step requires at least one active option: Check the box here if you want this category to always have a choice.

7. Conditional Logic Rules: Here you can set the logiс for hiding or show actions for Steps/Custom options/Layers. For example, you can set: show red beads if your customer chose the red color (option with red color).

Here is our new first Step:

Then we have to add the first Custom Option to this Step.

We will add a Custom Option to change the collar color.

A little more about creating a Custom Option:

8. Title. Name your Custom Option here or leave this field empty.

Here are some examples of Custom Option's titles:

And here is the example with the empty Custom Option title:

9. Description.

9.1 Extra HTML Class For Styling Custom Option On Storefront (optional).

9.2 Custom Option Description.

10. Customization type.

Custom Option Type	Display as
Single choice. Only one item per category can be selected.	Text Buttons Radio Buttons Image Thumbnails Color Thumbnails Dropdown
Multiple choice. It can be selected several items in the category.	Text Buttons Checkboxes Image Thumbnails Dropdown
Input field.	Text Area Multiple Text Fields Qty / Number
Font Selector.	Font Family Font Size
File Upload.	Drop Zone
Date&Time Picker.	Date Picker Time Picker Date & Time Picker


Complex Customizations	Display as
Additional Price Field (i.e Tips)	Default
Auto-Generated Dropdown	Default
Bulk Order Form	Quantities
Deposit Percentage	Default
Price Formulas. Open Office Calc	Default
Printable Area	Popup Editor On Storefront Display Control Buttons In The Side Menu Layers List
Quantity Breakdown	Default