ve added an 'image element' as my product image and above it I have added 2 'upload zones' for embroidery patches.

I have set the bounding box on the specific area of the image element and when I set bounding box mode to 'cliped, it crops the bounding box area, and the product image got cut out. see:

When I set it to 'Limit Modification' or any other option except 'Clip', it does display the full image but bounding box does not seem to work, as the user-uploaded image/text can be placed anywhere in the full canvas. see: 

Please let me know how can I set a specific area on my product only where the user can add images or text.
Thank you.

You are doing it incorrectly, there is a bit difference between a bounding box and an upload zone. Please read the guides to get this done correctly. 

How to use a bounding box?

https://support.fancyproductdesigner.com/support/solutions/articles/5000548169-using-bounding-boxes-to-restrict-elements

How to use Upload Zone? 

https://support.fancyproductdesigner.com/support/solutions/articles/5000582928-creating-an-upload-zone#:~:text=An%20Upload%20Zone%20is%20a,stays%20within%20the%20upload%20zone.

I have seen the bounding box video 3/4 times, on 3:55 in the video, it started explaining if you want to set a bounding box for custom elements, you have to set it from settings, but Every product has different size & shape so how can we set a fixed bounding box from settings?