Product Option Customizer & Product Bundler: Preview Design Overview
Previewer feature under Product Option Customizer & Product Bundler allows you to showcase the customized merchandise to the customers before the products are physically produced. To start designing the preview page, go to Apps > Product Option Customizer & Product Bundler > Add product design to proceed.
Previewer Design Page Overview
- Options: options are the elements you can add to your Print file, they are often listed on the lower-left corner in the Add Option section.
Customize Option: Customize Option is a list of options that includes items you have chosen to provide for customization. - Add Option: The Add Option section lists out elements that you can add to your Print file, click on any element you want to add on the lower-left corner. You will see a list of all the options that Previewer supports. If you want to add an option to a group in Customize Option, click on the group and then the option to complete.
- Edit options: To edit an option in your print file, you can select the options in Customize Option to edit, and edit the details accordingly on the right side of the page.
- Design: To design your print file, aside from the function mentioned above, you can also adjust the elements in blue squares in the Print file section. You can change the sizes, the options’ position, and the display ratio. The display ratio can help you design your file more easily and in detail.
- Preview your design: To design the preview effect of your options, click on the Preview Settings button. You can then adjust the preview effect of any option. Your customers will see this effect when they customize the product.
Image Options
If you allow customers to insert images as one of the customized options, you can add an image option in the Add Option section. Product Option Customizer allows you to edit every detail of the Image Options including the title, notes, and set the column as required section.
You can choose to upload images from your computer or select materials from the Material Library. Each option supports a maximum of 100 images, you can bulk upload the images.
- You can change the uploaded image file name by clicking the edit icon, the edit icon occurs when the mouse is on the selected image item.
- Reorder the images by dragging them to the order you want.
- Adding an additional fee for the designated images is available. You can also apply an additional fee to all images you upload by clicking on Options feature dropdown and choosing Additional fee.
- You can associate the option value and the customized product itself, so whether the option value is selectable will depend on the inventory level of the associated SKU. When a customer places an order with this option value, the associated SKU will also be deducted. To do this, simply hover your mouse over the image, click the More ··· button, click Bind Product, select the SKU, and Confirm.
- If you would like to use color labels for the image options, you can move the mouse to the option and click on ··· > Color Card Option, and choose a color for the label.
- You can set an image as default so that when customers enter the product page, they will see the default image and the corresponding effect.
You can also hide the image option when you are not yet ready to reveal it but need it for preview. Simply tick on Hide this Option box under the "Options" feature. Please note that if the option is associated with other options, it might display on preview and print files.
You can choose to associate an option with another. The associated options will trigger the same sequence of option values when the current option is selected.
Text
When you allow your customers to customize their text, you can add the text option to the list.
Product Option Customizer allows you to edit every detail of text options:
- You can set the Title, Notes, required column, and reminder of the text box.
- You can preset the text content for consumers, and this text will render the effect.
- You can set the length limit of the text.
- You can set additional charges.
- You can adjust the printing effect of the text by setting the font and its size, color, alignment, etc. You can also choose from the various artistic fonts provided by Product Option Customizer, or upload TTF format font files.
Bend Text
Bend Text can add text effects if you would like to give your text a different design.
The option basically shares the same function as the Text option with an additional bend function within.
- After adding Bend Text to the option list, you can see a circle in the print file. The text content will be attached to the arc. You can adjust the curvature of the arc by adjusting the horizontal and vertical diameters of the circle.
- You can drag the angle button on the arc to adjust the display range of the text.
- You can choose the direction of the curve, either Protrusion or Indentation.
File Upload
If you allow your customer to customize the product by uploading their own photo/ image, you can enable the File upload option.
- You can set the title, notes, whether it’s a required column and additional fee for this option.
- Support PNG and JPG files and display image effects.
Dropdown
Product Option Customizer provides dropdown options, you can also set the title, and notes, whether it's a required column or an additional fee for this option.
- You can associate SKU with this option by clicking on the Add option under Associated Option. Please refer to the Image Option for detailed information.
- You can also hide this option under the Options feature. The feature works the same as the one under Image Option.
- You can choose to associate other options. The usage is the same as the one under Image Option.
Checkbox
Product Option Customizer allows the Checkbox feature. You can input any title you like for checkboxes as well as notes, whether it's a required section or an additional fee, and checked by default.
Group
Group is a collection of options, and is also called layout. For example, if your product allows users to customize 1 to 10 pet dogs, then each number can be set as a separate group. One dog is a separate group, and 10 dogs are other separate groups. It is recommended to first create 10 dogs as the first group, and then directly copy, delete, and adjust to configure other groups, which is more efficient.
Groups can be at the same level as options, or they can be one level above options, containing multiple options.
- You can add a group by clicking the group icon.
- You can choose to copy or delete a group. Move the mouse to the right side of the group in the option list, click on more icon [···], click Copy or Delete. When copying or deleting a group, all options under the group will proceed the action.
Design Print File
You can finely design the file size and the printing effects of each option in the Print file section.
- You can click on the edit icon in the upper-right corner of the Print file to modify the width and height of the file. The units can be selected from MM, INCH, and PX. You can also set the PPI parameter. Please note that the width and height should not exceed 16000 PX * 16000 PX.
- You can adjust the effects of the options including position, size, shape, and angles which include Image, Text, Bend Text, and File upload Options.
- If you want to hide an option temporarily from the file, you can simply drag it to the gray area so it will not be shown on the file.
- The proportional zoom button in the lower right corner of the Print file for a detailed view of the design.
- In the Print file, the layer order of each option is consistent with the order in the option list on the left. Click the option you want to adjust and drag the options to adjust the layer order.
Design Preview Setting
Switch to the Preview Setting tab to set how the product will be presented in the store.
- Click on the Upload Background Image button to upload an image for effect display, recommended size 1000 PX * 1000 PX.
- You can adjust the position of each option in the Preview Setting tab.
- If you don't want an option to appear on the preview page, simply move the options to the gray area outside the preview image.
Set Display Condition
If there are specific orders of your options, for example, when choosing an option the other options display all at once, undisplay all options when it's not chosen. You can then click on Set Display Condition for further setting.
Click on the Set Display Condition button above the option list, you can create an unlimited amount of conditions on the slide-out page on the right. The terms of the conditions are all [When a certain value of an option is selected, display other options].
Click on Save when the design is completed.
If your design template could be applied to various products, you can click Save the configuration template button to save the current design, so you can apply the template to future products to save efforts.