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.
Sample product image folder (XBOX Controller)
Watch this video or follow the steps below to learn how to create a simple custom product.
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):
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 Panel:

FAQ: In a panel could there be only 1 element chosen (when I press another one, regardless of the category, it deselects the previous one and chooses the new one).
For example: see picture 1; if I press on the simple round black icon, could all the other be deselected automatically?
Inside of the categories edit menu, you can set up Conditional Logic and Additional Rules for clearing previous / subsequent options in the same Panel and other Panels.
To reorder the panels follow these steps:
Create a New Category:
Available Customization Types. Category Types:
Color Thumbnails (click to learn more): Product options listed as HEX color thumbnails. (i.e: Colors)
Image Upload (click to learn more): Allow customers upload and preview an image in a pre-defined position. (i.e: Logos, Artwork)
Printable Areas (beta): Allow customers upload and preview an image in a pre-defined position. (i.e: Logos, Artwork)
Canvas Recoloring (click to learn more): Recolor product component layers uploaded in grayscale on the fly using HEX. (i.e: Colors)
Text Monogram Field (click to learn more): Allow customers to enter a short text w/ preview in a pre-defined position.
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.
Clickable Preview Areas: Highlight customizable areas on the product preview
Create 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.
Comments
0 comments
Please sign in to leave a comment.