Helpful CSS adjustments

You can fine-tune the appearance and layout of the Fancy Product Designer with a few simple CSS rules. Below are some useful adjustments you can copy and paste into the custom CSS segment in the Appearance tab in the app.

Show Extra Price on Done button in Customize Button Mode

Use this to show the extra price you are charging for the customization on the Done button when the product designer is in the Customize Button mode.

.fpd-modal-product-designer .fpd-container fpd-actions-bar .fpd-done span.fpd-total-price {
    display: inline-flex !important;
}

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-images .fpd-module-tabs [data-context="qr-code"] {
    display: none !important;
}

Hide Advanced Editing Tool from the Toolbar

If you want to use the Background Removal tool, but you don't want to show the standard Advanced Editing tool, use this:

fpd-element-toolbar .fpd-tools-nav .fpd-secondary-tools .fpd-tool-advanced-editing {
	display: none !important; 
}

Change the color of the designer outside of the canvas

You can use this code to change the color of the background outside of the canvas, but within the designer.

.fpd-container>fpd-main-wrapper {
    background: #fff !important; (adjust the color hex code to match the color you want to show)
}

Updated on: 15/05/2026