Native Shopify app
Configure drawing areas, elements, and variations
Define fixed product parts and precise customer-editable regions, including masks generated directly from an element.
Guide overview
Before you start
- A custom product has at least one 2D view.
- Base media and configurable parts are present.
- The administration template exposes Elements and Drawing areas.
Expected result
Product elements remain intact while customer layers are clipped and controlled by separate drawing-area overlays.
Manage fixed product elements
Elements belong to the reusable custom product: product images, panels, overlays, meshes, and material targets. Even when they are not selectable on the canvas, administrators can select them from the Elements list in development mode.
Lock and restrict base elements so storefront customers cannot move the product itself.
Open Elements.
Select or create the product part.
Use the list selection action to reposition it.
Lock customer interaction.
Create the editable shape
Use a rectangle, import a sanitized SVG, or select an element and create a drawing area from its visible shape. The generated area is a separate overlay aligned with the source; it never replaces or removes the element.
Configure clipping, movement boundaries, insertion behavior, bleed, and non-printing markers.
Open Drawing areas.
Choose the creation method.
Select the source element if needed.
Align and configure the overlay.
Add and test variations
Create variation groups for product-owned elements and define explicit defaults. A variation may swap image media, material, color, texture, visibility, or associated price metadata.
Test every choice with customer text, images, designs, and shapes near each area edge.
Create the group and target.
Add choices and thumbnails.
Set the default.
Save, reload, and verify all combinations.