Common Field Options
All variant Image
If you have multiple variants of the same size but different colors, prices, etc and you assign an image for each variant then there will be an option to set personalization for all variants.
Here is Shopify docs how to set variant images: https://help.shopify.com/en/manual/products/product-variant-images
Background image
It is the product images / uploaded image / blank image on what personalization will be appeared. By default, there is a list of your product images and a blank image to use. You can add image from Shopify admin as product/variant image or upload an image on the app by the right side plus icon.
The customer’s personalized png/pdf will be the same resolution of the background image. Apps loading time and UX depends upon the background image size/resolution.
Multiple views like Front, Back, Left, Right, Top, Bottom, or whatever you just need to change the background image for the respective fields.
Note: The app does not store product images that are from the Shopify server. Please update configuration if you remove/rename/update product image from Shopify server that are used as the background image
Personalization style
1. Direct field
In this option, all personalization options will display inside your theme’s product form and above the add to cart button.
Here is the output:
2. Button with Toggle
3. Button with Popup
4. Button with Popup (Exclusive )
Popup Windows can be full or partial based on App’s settings.
It will hide add to cart button with the same result of popup
Save Personalization
All customer’s personalization will be saved as Shopify cart item property followed to order line item property.
You will be able to access this information from the order admin page of Shopify.
You will get the following information based on your settings:
- Without Personalized Image
You will get all info in text format with customer’s uploaded file but not the previewed image
- With Personalized Image
You will get all info in text format with the customer’s uploaded file With the personalized image in png (72/300dpi), pdf (72/300dpi) & SVG (Based on App’s settings). Personalized image size depends upon background image.
- With Personalized Image & without Background Image
You will get all info in text format with the customer’s uploaded file With personalized image and design art without the background image. Personalized image and design size depend upon background image . Formats are in png (72/300dpi) , pdf (72/300dpi) & SVG (Based on common settings)
- Creating a New product with Personalized image
Each time Customer adds the product there will be created a new product with a personalized image. If you set price increase for any option then the price will be sum-up by a new price.
- Creating a New product with Personalized image & without Background Image
Each time Customer add the product there will be created a new product with a personalized image. If you set a price increase for any option then the price will be sum-up by a new price.
Hide Newly created product from Collection and Search Result
Or
Delete newly created product automatically after certain times
Preview Timing
It is the timing when the preview will be rendered.
1) When Page load and change input field: For direct field personalization type the rendering will be processed when the page loaded. If all variant image is checked then rendering will be responded with changing variant dropdown or changing variant image
2) Only When change input field: The rendering will be processed only when any field is changed by the customer. If all variant images are checked then rendering will not be responded with changing variant dropdown or changing variant image.
3) Only when clicking on the preview button: The rendering will be processed only when the preview button is pressed by the customer. The preview button must be enabled for this
4) No preview: No field will be previewed on the image
Label: A user-friendly text that we will show customers for this element in the options list. For example: “Add more text?”.
Angle: Defines how your pictures are portrayed with respect to the angle, i.e. 0 degrees mean they are upright, 90 degrees meaning they are will be tilted 90 degrees in either clockwise or anticlockwise direction.
Required Condition: Whether the field is mandatory or not.
Preview Type:
For text and image Field there is an option of preview type.
It has four values :
- Dynamic: Customer can change field value and preview available
- Mask only: Customer can not change field value but preview available for masking
- WaterMark: Customers can not change field value but the preview is available. The personalized image will not be saved with a watermark
- No preview: Customer can change field value but no preview available
Field Heading: You can set extra heading for the field above field label
Required Condition:
Whether the field is mandatory or not.
1) Required: This means it is mandatory.
Note: For Personalization type as direct field or toggle it may not work if your theme use drawer cart / Ajax
2) Optional: This means it is not mandatory. Customer can skip this field
Additional Charge:
Charge your customer for any option field.
- Flat rate: Price will be added at a flat rate. Available for all field like Text, Textarea, Image
- Percentage: Available for all fields like Text, Textarea, Image. It is the percentage of variant/product price selected.
- Per letter: For text field, it will calculate letters and multiply price. Available for Text and Textarea only.
Price Add
Float number only. No need to add any currency.
Option heading: You can set extra heading for the field above field label
Option Tab :
You can set tab for each field or multiple fields.
There are setting for the Horizontal tab / Vertical tab / Dynamic tab in common settings of the app.
For the tab icon, you need to set svg HTML code or base64 image with HTML img tag in option heading.
Instruction: Describe and instruct about your field. It will be shown as a tooltip, below the label or below the field based on common settings
X Position: You can manually move your element by X coordinate value
Y Position: You can manually move your element by Y coordinate value
Width: You can manually specify the width of the custom area
Height: You can manually specify the height of the custom area
Text Single line
With the Text customization, you can set up a textbox that customers can use to add text elements. This option can be useful in case the store owner wishes the client to add some text to personalize the product (e.g. the name to engrave on the cup)
Default Value: Default text that will be shown on your product.
Default Font: The font of the text. Upload your own font to use
Font Selection: If you want your customer to choose from a list of fonts you need to create a font group that you have uploaded. The list can be shown in the dropdown menu or thumbnail selection
Font Size: Size of the font. This has an auto-resizing capability when it reaches to the maximum size limit.
Default Color: Default color of the text.
Color Selection: Create color pallet and let your customer choose a color of their choice
Opacity: Add transparency to the background of an element.
Character Type:
- All: Customer will be able to input all alphanumeric and non-alphanumeric character
- Alphanumeric: Customer will be able to input Alphanumeric character only
- Alpha only: Customer will be able to input Alpha character only
- Numeric only: Customer will be able to input Numeric value only
Text Style: Helps you decide how you would like your text to appear either plain or monogram
Effect: You can set Neon glow effect / Stroke Text.
Case:
| capitalize | Transforms the first character of each word to uppercase |
| uppercase | Transforms all characters to uppercase |
| lowercase | Transforms all characters to lowercase |
Horizontal Align: For this input, you can specify how the text will be aligned only inside the textbox area. Note: This will not set the alignment of the textbox in relation to its layer or to the whole view.
Max Character: For the maximum character input, you can set the maximum character that the customers can enter.
Textarea / Multiline text
With the Textarea customization, you can setup a textbox that customers can use to add one or more textarea elements to their products.
Number of Lines: Allow the number of lines your customer can input.
Line Height: property specifies the height of a line.
List Item
Options List: Create a list and set from where customers can choose.
Control Type: Defines how you would prefer the options list to appear to the customer, e.g. as a drop-down or swatch.
Placeholder Text: Here, you can write a symbol/text that provides a temporary definition/representation for a product.
Checkbox
Default State: Whether the textbox is checked or unchecked.
Color Swatch
Default Image: The image that will be colorized. The image element should have a transparent background and whitish so colorization of the image will be proper
Layer: Whether the image object should be the top or bottom of the background image of the respective field.
Image Group:
You can allow the customer to upload their own image or give the option of a group of images to select from. When you set an image group to no then customers will be allowed to upload their own image. If you create a group image and set then all the images of the group will be shown in the front end to select from.
How to create a group image? Tutorial here
Crop: Crop from default image that will be used for recolorization.
Colour Selection: Create a color group or set a color picker by which customer can choose the color
Default Color: The color of the object when first loaded
Colour Selection Label: Label to introduce for color selection
Blending Type: Different types of colorization mode.
Image Upload / Image swatch
Default Image: Predefined image. Set blank if you do not want to show a predefined image. Upload more images to populate more.
Layer: Whether the image object should be the top or bottom of the background image of the respective field.
Image Group:
You can allow the customer to upload their own image or give them the option of a group of images to select from. When you set an image group to no then customers will be allowed to upload their own image. If you create a group image and set then all the images of the group will be shown in the front end to select from.
How to create a group image? Tutorial here
Aspect Ratio:
When you select a custom area for an image where customers will upload their own image you can set aspect ratio so that customers are allowed to crop the image with this ratio of width vs height so the clipped image must fit the entire area. If you set the aspect ratio to no customer will be able to crop to any dimension.
Crop: Crop from the default image that will be used.
Grayscale: Like the name, this defines the shade of gray in which you would prefer your images to be portrayed. The least being black and the highest being white. It is also known as achromatic.
Min Upload Width: Defines the minimum width in which the images customers upload on the app must be in order to ensure standard quality.
Min Upload Height: Defines the minimum height in which the images customers upload on the app must be in order to ensure standard quality.