Create a New Custom Product – Custom Product Builder / Quiz Support

Welcome to the Custom Product Builder.

We are glad that you are with us!

Let's Start!

Overview Video for product demo: https://www.corroon.com/products/design-your-own

In this article we will cover:

Creating a new product in Custom Product Builder App
Application interface
Adding a Main image
Adding and Setting up a Tab
Adding and Setting up a Category (Customization)
All types of Categories
Adding a Color thumbnail option
Adding a Layer for Colorization on the Fly
Adding a Text monogram
Reorder of Layers
General Settings (detailed guide)
Default Options (detailed guide)
SKU Management (detailed guide)
Font Manager (detailed guide)

*For highlighted points use additional guides with examples below

First, let's take a look at the steps that are the same for all types of products.

After installation, the CPB application will appear in the "Apps" tab.

We can now create our first product.

Fill in the following fields

Product Title: Your product name.

Product Description.

Product Base Price.

Base Product Image For Collection Pages.

Click "Next" and wait.

Let me introduce you to the main product setup screen:

Settings. You can change a huge number of settings here, specify which options should be active by default, activate and configure SKU management, add custom JS code and also there is a font setting here. https://buildateam.zendesk.com/hc/en-us/articles/360025823552
Theme. Activating the required theme.
Product. Allows you to go to the product page from the Shopify collection
Preview. Go to product preview page. Remember that the product must be active in your store for this. You can customize this on the product page from the Shopify collection (Step 3).
Forms tab. All your tabs, categories and options will be displayed here.
Reorder mode. Allows you to change the order of these elements.
Layers tab. Preview layers render on the product image side. All layers will be stored in this tab. There will be automatically created layers and created by you.
Admin mode. When Admin Mode is off, you can view and evaluate how all your settings work.
Help. By clicking on the "help" button, you can find the documentation and get help from the technical support of our company.
Enable Summary. If you enable this option, the last tab of your product will be “Summary”.
Add first tab. Press to add the first tab. We will take a closer look at this step in the next section.
First Image of your product. Add your product image. Note that this image will snap to the Front view. You can delete the base image from LAYERS > Background image. You can enable additional views in the General settings.
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 3500x3500 px) each more than 1 MB the custom product page will LOAD VERY SLOW and most likely the product won't add to cart.

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

PLEASE USE PNG IMAGES

These were the first steps, which are the same for everyone, let's now explore a few different examples of product creation.

Available Customization Types. Option Category Types:

Color Thumbnails (click to learn more): Product options listed as HEX color thumbnails. Used as a source for automatic canvas recoloring of uploaded custom layers. Recolor product component layer from 1 image uploaded in grayscale automatically into any color using HEX. For example fabric layers, texture, material, white mask layers. Check this step by step guide for a Sample product with pre-existing images - T-Shirt. In addition to offering pre-recolored product images, we will explain how to set up automatic coloring on the fly using built-in functionality.

Image Thumbnails: Product options listed as image thumbnails. Product preview images must be prepared upfront. (i.e: Collar Type, Diamond Cut). Check this step by step guide for a Sample product with pre-existing images - Xbox Controller. This example describes how to create a product using additional images in different colors.

Image Upload (click to learn more): Allow customers upload and preview an image in a pre-defined position. (i.e: Logos, Artwork)

Text Monogram (click here to learn more): Allow customers to enter a short text w/ preview in a pre-defined position. Check this step by step guide for a Sample product with pre-existing images - T-shirt. (Coming soon). T-Shirt with embroidery and a possibility of ordering a certain number of different sizes (Qty Breakdown).

Text Engraving For Wholesale / Qty Based Unique Text Per Each Item With Templates: Allow wholesale customers add unique engraving per each item in the order. (i.e: Trophies, T-shirts, Gifts, Business Cards)

Wholesale / Size Breakdown: With the help of this category, you can split the total qty into multiple qty fields based on size for example. Total qty will be calculated as a sum of several fields for entering the quantity. (i.e: Wholesale purchase order with different sizes, models, colors)

Quantity Breakdown: Offer price discounts based on the volume purchased. For example 10-100: $1, 101-200: $0.5 etc. Check this step by step guide for a Sample product with Qty Breakdown - T-shirt. (Coming soon). T-Shirt with embroidery and a possibility of ordering a certain number of different sizes (Qty Breakdown)

Price (Deposit) Percentage: You can set a deposit amount of the total product price as a percentage. In this case, the total_price parameter with the final price will be added to the product details in cart. It works only in one copy per product.

Additional price field: If you need to add a field where the customer can enter a certain amount, which will be added to the total amount and which will not change when the quantity of the product changes or when other options are selected, please use use this category.

Font Size: Used as a source for font size selection when assigned to a Text or Curved Text Custom Layer (i.e: Wholesale purchase order with different sizes, models, colors)

