Most of the layout options can be easily set via CSS classes that you need to add the product designer element which is used in new FancyProductDesigner().
You can use the UI&Layout Composer on the official fancyproductdesigner.com website to generate some "Get-Started" code.
CSS Classes
| CSS Classes - Main | These CSS classes can be used with the product designer container element. |
| fpd-topbar | Main navigation will be displayed in a top bar. |
| fpd-sidebar | Main navigation will be displayed in a left sidebar. |
fpd-off-canvas | Main navigation will be displayed in a off-canvas sidebar. |
| fpd-shadow-{1-9} | Set a shadow. Choose between nine different shadow types, e.g. fpd-shadow-2 |
| fpd-views-inside-{right, left} | Choose between four different inside position for the view selection. |
Example
<div id="fpd" class="fpd-sidebar fpd-shadow-2 fpd-views-inside-left"></div>