Helpful CSS adjustments

You can fine-tune the appearance and layout of the Chamevo product designer with a few simple CSS rules. Below are some useful adjustments you can copy and paste into your theme’s custom CSS.

Hide Price in Lightbox Mode

Use this to hide the price display when the product designer is opened in lightbox (modal) mode.

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

Move Navigation to the Top (Sidebar Layout)

This CSS moves the navigation bar to the top instead of the side 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;
}

Hide QR-Code Tab in Images Module

If you don’t want the QR-Code tab to appear in the image upload module, use this:

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

Updated on: 04/11/2025