Prepare your product

Prepare your 2D layers.

One canvas. Aligned layers. Clear product choices.

Door frame on a full transparent canvas — Base

Oak door panel in the same position — Finish

Glass insert to the right of the shared canvas — Glass

Black handle to the left of the shared canvas — Handle

Complete oak door with glass and a black handle — One complete product

The empty space is part of every file.

Start with one shared canvas.

Keep size, camera, crop and position the same.

Same sizeSame originSame view

What needs to stay fixed?

Use one editable master file. Keep the product scale, perspective, lighting and shadows consistent. Export every part on the full canvas; do not trim empty pixels or centre each part separately.

1080 × 1080 is an example, not a fixed requirement.

Export the part.
Keep the empty space.

Use transparent layers for parts that change independently.

Layers or complete images?

Independent parts use PNG or WebP with transparency. A full scene or a different camera view may need a complete replacement image. JPG is suitable for complete opaque images, not transparent overlays.

Prepare one image for each finish or handle. You do not need to render every complete combination when the independent parts align reliably.

A handle with transparent empty space — Transparent background

White empty space would cover the images behind it — White background

Door frame used to show incorrect layer placement — Trimmed and centred

Incorrect: the handle has moved into the centre of the door — Trimmed and centred

The correctly combined door — Complete door

Layer order · back to front

PNG or WebP
with transparency

The checkerboard shows empty pixels. It is not part of the export.

Keep the quality.
Reduce the file size.

Compress your exports without changing their dimensions.

Sharp edgesSmall filesClear filenames

What should I check after export?

Inspect edges against light and dark backgrounds. Check fine detail and transparent borders at the size your customer will see. Keep your editable master; compression depends on the image, so there is no single target file size for every layer.

Original oak PNG export — Original export

Smaller oak WebP export on the identical canvas — Optimized export

Zoomed edge of the oak panel showing transparent space — Zoomed transparent edge

door_base.webpfinish_oak.webphandle_black.webp

Actual file sizes from the sample pack. Your images may differ.

Connect the layers in ConfigUX.

Add your images. Review the connections. Test your choices.

AssetsOptionsPreview

Door · 2D sampleSample workspace

OptionsMappingPricesElementsViewerLayoutBrand

← Back to Finish

Oak

Oak

Available

Added priceIncluded

Image connectionConnected ›

VisibilityAlways ›

Tooltip & helpOff ›

Label & detailsEnglish ›

Open a choice in Options to review its Image connection.

2D product view

Finish

Handle

Oak + Black · Try the choices. The frame and glass stay in place.

1 · Add images
Upload in Assets or add your files when creating the configurator.
2 · Review
Open your choice in Options and check its Image connection.
3 · Preview
Try every finish and handle. Check alignment on desktop and mobile.

How do layered connections differ from full images?

A layered project keeps the base and combines independent transparent images in a fixed order. The current Studio preserves those existing layered connections. Its simple “Product image” and “Apply image connection” controls assign a complete replacement image. A transparent handle alone is not a complete replacement product image.

This is an illustrative Studio view using the sample files. The buttons demonstrate the layer result locally; they do not create or edit a configurator in your account.