Add an image upload option to your option sets so customers can upload their own photos on your products.

To add an image upload option

  1. Create a new option set or edit an existing one
  2. Click Add option 
    
  3. Expand the newly added Option by clicking on it 
  4. Select Image upload as option type 
    
  5. Configure the options parameters

Option Label

The title of the option that will appear on your product page.
Something like "Add your photo", "Photo upload", or "Upload a picture" are the most used labels.




Help Text

A secondary text to give customers some extra information, tips or help.
It's a good place to guide customers on what types of files they can upload, or let them know the recommended size and quality of the photos.




Button Text

Text that will appear on the button. Something like "Choose file" or "Browse" will look good.




Button Class

To assign a CSS class to the button. Usually, the button picks up the CSS class of your Add to Cart button. If you want to apply a different class to it, just type the class name there.

Min. Width and Min. Height (px)

Type a minimum width and height if you want to limit the size of the pictures customers upload. This way you can make sure pictures have a minimum quality that will look good on products. It's especially useful if you are going to print the pictures customer's upload.
Minimum width and height are measured in pixels.

If photos uploaded don't reach the minimum requirements, customers will be encouraged to upload one that meets the requirements.




Required

The text input will be required to add the product to cart. This means the customer will have to type something in it to be able to make a purchase.
If the customer leaves the text input empty, it will let them know so they can fill it and add to cart properly.
An asterisk (*) next to the option's title indicates that the field is required.




Hide visually

Check it if you want to hide the option from the product page. It is useful if you want to have some predefined photo on the preview you don't want customers to change.
However, it is hardly used.

To assign a Customily Function to an image upload option

Once you have defined your option, you need to add a Customily Function to it.

Customily Functions are the way we assign actions to the options. It tells the option how to affect the preview. For example, in the case of image upload options, it tells it where the image the customer uploads will be placed.

To assign a Customily Function:
  1. Expand the Customily Functions section by clicking on it.
    
  2. Image upload options get automatically assigned an Upload Image Function since it's the only function available for this type of option. 
    
  3.  Assign the Unique ID of the element that will work with that function. 
    
    If you are not sure what the Unique ID for the element is, learn how to know the Unique ID of an element here.

To assign Conditions to an image upload option

Conditions create rules that will show or hide an option based on the customer's previous selections. With conditions you can, for example, show an option only if another specific option is selected.

To assign Conditions: 
  1. Expand the Conditions section by clicking it 
    
  2. Click Add Condition 
    
  3. Complete the condition's rules
    • Select action Show / Hide 
    • When select option (the option that will generate the condition)
    • is -> select a value from that option



Once you have finished configuring your image upload option, you can move on to adding more options to the option set. If you are done with all the options just hit save and go back to the main menu.

Share

Was this article helpful?

1 out of 2 found this helpful
Have more questions? Submit a request