Overview of Custom Product Builder Interface

Welcome to the Custom Product Builder. 

We are glad that you are with us!

Let's Start!

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 Step
• Adding and Setting up a Custom Option
• All types of Custom Options                                               

INTERFACE OVERVIEW.

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.

Let's fill in the following fields:

1. Import Data From Another Product. If you want to copy your existing product, just load here the JSON file:

Don't check this box, if you want to create a new Product.

2. Product Title. Enter here your product name.

3. Product Description. Describe your product in this field. This information will be shown on your Product page on Shopify.

4. Product Base Price. Enter your base unit price here.

5. Base Product Image For Collection Pages. This image will be uploaded to the default Shopify product media section. 

This information will be shown on your Product page on Shopify. You can always change this info or replace the image later. 

After everything is filled in, click CREATE and wait for a little.

Let me introduce you to the main product setup screen:

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

2. Theme. Activating the required theme.

3. Product. Allows you to go to the product page from the Shopify collection

4. Preview. Go to the 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.

5. Steps. All your tabs, categories, and options will be displayed here.

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

7. Reorder mode. Allows you to change the order of these elements.

8. Enable Summary. If you enable this option, the last tab of your product will be “Summary”.

9. Add the next Step. Press to add the first tab. We will take a closer look at this step in the next section.

10. Admin mode. When Admin Mode is off, you can view and evaluate how all your settings work.

11. Help. By clicking on the "help" button, you can find the documentation and get help from the technical support of our company.

12. Your First Step. Edit, copy or remove it here.

13. Add Custom Options. We will take a closer look at this step further.

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

TO KNOW HOW TO CREATE YOUR FIRST PRODUCT CLICK HERE.