Image Picker

Posted by:

You are here:
< Back

Image Picker

Add an image picker field to the product.

At the top of the settings you will find a preview of how your Image picker will be displayed



1-. Label: Label of the image picker.

2.- Image Width: Width of each image. Leave empty for auto, a number for pixels (100 is transformed to 100px) or percentages (e.g. 50%).

3.- Image Height: Height of each image. Leave empty for auto, a number for pixels (100 is transformed to 100px) or percentages (e.g. 50%) .

4.- Orientation: Decide the orientation of the image

4.- Allow Multiple: Allow users to select multiple images instead of only one.

5.- Allow Zoom: Allows you to zoom the image when hovering the mouse

Required: Make the field required, a required image picker needs to have at least one image selected.


1.- Label: Label of the Option

2.- Image URL: URL Of the image

3.- Price: Define the option price

4.- Sale: Define the sale price

5.- Price Type: Add a price type; a fixed price, a percentage of the original price or the fixed price plus an additional percentage

6.- “+” “-“Add or remove options


Hide the price of the image picker (it is still used to calculate the total).


Add an additional field to define the quantity of the image picker.

1.- Quantity Position: Define the position of the quantity field

2.- Default value: Edit the default quantity

3.- Quantity Label: Label for the quantity field

4.- Pleceholder: Text that is shown when the quantity field is empty

5.- Maximum Value: Maximum quantity

6.- Minimum Value: Minimum quantity


1.-Field Name: The field name is used when you wanto to access the field programmatically through the API

2.- Custom CSS: Add a classname to the field that can be used to style it using CSS

Description (Full Version Only)

1.- Descriptions: Description below the Image Picker

2.- Tooltip: Add a symbol next to the name of the Image Piker where a descriptive text will appear


1 Enable Show/Hide Condition

Allows you to show or hide the Image Picker only if the conditions are met.

2 Enable Custom Validations(Full Version Only)

You can create custom validations for each field. When a field is not valid it can display a configurable text bellow it.

3 Disable option depending on a condition(Full Version Only)

Enables or disables the selected options when the configurable conditions are met

4 Set the maximum number of items depending on a condition (Full Version Only)


A:- Images

Rounding: Defines the level of rounding of the images

B.- Label

Change the label

C.- Image Items

Change the images that the fiel uses

Custom Actions

Allow you to do advance configurations and actions with the field using JavaScript.


About the Author:

Im programmer working for an international company. I have programmed since i was 12 and i have done it professionally for 6 years. Programming for a company is fun and i have learned a lot of things but i have always been interested in running my own business so i decided to give it a shot doing what i do best, programming stuffs.
  Related Posts
  • No related posts found.