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 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 side bar.

fpd-sidebar fpd-sidebar-right

Main navigation will be displayed in a right side bar.
fpd-tabs fpd-tabs-side The tabs will be displayed at the left in the sidebar layout.
fpd-tabs fpd-tabs-top The tabs will be displayed at the top in the sidebar layout.
fpd-shadow-{1-9} Set a shadow. Choose between nine different shadow types, e.g. fpd-shadow-2
fpd-views-inside-{top, right, bottom, left} Choose between four different inside position for the view selection.
fpd-views-outside Sets the view selection after the product designer.
fpd-top-actions-centered Centers the top actions.
fpd-left-actions-centered Centers the left actions.
fpd-right-actions-centered Centers the right actions.
fpd-bottom-actions-centered Centers the bottom actions.

 CSS Classes - Helpers Add these CSS classes to the body
fpd-hidden-tablets Hides the product designer on tablets.
fpd-hidden-smartphones Hides the product designer on smartphones.


<div id="fpd" class="fpd-shadow-2 fpd-topbar fpd-tabs fpd-tabs-side fpd-top-actions-centered fpd-bottom-actions-centered fpd-views-inside-left fpd-grid-columns-2"></div>