This guide walks you through the Design Studio so you know where everything lives before you start building. It is for anyone opening the editor for the first time. By the end you will recognize the icon rail, the canvas, the top bar, the floating toolbar, and the zoom controls, and know what each one does.
What the Design Studio is for
The Design Studio is where you build a product template. You place text, images, shapes, and other elements on a canvas, then decide which ones a customer can change in the storefront.
The canvas represents the active design area. Check the product’s actual surface dimensions, bleed, fonts, and intended production output before relying on a screen preview as print-ready artwork.
You can open the Design Studio in two ways. Open it from a product to edit that product’s design, or open a standalone design and attach it to a product later.
The left icon rail
The icon rail runs down the far-left edge of the editor. It is how you switch between the tools and panels you work with most.
The rail items appear in this order:
- Elements: add text, shapes, graphics, and uploads.
- Layers: see and reorder everything on the canvas.
- Templates: start from or save a reusable layout.
- Sides: switch between the product’s sides, copy a design from one to another and set backgrounds. It reads Sizes for a product sold in several sizes, and Pages for a book.
- Options: choose how the product’s variants and add-ons look to customers. Their choices, prices and photos stay on the product page. Click an item to open its panel. Click the active item again to close the panel. Each item also has a tooltip on hover with a short description, so you can confirm what it does before you click.
To search, use the search box at the top of Elements, or press Ctrl+K (Cmd+K on a Mac) to search actions and the layers in your design. The canvas display options, such as the grid, snapping, rulers and the print guides, are under File › View.
The top bar, floating toolbar, and status bar
Three controls surround the canvas: the top bar above it, a floating toolbar just below the top bar, and the status bar along the bottom.
The top bar
The top bar holds your navigation and save controls. From left to right you get:
- A Back arrow to leave the editor.
- A File menu.
- The design title in the center, which you can click to rename inline.
- An Undo and Redo pill.
- A Save button on the right. It reads Save when you have unsaved changes, Saving while your work is stored, and Saved once it is done. If saving fails, an error message appears under the top bar.
The customer form dock, opened from the tab on the right edge of the canvas, shows the form shoppers fill in: Preview to try it, Form to set it up. Its eye button, Highlight what customers can change, dims everything on the canvas a shopper cannot change. Check the published shopper flow separately.
The editor only saves. Your design goes live from the product page, where you publish the product.
The floating toolbar
A floating toolbar sits between the top bar and the canvas. It always has the same three parts:
- A few quick buttons for what you do most with the selected element. Text gets its font, size, color, bold and alignment. A photo gets Replace, Crop and Effects. A map shows its place. A button that names a setting, such as the place, opens the properties panel right at it.
- Customizable, which says whether customers can change the element, and turns that on or off. It reads Make customizable while it is off, and is left out for elements customers cannot change.
- More, the ⋯ at the end, with the same menu as a right-click: duplicate, lock, layer order, flip and delete.
A locked element shows only Locked and, when you locked it yourself, Unlock. Several selected elements get Align, Distribute and Group. With nothing selected, the toolbar shows the background color and the canvas size. While you crop a photo, the toolbar is replaced by Reset, Cancel and Done.
The status bar
The status bar runs along the bottom of the editor. Warnings sit on the left and the product’s sides in the middle. On the right, from left to right:
- A Zoom out button.
- The zoom percentage. Click it to fit the canvas to the screen, any time it drifts out of view or you want it centered again.
- A Zoom in button.
- A unit toggle that switches between millimeters (mm) and pixels (px).
- Help, the ?, with Keyboard shortcuts and Help & chat. Help & chat opens the support chat, which has no floating button in the editor.
Next
Now that you know the layout, add and style text to put your first element on the canvas.