Customizing the UI&Layout

Modified on Thu, 27 Jul 2023 at 12:30 PM

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-topbarMain navigation will be displayed in a top bar.
fpd-sidebarMain navigation will be displayed in a left sidebar.


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.


<div id="fpd" class="fpd-sidebar fpd-shadow-2 fpd-views-inside-left"></div>


Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons

Feedback sent

We appreciate your effort and will try to fix the article