In this article we will cover:
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.
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.
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.
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).
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.
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
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:
Change order of forms:
- Click on Form tab
- Enable Reorder Mode
- Drag customization to reorder position within a panel.