Change how the Fancy Product Designer looks

So, you are starting to understand the Fancy Product Designer, maybe you already created your first product. But you don’t like the look of the Designer in the frontend. We can change that in the UI Composer tab in the app. 

Let’s make it as simple and clean as possible and assume you only want to use the Upload Zone element for your products, which can be set up in the Product Builder. This would mean you don’t need any of the Modules or Actions, that you can see in the default UI Layout. So our final goal would look like this:

To achieve this goal we will have to remove all the Modules and Actions and also the Mainbar from the default Layout. 

Modules:

Let’s remove the Modules first. Scroll down to the bottom of the page and choose the Modules tab. On the left, you can see all the Modules that are active right now. To remove them you just need to double click on each of them. 

If you want to use any of the Modules later you can add them by dragging them on the right and dropping them in the Selected Modules section.

Actions:

Now let’s move on to the Actions. At the bottom of the page, switch to the Actions tab. As with the Modules, you will see all active Actions on the left. You can remove them the same way by double-clicking on each of them. The Actions can also be reinserted later by using drag and drop.

Main bar:

We are almost done. Your designer should look like this right now: 

All we need to do now is to get rid of the main bar. To achieve this, switch to the Custom CSS tab at the bottom of the page. In there you will need to insert a small code snippet that will hide the main bar. 

That was it! You will now have a clean and simple layout. Don’t forget to save your changes (1). Also, if you get stuck along the way or want to start fresh from the default that’s no problem. You can “Reset to Default” at any time (2).