Bounding Boxes in Fancy Product Designer | FPD Plugin

How to use Bounding Boxes in Fancy Product Designer | FPD Plugin

Fancy product designer is the best online product customization plugin. The FPD plugin has a lot of features that allow customers to do product customization like upload images, add text, choose from available designs, and many more. The Bounding Boxes in Fancy Product Designer | FPD Plugin is a very helpful feature to restrict customers to do customization in a specific area.

Modes of Bounding Boxes in Fancy Product Designer – FPD Plugin

Clipping:
The uploaded image or design will be clipped into the bounding box

Inside:
The uploaded image or design needs to be inside the bounding box otherwise a notification popup to inform you that you are going outside the restricted area.

Limit Modification:
The customer must do modifications inside the bounding box. For example, we allow the customer to upload images or designs and text on the front pocket of the t-shirt. Then he must follow the instructions.

None:
Customers are free to do customizations anywhere on the product they want.

There are two different ways to use the Bounding Boxes in Fancy Product Designer | FPD Plugin

1- Custom Bounding Box (Manually)
2- Using another element as a bounding box

1- Custom Bounding Box

If you want to use the bounding box manually. You would need to set the width and height of a bounding box manually. To do this, go to FPD Plugin product builder. Select the base layer and the bounding box section. Now here you can put the width and height of a bounding box manually. Also, the bounding box mode.

 

Bounding Boxes in Fancy Product Designer | FPD Plugin

 

2- Using another element as a bounding box

An image can also be used to restrict customers in the specific bounding area. Again go to FPD Plugin product builder. Add a transparent background image and name it as something like (bounding_image_area) is suppose to be a code for restricting every image customer uploads into the specific area. You can simply adjust where you want. Repeat the same step for text restrictions.

 

How to use Bounding Boxes in Fancy Product Designer - FPD Plugin - Using another element as bounding box

 

After you adjust the bounding box area. Open the relevant product in woocommerce. Under fancy product designer > individual product settings. Then image properties and enable these settings. Put the code we created for images in the bounding box target. Repeat the same step for custom text.

 

Using another element as bounding box in fancy product designer

More about:

How to use Fancy Product Designer WooCommerce WordPress

Leave a Reply