Dynamic image (clipart)

Dynamic images let you add predefined images to your designs, whether it's a fixed graphic or a collection of clipart options shoppers can choose from.

You can use dynamic images for decorative elements, illustrations, frames, or personalized choices such as hairstyles, pets, and characters.

A dynamic image can contain one or multiple images, but only one is displayed at a time. On the canvas, it's represented by a dashed boundary around the selected image.

Dynamic images support JPG and PNG files. For vector artwork, see 📄 Dynamic vector (clipart).

How It Works

When you add a dynamic image to your design:

• If it contains a single fixed image, that image appears in the design without requiring shoppers to make a selection.

• If it contains multiple images, shoppers can choose between them using personalization options such as swatches or dropdowns.

• As shoppers select different options, the corresponding image appears live in the product preview.

• You can control the size, position, rotation, and appearance of the images.

• You can also make the image movable so shoppers can reposition or resize it within the area you define.

How to add a dynamic image

1. Open your Design or Template in the Design Studio.

2. Click Dynamic Image to add a new element.

Each dynamic image has a name you can edit and a unique ID to help you identify it.

How to add image options

After creating the element you will need to add the image/s that will go in it. You can upload images manually or select an existing Image Library.

Add images manually

1. Select the dynamic image element.

2. Click + Add image option.

3. Select the image or images you want to upload.

Each uploaded image becomes an option. Click an option to preview how it looks in your design.

You can also:

• Replace an image: Click the upload icon next to the image option.

• Delete an image: Click the trash icon next to the option.

• Reorder images: Click and drag an option to change its position.

Add images with an Image Library

If you've already created an Image Library, you can use it to add multiple clipart options at once.

1. Select the dynamic image element.

2. Click Pick Library.

3. Choose the Image Library you want to use.

The images from your Library will appear as options in the dynamic image.

If your Library contains categories, you can switch between them or use the search bar to find specific images.

To change the order of images from a Library, edit the Library itself.

How to move, resize, and transform the dynamic image

You can move, resize, and rotate a dynamic image directly on the canvas.

When you select a dynamic image, a quick-action toolbar appears below it, with shortcuts to duplicate, delete, align, and distribute elements.

For more precise adjustments, expand the Transform toolbox. Use these controls to adjust the placeholder's position, rotation, size, skew, flip, and layer order.

For detailed instructions on each transformation, see 📄 Transforming an element

Allow shoppers to move and resize the image

You can let shoppers move and resize a dynamic image during personalization, within an area you define.

This is useful for designs where shoppers need more control over the placement of clipart, such as positioning an accessory on a character or arranging decorative elements.

Enable movable images

1. Select the dynamic image element.

2. Expand the Image Behavior toolbox.

3. Enable Allow moving image inside bounding box.

By default, the image's bounding box defines the area where shoppers can move it. You can adjust these boundaries directly on the canvas or using the Transform toolbox.

You can also configure:

• Limit Placement to Placeholder: Enabled by default. Keeps the image within its bounding box. Uncheck it to allow shoppers to move the image outside those boundaries.

• Lock scaling: Prevents shoppers from resizing the image while still allowing them to move it.

Set the initial size and position

When an image is movable, you can define where it will appear and how large it will be before shoppers make any adjustments.

1. Select the dynamic image element in your Template.

2. Expand the Image Behavior toolbox.

3. Enable Allow moving image inside bounding box, if it isn't already enabled.

4. Click Set Initial Size & Position.

5. Adjust the image's starting size and position within the bounding box.

The bounding box defines the area shoppers can work within, while the initial size and position determine how the image appears when personalization begins.

Allow swapping choices with other images

When two or more dynamic images use the same Image Library, you can let shoppers swap their selected choices by dragging one image onto another in the product preview.

For example, if a shopper selects a dog for one element and a cat for another, they can drag the dog onto the cat to swap their choices quickly on the preview.

To enable this:

1. Select a dynamic image connected to an Image Library.

2. Expand the Image Behavior toolbox.

3. Enable Allow swapping positions with other library images.

4. Select another dynamic image using the same Image Library and repeat the steps.