Create a New Custom Product

In this article we will cover:

• Add Panels:
  • Reorder Panels
• Add Categories
  
  • Customization Types
• Add Custom Options
  • Default Options

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

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

PLEASE USE PNG IMAGES

IMPORTANT:  To ensure the custom product categories / options / custom layers 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. 

Sample product image folder (XBOX Controller)

 STEPS:
Go to Apps > The Custom Product Builder. Click ‘Create New Custom Product’ link

Fill in the basic product details (No worries, you can change them later from Shopify Product Edit page.

Click ‘Next’. This is The Custom Product Builder Admin Interface.

Add a base image (It can be a background, an outline or the base layer of the custom product. 

Create a New Tab / Panel:

Create a New Customization:

Choose the type of customization for this component.

Inside of the Customization edit menu, you can set up Conditional Logic and Additional Rules for clearing previous / subsequent options in the same Panel and other Panels.

Available Customization Types. 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. Learn more about Recoloring product image layers on the fly. (click to learn more).

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

Text Monogram Field (click to learn more): Allow customers to enter a short text w/ preview in a pre-defined position.

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 Order / 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.

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.

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)

Image Thumbnails: Product options listed as image thumbnails. (i.e: Collar Type, Diamond Cut)

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.

  

Create Options inside the created customization:

Set Default Options

 IMPORTANT:  To ensure the custom product categories / options / custom layers 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. In order to make sure the newly created product can be added to cart - please make sure that the price variants inside the product admin panel match with the prices on the frontend.  Read this article to learn more about variant generation. https://buildateam.zendesk.com/hc/en-us/articles/360028259451

To reorder the panels follow these steps:

You can reorder the position of categories within the same panel and reorder the preview layers.

In order to do so:

- go to Layers Tab

- click on the 'Reorder Mode' button

- drag layers to position them on top of each other to create a correct product preview image on the left side.

This article may be helpful:

Cloning custom layers

Change order of forms:

- Click on Form tab

- Enable Reorder Mode

- Drag customization to reorder position within a panel.