Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Customize the Lightbox

Hi, I have the customize button next to add-to-cart button on product page. I set it to open in Lightbox when customer click it. But when the Lightbox opened full screen, the lightbox was behind the Header and the button X is at the top overlayed with the Header. Is there anyway I can fix it? Thank you.

And also my featured product images was big and after I pressed Done on customization, it resized to a small images. I can't seem to find solution for it. 


1)The first issue can usually be solved with some custom CSS to increase the z-index of the lightbox and decrease the z-index of the header a little - if you do need help with this please open a support ticket and send a link to a page with the issue. Custom CSS is added via the UI & Layout Composer.

2) Your designer stage is big enough, so that the generated image has the same/ larger dimensions? Other than that this can also be caused by a third-party gallery plugin/ theme.

Could someone shed a little more light on how to code the custom CSS so that the z-index of the lightbox is increased and the z-index of the header is decreased? I am having the same problem with my lightbox being behind the header. Writing custom CSS is not my strongpoint :) Thanks


This would be useful for me too!

I have the same exactly issue.. light box appears behind header.. can someone please show us the css that increase the lightbox z-index please?

Hi all, I am also interessted in the CCS code for z-index. I have the same problem with overlay of the header to the lightbox. Can FPD team please help?

Login or Signup to post a comment