Important: FPD Support Update

As of March 1, 2025, direct support for Fancy Product Designer has been discontinued. Only customers with an active support license will continue to receive assistance. Our team is now fully dedicated to Chamevo, the next-generation product customization platform built on the foundations of FPD. For help, use the chatbot available on fancyproductdesigner.com or chamevo.com.

FPD

Helpful CSS adjustments

Updated April 3, 20241,830 views4 found helpful

Hide Price in lightbox (modal mode)

body .fpd-modal-product-designer fpd-actions-bar .fpd-total-price {
    display: none !important;
}

Set navigation to top

Use this CSS if you want to set the navigation to the top when using the sidebar layout.

fpd-main-bar {
    flex-direction: column;
}

fpd-main-bar
.fpd-navigation {
    display: flex;
    background: var(--fpd-module-secondary-color);
}

.fpd-container.fpd-sidebar>fpd-main-bar .fpd-navigation>.fpd-nav-item {
    flex-direction: column;
    flex: 1 0 81px;
    margin: 5px;
}

.fpd-container.fpd-sidebar>fpd-main-bar>.fpd-module-content {
    height: 100%;
    min-height: 0;
}


Example


Hide QR-Code tab in images module

.fpd-module-tabs [data-context="qr-code"] {
    display: none !important;
}