Layers - Left panel navigation

TheLayerssection in the Left Panel allows users to manage theorganization, hierarchy, and visibilityof every object added to the design canvas. Each element-whether a product, shape, text label, or uploaded image is represented as an individuallayerin this panel.

This feature gives users complete control over how elements appear on top of or behind each other, enabling clear arrangement and efficient editing of complex layouts. It helps maintain a clean, structured workspace, especially when working on designs that include multiple overlapping elements.

TheLayers panelis an essential tool for precise layout management and provides a visual list of every element present in the design. It allows users toreorder, grouping, rename, hide, or lockspecific elements without affecting others.

1. Shows all design elements (products, shapes, text, and images) in order of their stacking position on the canvas. The topmost layer in the list appears above others in the design.
2. Selecting an object on the canvas automatically highlights its corresponding layer, and vice versa-ensuring easy tracking of objects.
3. Layer Reordering (Drag & Drop):
   1. Click and drag any layer upward or downward to rearrange its position.
   2. Moving a layer up brings it to the front of the design; moving it down sends it behind other elements.
   3. Useful for arranging overlapping objects such as lounge chairs over deck tiles or text above images.
4. Visibility Toggle (👁):
   1. Each layer has an eye icon that allows users to hide or show it.
   2. Hidden layers remain part of the design but are temporarily invisible on the canvas.
   3. Perfect for isolating specific areas of a layout while editing.
5. Lock/Unlock Layers (🔒):
   1. Lock important layers to prevent accidental movement or edits while working on other elements.
   2. Ideal for protecting background elements, fixed deck boundaries, or reference shapes.
   3. Unlock at any time to make changes again.
6. Grouping : Select multiple layers (Shift/Ctrl + click) to group, move, align, or change properties together. Grouped layers can be collapsed/expanded in the panel.
7. Double-click a layer name to rename it for better identification.
8. Recommended when working with multiple similar elements (e.g., “Left Chair,” “Umbrella 1,” “Main deck Shape”).
9. Users can rearrange grouped layers to maintain logical stacking order.
10. The currently selected layer is visually highlighted in the panel, showing which object is being edited on the canvas.
11. Every change in position, visibility, or name is updated immediately in the design view.
12. Displays all objects, shapes, products, and images in a stacked list format, showing how they are arranged on the canvas.
13. Clicking a layer automatically highlights and selects the corresponding object on the design canvas.
14. Drag and drop any layer up or down in the list to change the stacking order-useful for bringing one object to the front or sending it behind others.
15. Rename any layer to identify objects easily, especially in large or detailed projects.
16. The currently selected layer is highlighted, indicating which object is being edited on the canvas.

How to Use:

1. In the Left Panel clickLayers.Review the list of layers currently present in your design.
2. Click a layer row to select and center its object on the canvas.
3. Click + drag a layer up to bring it to front, or down to send it backward. Release to drop.
4. Click theEye (👁)icon to hide/show the layer. Hidden layers remain in the list.
5. Click theLock (🔒)icon to lock the layer-locked layers cannot be selected or modified until unlocked.
6. Double-click the layer name (or chooseRenamefrom the context menu), type a new name, pressEnter.
7. HoldShift(range) orCtrl/Cmd(individual) and click layers to multi-select. UseGroupto bundle selected layers-group collapses in the list and can be moved/edited together.
8. Use the Duplicate icon (or context menu → Duplicate) to copy a layer; use the Trash/Delete icon to remove it.