Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


FPD displayed all over the screen

We would like the designer to be displayed all over the screen. We use the designer via Woocommerce and Shortcode. Can someone tell me how I should adjust.


You'll either want to use the lightbox mode or you'll need some custom CSS to modify the widths of some divs of your theme. Custom CSS can be added via the UI & Layout composer. If you need help with this please send a link to a page where you are using FPD. If you do not want a public link to your page on this forum, please open a support ticket.

I want the whole container on the whole page is about menu and footer

hear is the link http://c-ase24.de/shop/2d-apple-iphone-4-case-selbst-gestalten/

We use this designer on two sides. Once as a Shortcode and two at Woocommerce Article. We would like to see this on both sides on the complete page and adapt itself for each device.


You can find an exaple here or look this Photos: https://www.deindesign.de/de/designer/designcases/toughcase/apple-iphone-6/A1336#/workspace/101149226/184673524


Is there anyone here who can help me?


Here are my pages with the designer:


Woocommerce: http://c-ase24.de/shop/2d-apple-iphone-4-case-selbst-gestalten/

Shortcode: http://c-ase24.de/case-selbst-gestalten/


Now we have two Ul & Layout Composer one for Woocommerce and secound for Shortcode.Canvas Width 1280px - 700 px


 I have now tried all night and made only one part. I got the .fpd container on the complete page but still does not know how to do with the product designer wrapper.

look her please http://c-ase.de/case-selbst-gestalten


can someone help me. Is it possible to add the form below to the .fdp cONTAINER?

my code now 

    /* The Overlay (background) */

.fpd-container {

    /* Height & width depends on how you want to reveal the overlay (see JS below) */    

    height: 100%;

    width: 0;

    position: fixed; /* Stay in place */

    z-index: 2; /* Sit on top */

    left: 0;

    top: 0;

    right: 0;

    overflow-x: hidden; /* Disable horizontal scroll */

    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */


.fpd-product-designer-wrapper {

    position: static;

    overflow: hidden;

    z-index: 11


Hallo Rasinski,

Ich würde mein Designer genau wie deinen machen.

Brauchte aber ein wenig Hilfe wir designen Kalender. Könnten wir wohl Kontakt aufnehmen?

Login or Signup to post a comment