With Movable Dynamic Images and/or Vectors, you can give your shoppers the freedom to reposition decorative elements—like clipart, icons, or stickers—within a defined area. This adds a layer of personalization and playfulness to your products, especially when shoppers want to control the final layout.
Instead of keeping clipart static, this feature lets shoppers drag and place it wherever they want inside the boundaries you set.
How to Enable Movable Dynamic Images or Vectors
- Select the Dynamic Image or Dynamic Vector you want to make movable
- Expand the Behavior toolbox in the side panel
- Check the box labeled "Allow moving vector/image inside bounding box"
Once enabled:
- The vector or image bounding box turns red, showing the area within which the customer can move the text.
- This red area defines the limits—the customer won’t be able to drag the text outside of it.
Tip
The position and size of the image or vector when you configure it in the editor will be the initial state your customer sees when they load the product. You control where it starts and how large it appears before they make any changes.
How to Adjust the Movement Area
The movement area is determined by the size of the dynamic element.
- To allow more freedom, resize the box larger.
- To restrict movement, shrink the box to a tighter area.
You can adjust the dynamic image or dynamic vector box visually on the canvas or precisely using the Transform toolbox.
Images and Vectors Can Also Be Resized
When Movable is enabled, customers can resize the art by dragging its corners, just like they would with an uploaded image/vector.
- The image/vector will shrink or grow proportionally, depending on how it's dragged.
Testing the Experience
To see how it works:
- Double-click on the Box while editing your design.
- You’ll enter “shopper mode,” where you can move and resize the art just like a shopper would. This is indicated by the boundaries turning red
- Drag the image/vector around, and try resizing it.
- Click anywhere outside the box to exit customer mode.