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; the item you clicked keeps a white card. Rest the pointer on another item to preview its panel: that item turns grey while you look, moving away brings back the panel you clicked, and a click keeps the preview. Click the active item again to close the panel.
An empty canvas shows where to begin: Text, Photo and Graphics add one straight away, Add elements opens the panel with everything else, and Background sets the colour behind your design.
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, and beside it whether the product is in your store.
- An Undo and Redo pill. After it, when something needs a look, the number of warnings (empty sides, low-resolution photos) and any fonts that did not load. Click the warnings to see the list.
- 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 lets you try it as a shopper. Edit shows the same form with a small grip and pencil on each field when you point at it: drag the grip to move the field up or down, or click the pencil to open that field’s settings. The round arrow, Reset form, puts the fields back to the design’s defaults, and ⋯ opens the form’s own settings, such as its layout, steps and field order, in the Customizer panel in the left rail. To see the shopper’s customizer full size, in a window of its own, choose File › Customer preview. 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 parts:
- Edit, first for every element, which opens its properties panel. Use it when another panel, such as Layers, is open.
- 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, with the product’s sides in the middle. On the right, from left to right:
- 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. Point at it and a Zoom out and a Zoom in button open on either side.
- Help, the ?, with Keyboard shortcuts and Help & chat. Help & chat opens the support chat, which has no floating button in the editor.
Whether sizes show in millimeters (mm) or pixels (px) is a view setting: File › View › Units.
Next
Now that you know the layout, add and style text to put your first element on the canvas.