Color is one of the fastest ways to make a design feel finished. This guide shows you how to recolor any element on the canvas, set the background of a surface, and change each part of a multi-part graphic. It is written for anyone building a product in the Design Studio, no design background needed.
Change an element’s color
Every element that can be filled shows a color swatch in the floating toolbar above your selection. Text shows a text-color swatch. Shapes show a fill swatch. You can also use the fill and stroke fields in the properties panel on the right for finer control.
Select the element
Click the text, shape, or graphic you want to recolor. The floating toolbar appears above it, and its settings open in the properties panel.
Open the color swatch
Click the color swatch in the floating toolbar. A color picker opens where you can type a hex value or drag to pick a shade. For shapes this sets the fill. For text it sets the text color.
Set fill and stroke in the properties panel
For more control, use the properties panel on the right. Shapes and text have a Fill field, and a Stroke field for the outline color. Stroke also has a stroke width so you can set how thick the outline is.
Set the canvas background
The background is set per surface, so each side of a product can have its own. You set it from the Surfaces panel. The choices are White, Transparent, or a Custom color.
Open the Surfaces panel and expand the active surface
Open the Surfaces panel and click the surface you are working on to expand it. You will see its background controls under a Background label.
Choose White, Transparent, or Custom
Pick White for a plain white backdrop. Pick Transparent to let the product photo or mockup show through behind your design. Pick Custom to choose any color with the picker.
Reset to white if you change your mind
Use Reset to white to clear a custom color and return the surface to a plain white background.
You can reach the same background control without opening the Surfaces panel. With nothing selected on the canvas, the floating toolbar shows a background color swatch. It writes to whichever surface is active, whether that is a slot, a print area, or the top-level stage. For more on surfaces, see manage surfaces.
Recolor a multi-part graphic
Some graphics from the library are built from several parts, such as separate layers for an outline, a fill, and a detail. You can color each part on its own without touching the others.
Select a multi-part graphic
Click a clipart graphic that has more than one part. If it supports recoloring, a Recolor section appears in the properties panel.
Open the Recolor section
Expand the Recolor section. You will see one color row per part of the graphic, each with its own picker.
Change a part's color
Click the picker on any row and choose a new color. Only that part changes. Use Reset to default on a row to restore its original color.
Common questions
Why does my element not have a fill swatch?
Maps, QR codes, and barcodes do not have a fill option, so their color stays fixed. Text and shapes always show a color swatch.
Does the background apply to every surface at once?
No. The background is set per surface, so you can give each side of a product a different background.
Can a shopper change colors on my storefront?
Yes, if you mark a color field as customer-editable. See the make fields customer-editable guide for how to set that up.
Next, learn how to let shoppers pick their own colors with make fields customer-editable.