The Product Designer plugin for jQuery

– coding knowledge required

View jQuery Doc

Clothing Designer Demo


Try some API calls

The plugin comes with a great API. All options, methods and events are documented in the JSDOC.

Output console:



How To

In the following tabs you will see how easy it is to set up a fancy product for the product designer.

<div id="fpd">
  <div class="fpd-product" title="TITLE" data-thumbnail="PREVIEW.png">
    <img src="URL_OF_THE_IMAGE.png" title="TITLE_FOR_IMAGE" data-parameters='{"x": 100, "y": 200, "colors": "#D5D5D5", "price": 20}' />
    <span title="TITLE_FOR_TEXT" data-parameters='{"x": 150, "y": 250, "removable": true, "draggable": true, "rotatable": true, "resizable": true, "colors": "#000000,#ffffff,#990000"}' >Default Text</span>
  <!-- Here you can add more product divs -->

Frequent Asked Questions

You need to be familiar with HTML, CSS, jQuery (Javascript) and basic knowledge of PHP.