How To Build A Custom PC

Hello, 

We are often asked how to create a custom PC page using Custom Product Builder. In this article we will cover this topic. Please note that some of our stores that use our application also have custom development. Therefore, the page layout may differ from what you see in this guide. We will use only CPB's basic functionality. Additional functionality/ layout edits require some custom code. 

*click on the image to enlarge (it will open in a separate tab)

1. Let's create a custom product. To create a new product, click the "+ Create new" button. 

2. Fill in all the required fields and click "Create".

3. Add as many steps as you need and name them. For our products, we will create 2 steps: "Customize" (Core) and "Accessories" (Additional)

4. Create a custom option. 

5. Depending on your requirements, you can use either "single choice" or "multiple choice" option types. You can read more about the difference between these types here. For our product, we will use a "single choice" - "image thumbnails" option type. Let's name the option and upload some images. 

6. If you hover on one of the choices, you'll notice that there are tooltips that show the choice title and its price. You can hide this part or display only one of the components by going to the option settings and editing the choice tooltips template.

7. Let's imagine that we need to create an option where we offer two different brands, and then we need to show a subbranch for each particular brand. Here is the step-by-step process:

- create a "Single Choice" - "Text Buttons" (or any other) option for the brand selection 

- create a "Single Choice" - "Image Thumbnails" option (as we did it for the first step) for each of the available brands 

- connect the second option with the first one with the help of Conditional Logic Rules. Check the screenshots below: 

Text button options:

Depended option (Conditional logic rules):

How it works: 

8. By repeating the same steps, create as many option as required, and will them with the corresponding components. Then repeat on the second step (Accessories).

Switch the admin mode off to preview the product.

You can also make some visual changes on the front-end. For example, changing the layout or the way the options are shown. All the changes are made on the top panel in the app ("Settings" and "Layout" sections):

Please note that the "Theme Customizer" section is currently available only for the "Aloha" CPB layout.

Here are the changes:

 

For more information please contact us at [e-mail]