Use Clipart when the shopper should choose an image you provide. It works for illustrations, logos, backgrounds, transparent frames and other artwork. You choose which images to offer; the shopper picks one in the customizer.
Use Image for a fixed image or a customer photo upload. To combine a customer photo with a choice of frames, add an Image layer for the upload and a separate Clipart layer above it for the frames.
It is easy to confuse with the Graphics panel, so start here: Graphics is your own library, and whatever you click goes on the canvas and stays there. Clipart is a personalization field. You choose the category; the shopper chooses the graphic.
Before you start: the artwork lives in Media
A Clipart element uses images from one category in your media library. You can keep the whole category or curate a selection for this element. Once you curate a selection, adding more files to the source category does not add them to that selection.
If you have no categories yet, the panel says exactly that and sends you to Media to make one. This is what a new account sees:
Build the category first, in the media library, then come back here.
Add the element
Open the Clipart panel
In the Design Studio, open Elements and click the Clipart tile.
Choose where the category comes from
My categories lists the categories your organization has built. Library lists ready-made categories you can take: choose Add to my library and it becomes yours to use and to extend.
When a library category grows after you have taken it, the panel offers to add the new graphics rather than making you rebuild it.
Pick a category
Click a category and the element lands on the canvas showing one of its graphics. Each category shows how many graphics it holds, so an empty one is obvious before you use it.
Choose the images to offer
Select the Clipart element. Under Content on the Design tab, its set shows as square tiles, four to a row. Click the plus tile, Add images, to open the category already used by this element.
Drop files into the upload area to add them directly to this category and this element. Or click Add images in the area to open the standard media picker, starting in the current category. Upload new files, select existing images, and edit their titles in the details panel. Images already offered by this element show a checked Already added badge and cannot be selected again. Only new selections count toward Add images. Confirm with Add images.
Uploads always go into this clipart category, even when you browse another folder in the picker. Selecting an existing image from another folder adds a copy to the category without moving the original. Selecting the same image again does not add another copy. Uploads stay in the media library even if you cancel the picker.
Deleting an asset through the picker removes it from the media library after confirmation; assets used by designs are protected. Removing a choice in the editor only removes it from this element.
The tiles show two rows at a time; in a larger set, All shows the rest. A star marks the default image. The line under the tiles counts the images and ends in Manage set.
Choose Manage set to open the manager. Search by name or use the page arrows to find a choice. Edit a name directly in its row; press Enter or leave the field to apply it. Change a position number to reorder an image, set each image’s Price, choose a default with the star, or select several images and use Remove from choices. A price is the image’s surcharge in your media library, so it applies wherever that image is used. Keep at least one image. Undo removal restores the most recent removal while the manager is open. Apply changes applies the draft together; Cancel discards it. Renaming, reordering and removing need the field switched on in the Personalize tab; until then the manager only searches the set and picks the default.
Removing a choice affects only this element; the original stays in your media library. Names and order also apply only to this element and do not rename files or change other designs. If you remove the default image, the first remaining image becomes the default.
To use a different category, open Add images and choose Change category. Applying images from another category replaces this element’s selection and sets a valid default from the new images.
Offer no image
On the Personalize tab, switch on No image under What customers can change to let shoppers leave this layer empty. Set its Empty choice name, such as “No frame”, and switch on Start with no image if the layer should start empty.
Selecting this option hides only this layer’s artwork. A separate customer photo remains in place. No artwork or field surcharge is added for this empty choice. It counts as a valid answer when the field is required.
Use artwork with matching dimensions and transparent backgrounds when it should sit above a photo. Each choice replaces the image within the same Clipart layer’s position and size.
Set what shoppers see first
The image with the star, in the set’s tiles under Content, is what appears before the shopper touches anything: on your canvas, in the product preview, and in the cart if they change nothing. Click the tile of the image that sells the product in a thumbnail, and the star moves to it. To open with the layer empty instead, turn on Start with no image, which appears once No image is on.
For existing elements that still use a whole category, the category remains the source of available images.
Choose how the picker looks
How customers see it, on the Personalize tab, sets the layout of the picker on your storefront. There are six, and the right one depends on whether people recognise your artwork by sight or by name.
Choose a visual tile to change the layout. Each tile shows a small layout sample and a short name, and the selected tile is marked. The section’s (i) names the selected layout and what it suits. The samples illustrate the layout, not your actual artwork. Your existing choices and default stay the same when you switch layouts.
| Tile | Layout | Best for |
|---|---|---|
| With names | Thumbnail grid | Artwork customers recognise by sight, like dog breeds or zodiac signs |
| Image + name | List with thumbnails | When names and pictures both matter, like team badges |
| Name list | List of names | Long lists with clear names, where forty thumbnails would be a wall |
| Compact | Compact thumbnails | Small images without captions; the name appears on hover or keyboard focus and stays visible for the selected choice on touchscreens |
| Dropdown | Dropdown | A compact selector showing a small image, name and any surcharge for each choice |
| Buttons | Buttons | A handful of choices with a small image beside each name |
Buttons and the dropdown show a small preview beside every name, including the currently selected dropdown choice. The empty choice uses a no-image icon. Open the dropdown with Enter or Space, browse with the arrow keys (or type the start of a name), select with Enter, and close without changing the selection with Escape.
A grid of forty thumbnails on a phone is a lot of scrolling. If your category is long and the names are unambiguous, a list of names or dropdown uses less space.
The two list layouts stay open and have spaced rows with wrapping names. The dropdown opens on demand. Existing designs keep their current layout. Compact thumbnails preserve the full artwork proportions; a broken image still shows its name. The optional empty choice uses an icon-only tile of the same size, with its name available on hover, focus and selection.
Let shoppers recolor what they pick
Recolor, under What customers can change on the Personalize tab, adds colour controls to the picker, so the shopper can change the colours of the graphic they chose.
It only works on graphics that have separate colours to change, which in practice means SVG artwork. Its (i) tells you how many of the graphics in the category qualify, so a category where only half are recolorable is visible before you promise it. If none of them are, the switch is unavailable and its (i) says why: a photo or a flat image has no separate colours.
Charge more for the graphics that cost more
Surcharge sets an extra amount for one specific graphic. Use it when one option genuinely costs you more, such as a design with more print colours or one you license per use.
It is per graphic, not per category, so most of your artwork can stay at the base price while two or three cost extra. The amount adds to any surcharge already set for the whole field, including a percentage one. A field with a 10% surcharge and a graphic with a fixed surcharge charges both.
Import a lot of artwork at once
Open Import ZIP below the category list, choose the destination category, then choose your ZIP file. Import is an optional bulk action; existing categories do not need to be uploaded again. For individual images, open Add images and drop files into the upload area, or use its Add images button to open the media picker. Unsupported or oversized files in a ZIP are skipped rather than failing the whole import, and the result tells you how many went in and how many were left out.
Category thumbnails show the starred default from a Clipart element on the current design surface. If multiple elements use that category, the selected element takes priority. This does not change the shared library or other designs. Categories without an element default use their cover or first available image; empty categories show a folder icon.
Next
To choose the graphic yourself instead of letting the shopper choose, use the Graphics panel. To set where this field appears in the shopper’s form, see customizer layout and field order.