The Redesigned DesignO Web to Print Editor: A Faster, Cleaner Way to Personalize Products

The Redesigned DesignO Editor :The Canvas Comes First

Most product personalization editors are built for designers. The problem is that most of the people using them are not. The shopper customizing a t-shirt, a business card, a photobook, or a box of corporate merch does not want to learn a tool. They want to design quickly, see what they are making, and check out.

For years, the editor got in the way of that. Controls lived in menus. Editing text meant opening a popup. Previewing a design covered up the design. Switching from the front of a product to the back meant expanding a panel and shrinking the canvas. Every one of those small frictions adds up to the same outcomes storefront owners feel: designs abandoned at the personalization step, slower time from “start designing” to “add to cart,” and support tickets from customers stuck in the editor.

So we rebuilt it. The redesigned DesignO web to print editor is a ground-up rebuild of our product personalization experience, built around a single principle: the canvas comes first. Panels open beside the canvas instead of over it. The workspace adapts as you work. Editing happens directly on the design. The result is fewer clicks, fewer popups, and a workspace that stays in focus throughout.

Here is what changed.

UI & Workspace Redesign

The starting point was the layout itself. Design tools and workspace controls used to share the left sidebar, which meant the two were always competing for the same space.

We separated them: design tools stay on the left, and a dedicated right-side utility panel now holds Settings, Pages, Preview, and Layers. Both panels expand or collapse with side arrow controls, and the canvas adjusts as they do. We also renamed the old “Settings” tab to “Info,” so product details are where you would actually look for them. The interface is cleaner, more organized, and far less cluttered while you design.

Responsive Canvas Workspace

In the previous editor, the canvas stayed a fixed size no matter what you opened. Opening the preview window or a side panel ate into the design area without giving anything back.

The redesigned canvas is responsive. It resizes in real time as panels open and collapse, so you always get the maximum editing space available. Collapse the left panel and the canvas expands to fill the room. Open a utility panel and the canvas adjusts smoothly to make space, without the design ever being hidden behind it. On smaller screens, where every pixel of workspace counts, this matters most.

Product Side Navigation

Front, back, left, right. In the previous editor these lived inside a collapsible panel, and switching between them meant opening that panel and giving up canvas space to do it.

Product sides are now tabs along the bottom center of the canvas, always visible and always one click away. Nothing to expand, nothing to collapse, no workspace lost. For anyone designing a product with more than one printable surface, multi-side editing is faster and far more obvious.

Preview Experience

Previewing used to mean a floating popup that opened over the canvas, covering the work you were trying to check. You had to close it to keep editing.

Product sides are now tabs along the bottom center of the canvas, always visible and always one click away. Nothing to expand, nothing to collapse, no workspace lost. For anyone designing a product with more than one printable surface, multi-side editing is faster and far more obvious.

Preview without losing your design

Previewing used to mean a floating popup that opened over the canvas, covering the work you were trying to check. You had to close it to keep editing.

Preview now opens in the right-side panel, so your design and the preview sit side by side. Both 2D and 3D views are built in, and the preview controls live in the panel for easy access while you edit. When you are done, collapse it and keep working. No mode switching, no covered canvas, no interruption.

Settings & Canvas Controls

Grid, ruler, and cut, bleed, and safe area visibility used to sit in a small floating popup near the canvas, with limited guidance on what each indicator meant. Border and margin options were thin and unstructured.

These controls now live in the dedicated Settings panel with clear labels, so the production-critical guides are easy to find, identify, and manage. Border style, size, margin, and color are grouped into one configuration section. Actions like “Delete All” and “Reset Design” are clearly placed instead of buried in a dropdown. For print work, where bleed and safe areas decide whether a file outputs correctly, clarity here is not a nice-to-have.

Text & Object Editing Experience

This is the change customers feel first. In the old editor, editing text meant clicking an edit icon, waiting for an “Edit Text” modal to open, making the change, and closing it again. Formatting lived in a separate left-side panel.

Now you edit text directly on the canvas. Click in, type, done, with instant updates. Selecting a text layer brings up a top toolbar with the controls people reach for most: font size, bold, italic, text case, alignment, color, line spacing, embellish, and flip. And selecting any object surfaces a floating action bar right next to it, with edit, cut, copy, paste, duplicate, and delete. The controls come to the element you are working on, instead of sending you off to find them.

Layer Management

Layers were previously tucked behind a small icon in the bottom-right corner, and managing them meant switching focus away from the canvas.

There is now a dedicated Layers tab in the right-side panel that opens alongside the design. You can reorder, manage, and work with every element on the page while keeping the full design in view the entire time.

Dedicated Right-Side Utility Panel

Tying all of this together is the panel itself. Preview, Layers, Settings, and Pages used to be reached through separate controls and floating panels, and opening any of them was a small interruption to the workflow. They are now grouped into one dedicated right-side utility panel that opens alongside the canvas instead of over it. One consistent place for every workspace utility, easier to navigate, and never at the expense of the design area.

Why we rebuilt it this way

None of these changes came from a redesign for the sake of a redesign. Every one of them came from watching how real customers actually use the editor, and from a simple observation: the people personalizing products are not designers, and the tool should never ask them to be. This is not a coat of paint on the old interface. It is a rebuild around how non-designers actually work, with the canvas at the center of every decision.

For storefront owners, that translates into the outcomes that matter: fewer abandoned designs at the personalization step, a faster path from “start designing” to “add to cart,” and lower support load from customers who no longer get stuck. Nothing changes about the products your customers personalize. The experience of personalizing them just got a lot clearer.

Ready to see it in action?

The redesigned DesignO editor is here.

If you are already using DesignO, get a personal walkthrough of the redesigned editor and we will help you make the most of it.

If you are new to DesignO, book a demo of the redesigned DesignO and we will walk you through how it fits your specific storefront.

Say Goodbye to Outdated Tech Hassles!

Let DesignNBuy upgrade your Magento print shop and streamline your operations. 
With DesignNBuy, you only need one subscription to supercharge your print shop.