Welcome to the support center for

Fancy Product Designer & Multistep Product Configurator


Hovering text editor

Greeting, my products end up very tall, which makes much of the content below an area you need to scroll to. is there a way to make the hovering text editor appear above the selected text/textbox instead of all the way on top?

also any way of getting the window to be responsive for client end too? like when responsive is clicked it doesnt go above a certain height, but when its off its like now which is max width?


i just seen that your demo now has that, is that from the PLUS plugin? or my FPD bugging?

okay found it, but now i remember why i disabled it. PLEASE HELP, it loads below the page for items at the bottom of the page. any way of loading it above the itembox when below 50% of screen or something? thanks


First you will need to create two columns in you page  one for the product designer and one for the fancy product designer main bar.

Next use any of this columns you created to display the main bar using the  [fpd_main_bar] short code and use the other column to display the product designer using the [fpd] short code.

Here is where you need to add some code to make the column containing the main bar sticky on the page so that when the user scrolls the page the main bar will follow them.

The code below can be used for that :

 position: -webkit-sticky;
 position: sticky;
 top: 100px;
 height: 700px;

 Demo video

I was talking about the one for like text. The one on the side is fone. It's just the one inside the designer loads outside the designers dimensions


You can either increase the bottom margin  for product designer  and the page or increase your product designers height 

     margin-bottom: 500px;


Hey I check you site and notice you are using a pop modal to display the product designer so the code above only WILL NOT WORK .

The idea remain the same adding the margin bottom. I hope this is what you want to achieve.



add the code below  to your UI & layout Composer custom CSS to apply this margin bottom to all the product 

div[id^='fancy-product-designer-'] {margin-bottom: 200px; }

   If you want to apply this to only one product use this instead and specify the product id (use chrome dev tool to get the product ID) 



Any way of making it load on top? It's a flyer and it's long as is.. is there any way for me to decrease the height of the designer so the flyer is smaller? Tyvm

tyvm, but the length is so huge atm its getting back feedback so trying to not increase user scroll.. Is there a way to limit the editor than?make the design even smaller for"flyer options? like max height of editor?

Login or Signup to post a comment