I have some useful CSS for some of you...

 Okay, so after playing around a lot with the CSS function on Fancy Product Desiger settings, I've come up with some useful functions which work great for me. But I thought I would share them, I'll explain each function and what it does, and you are free to use and edit as you wish. To use this code, navigate to "Fancy Product Designer > UI & Layout Composer > Custom CSS"

This code will ONLY run on pages running the UI layout you are using and ONLY on pages where the FPD is active.

Blue Design button - stands out more.

.fpd-blue-btn {
    background: #7cafdb;
    color: #fff;
    padding: 10px 10px;
    font-size: 19px;
    letter-spacing: 1.5px;
    text-align: center;
}

This code makes the "Design It" button a little bigger, and it spans to the width of the area; you can change this very easily. But, this was more to make the button a little more colourful and stand out a little more than the default.

Turn off the annoying thumbnail preview that comes up when highlighting a Design

.fpd-thumbnail-preview {display: none;}

Change pop up size, width, height etc.

.fpd-draggable-dialog {
    width: 350px;
    height: 450px;
    margin-top: 5px;
    background: #fff;
    left: calc(50% - 175px);
    top: calc(45% - 200px);
    min-width: 200px;
    min-height: 100px;
    border-radius: 2px;
    max-width: 100%;
}

 This one is more personal preference, but I find using these settings work best, especially on larger screens.

Change size of Design Grid

.fpd-grid.fpd-padding > .fpd-item > picture {
    top: 15px;
    left: 20px;
    right: 20px;
    bottom: 10px;
}

Make the "Add to Cart" button stay in the top right corner of the page when scrolling.

I personally use this code, and chose to have it presented on EVERY page where the FPD is active. This stops customers having to scroll ALL the way down to find the "Add to cart" button, instead using this - it will be presented at the top right of the page. On mobile devices, it appears in the center.

.quick-view-popup .product-info .button, .single-product-page .product-info .button {
    float: left;
    position: fixed;
    top: 20px;
    right: 10px;
}

If you guys have any questions, or would like some more codes, let me know and I'll be sure to try and help out.