- if you want to add a fixed graphic to your design (like a nice quote, or a frame) you can add it as a dynamic vector
- if you want to give customers clipart options to choose from (like choosing quotes, or logos) you can upload all those options into a dynamic vector
- if you want to add a mask to your designs (to give it a cool shape) you can upload it into a dynamic vector
A dynamic vector is represented on the canvas by a dashed line, showing the vector you uploaded onto it inside. If you have uploaded multiple vectors into it, you will only see one of them at a time.
How It Works
When you add a Dynamic Vector to your design:
-
Shoppers see a pre-set vector or a list of vector options to choose from.
-
If you’ve uploaded multiple vectors, shoppers can switch between them by selecting from a product option (like dropdowns or swatches). Only one vector will show at a time—whichever one matches their selection.
- You define the position, size, and behavior of the vector; shoppers don’t upload or modify the artwork.
- If multiple color options are added, shoppers will see options to pick from them.
-
If Movable Vector is enabled, shoppers can also reposition or resize the image within the area you define.
In this article:
- How to add a dynamic vector
- Uploading vector/s into the dynamic vector
- Transform the dynamic vector
- How to add color options to the dynamic vector
- Allow shoppers to move the dynamic vector
Dynamic vectors can have one or multiple vectors in them. The file type supported by dynamic vectors is EPS. Make sure the EPS files you upload into the dynamic vector are composed of vector elements. If your EPS file has image elements inside (like PNGs or JPGs) or text elements (with font information) we recommend transforming everything to curves before uploading to Customily.
If you are unsure whether to use dynamic images or dynamic vectors, we recommend using images, as they load faster on previews. If you want to add images to your design check dynamic images.
To add a dynamic vector
You can add dynamic vectors on Designs a Templates by clicking the Dynamic Vector button.
Each dynamic vector you add will have a Name that you can edit, and a Unique Id for you to easily identify it.
Adding vector/s options into the dynamic vector
After creating the element you will need to add the vector/s that will go in it. You can add vectors in two ways:
- by using a vector library (which is the easiest way)
- by manually uploading all the vector options you'd like to have
Important
Vectors uploaded into the dynamic vector will be set to fit the dynamic vector area. So we always recommend uploading vectors with the same or very similar sizes, to avoid unwanted changes in size when switching between vector options.
To add vector/s into the dynamic vector using libraries
- First, you have to create a vector library. You can learn how to create a vector library here.
- Select the dynamic vector
- Click Pick Library
- Choose the vector library you'd like to use
You will see all the vector options displayed in a list. To see how they look, just click through them.
Tip
If you want to change the order of the vectors, you can do so by editing the library. Learn how to edit a library here.
To add vector/s into the dynamic vector manually
- Select the dynamic vector
- Click the + Add Vector Option button
- Select the vector or vectors (using shift) you want to upload
- Repeat 2 and 3 to add as many vector options as you want.
You will see all the vector options displayed in a list. To see how they look, just click through them.
To delete a vector option, click the to the right of the vector icon.
To edit a vector option, click the to the right of the vector icon, and upload a new vector.
Tip
You can change the vector options order by clicking the dots to the left of the option. Simply click and drag to rearrange them.
Transform the dynamic vector
Directly on the canvas or by expanding the Transform toolbox, you can transform the dynamic vector:
Keep in mind
Transforming the dynamic vector will transform all the vectors it contains inside. So if for example, you rotate the dynamic vector element, all vectors inside it will be rotated. If you want to transform one vector option only, you should edit the vector before uploading it into the dynamic vector element.
- Select the vector placeholder
- Expand the Vector Mode toolbox
- Select Single color from the Vector Type dropdown
- Click the color swatch or the color picker to select a color. Using the swatch you can add colors with Hex, RGB-A, or CMYK-A values (the last 2 depend on the color mode of your design). If you want to add transparency, just slide the Alpha control on the bottom of the chart.
Keep in mind the single color will be applied to all the vector options on your dynamic vector.
Tip
You can add multiple color options for your vectors. To add more than one color option you can either use a color library or assign multiple color options by clicking Add color option and choosing a new color.
Allow Movable Dynamic vector
Enabling this option allows customers to move and resize the dynamic vector inside the defined area. This is useful when you want to give shoppers more freedom in adjusting the layout—like repositioning an icon within a frame or shifting an artwork around a photo.
To allow Movable Dynamic vector
- Select the dynamic image element
- Expand the Vector Behavior toolbox
- Check Allow moving image vector bounding box
Tip
When this option is enabled, the dynamic vector dimensions will become the area of movement. Customers will be able to click and drag the vector to change its position within that area. If you want to make the area bigger, just resize the dynamic vector box on the canvas or with the tool box. To test it out in shopper-mode, double click the textbox to move the text around. The area of movement will become red.
If disabled, the text will stay locked in the position you define.