Font Type: Used as a source for font type selection when assigned to a Text or Curved Text Custom Layer (i.e: Wholesale purchase order with different sizes, models, colors)

Text Thumbnails: Product options listed as text thumbnails. (i.e: Sizes)

Dropdown: Product options listed as a dropdown menu (i.e: Countries, Sizes)

Long Text Monogram Field: Allow customers to enter a long text w/ preview in a pre-defined position.

Multiple Text Fields: Collect information from users without displaying it on the product. (i.e: Measurements)

Quantity: Quantity box.

Time & Date: Allow users to enter both date & time.

Time: Allow users to enter time only.

Date: Allow users to enter date only.

Autocomplete: Creates a field for text in which the user can search from available options by typing first laters or numbers.

Reorder Layers.

Under LAYERS tab in admin page, please enable [ o] Reorder Mode.

and position the layers in the correct order.

Please note that the lower the id number of the layer is - the lower the layer is located in the stack.

Now let's take a closer look at the Settings tab:

In these settings you will find 5 tabs:

General Settings.
Default Options.
SKU management.
Custom JS.
Font Manager.

Let's talk about everything in order.

1. Enabled Views.

You can choose what product views / angles you want to show by switching on the views.

Even though the views are named Front / Back / Left / Right / Bottom / Top - realistically, you can use the views for any purpose / angle of the product.

On the frontend the views can be switched by your users clicking on arrows or buttons on product preview.

You can choose what images to upload for each view inside of the options management panel:

*the interface may be slightly different

2. Other Settings.

As you can see, there are a lot of settings here.

Let's go through each of it.

1. Default layout. Display tabs as a single list or multiple tabs.

2. Default view. Indicate which view will appear first on the product page.

3. Default cart image. Specify which view will be displayed in the basket if there are no other settings.

4. View controls. Indicate how the views will be switched using arrows or buttons.

5. Currency. Specify what currency will be displayed on your product by default.

6. Language. Select in which language all elements of the CPB product page will be.

7. Main menu size ratio. Resize product preview area vs custom options space on store front. Customize how wide product preview is.

8-9. Min/Max Quantity. Specify the minimum and maximum quantity that your customers can order.

10. Preview pixel ratio. Adjust the quality of the image displayed on the product page. (0.2-3)

More fine tuning is also available for different browsers on different types of devices. Please read this guide: Customization - Fine-Tuning the Rendering Quality.

11. Increase dimensions of print file. Adjust the quality of the final product image. (0.2-3)

A. Use Sticky Preview. Make the image follow the page scrolling.

B. Collapsible Categories. Make your categories collapsible and expandable.

C. Show Reset Button. Allow the buyer to reset all settings with one click.

D. Hide Base Image. Do not display base picture on product page.

E. Add Summary Tab. Add tab "Summary" with all selected options.

F-G. Add Prev/Next Tab Button. Allow to switch between tabs by clicking on additional buttons.

H. Quantity Box. Activate the "Quantity" field to be able to indicate the quantity on the product page.

I. Redirect To Cart. Activate automatic transfer to cart after adding a product.

J. Display Product Title. Enable or disable the display of the product name on the product page.

K. Display Product Description. Enable or disable the display of the product description.

L. Display Thumbnails Slider. Activate the slider with all views of your product.

M. Display Product Media. Display media files from the Shopify collection on the product page.

N. Display All Views in Order Properties. Get the opportunity to download all views of your product from the order.

Now we come to the last two points of this tab.

1. Agreement Checkbox. Activate and complete this feature if you need to show some information to your customers for them to read and agree with before clicking the Add to Cart button.

2. Duplicate Panels to Other Custom Products. This function allows you to copy your customized tabs to other products.

Next tab is "Default Options". This feature allows you to specify in advance which options will be activated when viewing a product. All categories are initially set to "Not Selected", therefore no options are activated.

The next tab is dedicated to SKU management.

There are multiple ways to use SKU feature in CPB.

Track (deduct)inventory from existing Shopify products that are also a part of custom products.
Pass option SKUs as custom product properties. Added in square brackets [ ]. (No automatic inventory tracking - but can be used in your custom apps and ERPs)
Pass combined SKU to cart from all options. The SKU will be concatenated on the order level. (No automatic inventory tracking - but can be used in your custom apps and ERPs)
Generate Shopify products related to the custom product options to track (deduct) inventory. (in progress)

For more information please read this article: Inventory Management. SKU Management. Combined SKU.

Last tab is "Font Manager" for setting fonts. Sometimes customers want to choose a specific font for engraving, but there are too many types and It becomes so hard to choose. Now you can provide a limited amount of font types in Custom Product Builder.

Also you can add your own fonts and specify a price for any symbols. To do this, use the global settings.

IMPORTANT: To make sure the product categories / options are saved properly – first click SAVE at the bottom of the category / panel / option screen, and only after that the SAVE button at the top of the page.