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 side, 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 or shape you want to recolor. The floating toolbar shows its quick controls, 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 side, so each side of a product can have its own. You set it in the side’s Details, from the Sides panel. The choices are White, Transparent, or a Custom color.
Open the side's details
Open the Sides panel, open the menu on the side you are working on and choose Details. You will see its background controls under a Background label. The canvas size in the floating toolbar opens the same page.
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 side to a plain white background.
You can reach the same background control without opening the Sides panel. With nothing selected on the canvas, the floating toolbar shows a background color swatch. It writes to whichever side, size or page is active. For more, see manage a product’s sides.
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 Colours section appears in its Look on the Design tab.
Find the Colours section
You will see one swatch per part of the graphic, named after the part where the graphic says what it is, such as Skin, Hair or Outline, and numbered otherwise.
Change a part's color
Click a part’s swatch and choose a new color. Only that part changes. Use Reset to bring back all the original colors at once.
Let the shopper pick one part’s color
A multi-part graphic can hand one part’s color to the shopper. Open the graphic’s Personalize tab and switch on Customers can change this. Under Part, choose the part they color; under Colors they can pick, choose the colors on offer. The color you set on the Design tab is where they start.
Common questions
Why does my element not have a fill swatch?
Some element types use dedicated styling controls instead of the generic swatch. QR codes and barcodes expose foreground and background colors in Edit. Check the selected element's properties.
Does the background apply to every side at once?
No. The background is set per side, 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.