How to Create a Border Around a Zone for Product Mockups

Product Mockups allow designs to be placed directly onto products for real-time visualization. This feature, sometimes referred to as product image backgrounds, makes it possible for users to preview artwork on items such as apparel, packaging, signage, or merchandise using our sdk.

To set up a product mockup in the Editor, you’ll first need to ensure the project has a transparent background. Once the background is transparent, you can add a zone and a visible border to clearly show users where their design will appear.

How to Set the Background to Transparent

1. Go to Background
2. Click on Fill
3. Select the transparent square (the red diagonal icon)

How to Add a Zone

1. Click the Images or Media button on the left menu 
2. Click the Zone option creating an empty Zone (a placeholder icon will appear)
3. Choose the Element Position to be Fit, not Masked

How to Create a Border Around the Zone

1. In the left-hand panel, click Shapes
2. Select a square and resize it to match the exact size and position of the zone
3. Click Stroke and add a border
4. Click Fill and set it to transparent
5. Under Arrange, move the square layer behind the zone

This will create a visible outline that shows users exactly where their design will be placed on the product mockup.

How to Exclude the Border around the Zone from Export 

To ensure the border does not appear in the final export, you’ll want to tag it with a class such as no_print (or no_export).

This requires the Classes feature to be enabled in your account. If Classes are not yet enabled, you can email support@designhuddle.com with the class name you’d like to use, and our team can help get that set up.

Once Classes are enabled, follow these steps:

1. Select the square shape that is being used as the border
2. In the left hand menu, locate the Class dropdown
3. Assign the designated class (for example, no_print) to the shape

This will ensure the border is visible to users in the Editor, but excluded from the exported output.

Before publishing the template, we also recommend locking the border shape so users cannot move or edit it.

If you are looking for more information on product mockups, please visit our playground for an example, documentation and/or reach out to support@desinghuddle.com.