Vector placeholders are places where customers can upload their own vectors. A vector placeholder sets the boundaries where the vector will be uploaded, and is represented on the canvas by a dashed line. You can format vector placeholders in many ways to give customers further options.

How It Works

When you add a Vector placeholder to your design:

• Shoppers will be able to upload their own vectors (PDF, SVG, EPS).

• The vector appears inside the placeholder you set on the design.

• You control the shape, position, and size of the placeholder. 

• Shoppers are able to move the vector inside the placeholder.
• If multiple color options are added, shoppers will see options to pick from them.

In this article:

• How to add a vector placeholder
• Transform the vector placeholder
• Change the uploaded vector behavior
• Change the vector mode, between full color or single color
• How to test how the user-uploaded vector will look

To add a vector placeholder

You can add vector placeholders on Designs and on Templates, by clicking the Vector Placeholder button.

Each vector placeholder you add will have a Name that you can edit, and a Unique Id for you to easily identify it. 

Transform the vector placeholder

Directly on the canvas or by expanding the Transform toolbox, you can transform the image placeholder:

• Position
• Rotation
• Size
• Flip
• Order

Change the uploaded vector behavior

Changing the behavior of the placeholder will affect what happens when a customer uploads a vector. You can configure different behaviors to apply effects and filters to the vector:

• Fit / Fill the placeholder area
• Rotation Lock

Fit / Fill

By default, customer-uploaded vectors are set to fit the placeholder. If you'd like the vector to cover the entire placeholder, then you should enable the fill checkbox. When vectors fill the placeholder, they are resized (proportionally) to occupy the entire placeholder.

1. Select the vector placeholder
2. Expand the Vector Behavior toolbox
3. Check or uncheck Fill Area option 

Rotation Lock

By default, customer-uploaded vectors can be rotated freely inside the placeholder. If you want customers only to be able to rotate it in 90° increments, then you should enable the 90 Degree Rotation Lock checkbox. 

1. Select the vector placeholder
2. Expand the Vector Behavior toolbox
3. Check or uncheck 90 Degree Rotation Lock option 

Change the vector mode

When shoppers upload a vector file, you can choose how it should appear using Vector Mode. This controls whether the vector keeps its original colors or is converted into a single color.

You can choose between 2 vector types to change the color mode of the user-uploaded image. Image types available are:

1. Select the image placeholder
2. Expand the Vector Mode toolbox
3. Select from the dropdown the Vector Type
4. If you selected Single Color, click the color swatch 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.

Tip

You can add multiple color options to a single color vector. 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.

You can see a step-by-step guide on how to do that here.

Test how the user-uploaded vector will look

At any moment while configuring your vector placeholder, you can test how it will look on your design, by clicking Try with a SVG, EPS, or PDF button.

This is just for you to test, whatever vector you upload there won't be saved, and won't be visible to your customers ever.