This guide shows you how to add an image to your design in the Design Studio. You will place a photo or graphic on the canvas, swap the image source later, and crop it to the shape you want. It is for anyone building a personalizable product who wants a photo or logo as part of the design.
An image layer can hold a fixed picture you choose, or it can stay an empty placeholder that your customer fills in later. If you want shoppers to upload their own photo into a slot, see make fields customer editable.
To let customers choose from images you provide, use Clipart. Image stays a fixed picture or an upload slot. For a photo with a choice of frames, use an Image upload layer and a separate Clipart layer above it.
Add an image
Adding an image starts in the Elements panel. The Image tile opens a media browser where you choose a file or upload one.
Open the Elements panel and click the Image tile
In the Design Studio, open the Elements panel on the left. Click the Image tile to start a new image layer.
Pick an image or upload a file
The media browser opens in insert mode. Choose an existing image from the library grid, or upload a new file from your device.
See the image on the canvas
The image is placed on the canvas and selected, so you can move, resize, or style it right away.
Replace or swap the image source
You can change the picture inside an image layer at any time without deleting the layer. This keeps your size, position, and effects in place while only the picture changes.
Select the image
Click the image on the canvas. Its properties open on the right.
Open the source tile
The Source section sits at the top of the Edit tab and shows the current image, so you always know what is in the layer.
Pick a new image or drop a file
Click the Source tile to pick a different image from the library, or drop a file onto it to replace the picture in place.
Below Source, the same Edit tab holds Crop & fit, Color & tone, Appearance, Flip & rotate and Border. Filters and the effect stack live on their own Effects tab beside it. To learn what each control does, see image adjustments and filters.
Crop an image
Cropping trims the image to show only the part you want. You crop right on the canvas by dragging a rectangle over the picture.
Open crop mode
Select the image, then click Crop in the floating toolbar above the canvas. You can also double-click the image to open the same crop overlay. While you crop, the toolbar shows Reset, Cancel and Done.
Drag the crop rectangle
Drag the crop rectangle inside the image to set the area you want to keep. The selection handles stay hidden while you are cropping, so the crop frame is the only thing you move.
Commit the crop
When the frame covers the area you want, click Done, press Enter or click outside the image. The image updates to the new bounds.
The floating toolbar also has Replace, to swap the photo for another, and Effects, which opens the photo’s effects in the properties panel. Its More menu, the ⋯ at the end, changes the layer order, moving the image forward or backward against the other layers on the canvas.
Common questions
Can I change the image later without losing my edits?
Yes. Select the image and click the Source tile to swap the picture. Your size, position, adjustments, and effects stay in place.
Why is the Crop button doing nothing?
Crop is a no-op when the image layer is still an empty placeholder. Add an image to the layer first, then crop.
How do I let a customer upload their own photo?
Make the image field customer editable so it becomes an upload slot in the customizer. See the article on making fields customer editable.
If you get stuck, contact support and we will help.
Next
Fine-tune how your image looks with image adjustments and filters.