> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://staging.chrisp.chat/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Setting up the modules

You can easily add the modules you need to the product designer. The modules can be set via the plugin options.

```
//will display in the order how you define the values in the array
var opts = {mainBarModules: ['products', 'designs', 'images', 'text']};
var fpd = new FancyProductDesigner(document.getElementById('fpd-target'), opts);
```

Available Modules

| Key | Explanation |
| --- | --- |
| products | The products module shows all products categorized in a list view. |
| designs | The designs module displays the designs you set in the product designer in a list view. |
| images | The images module allows to add custom images. It includes a multiple image uploader, Facebook and Instagram photos. |
| text | Via the text module the user can add custom text elements. |
| manage-layers | List all editable layers. |
| layouts | List all  [layouts that you have created.](https://support.fancyproductdesigner.com/support/solutions/articles/13000069008-layouts)  |
| names-numbers | Customers can enter multiple names or numbers. |
| text-layers | Manage style and content of text layers only. |
| save-load | Customers can save and load his designs. |