> ## Documentation Index
> Fetch the complete documentation index at: https://docs.customei.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Layers and arranging

> Find, rename, reorder, hide, and lock every piece of your design from the Layers panel.

A design template is a stack. The background sits at the bottom, the customer's photo goes on top of that, their name goes on top of everything. **Layers** is the list of that stack, and it is usually a faster way to work than clicking around the canvas, especially once a template has twenty pieces in it.

Open it with the fourth icon down the left rail of the editor.

<Frame caption="The Layers panel, opened from the left rail. The list runs top to bottom in the same order the pieces stack on the canvas.">
  <img src="https://mintcdn.com/nexlify/jObu3-blJWj5gxav/images/editor/layers-panel.png?fit=max&auto=format&n=jObu3-blJWj5gxav&q=85&s=c8a160ca69c529ff0af1fd164d3a4836" alt="The template editor with the Layers panel open on the left, listing numbered layers such as #16 Kid's Name and #13 Short Hair. The Layers icon in the left rail is highlighted." width="3840" height="2400" data-path="images/editor/layers-panel.png" />
</Frame>

## Reading the list

Each row tells you three things at a glance.

* **The small icon** on the left says what kind of layer it is: `Aa` for text, a picture icon for an image.
* **The number** (`#16`, `#13`) is the layer's number. That is the handle an option set uses to point at this layer, so a customer's choice knows what to change. Two layers can share a number on purpose, and then one choice drives both at once.
* **The name** is yours to set. `Kid's Name` and `Choose Pants For 2nd Woman` beat `Layer 7` when you come back to this template in three months.

The very last row, **Background**, is the canvas itself rather than something you added.

<Tip>
  Long template? Type into **Search layers** to filter the list down. It matches on the name, so naming layers properly pays for itself here.
</Tip>

## Picking a layer

Click a row to select that layer, and its settings appear in the right-hand panel. Hold **⌘** while clicking to select several at once.

You can also walk the list from the keyboard once something is selected:

| Key   | What it does                                      |
| ----- | ------------------------------------------------- |
| ↑ / ↓ | Move to the layer above or below                  |
| →     | Open a group                                      |
| ←     | Close a group, or jump up to the group it sits in |
| Enter | Rename the selected layer                         |

## Reordering

Drag a row up or down to restack it. Whatever is higher in the list is drawn in front on the canvas, so if a customer's name is disappearing behind their photo, drag the name above it.

## Hiding and locking

Hover a row and three controls appear on its right: a **⋯** menu, a **padlock**, and an **eye**.

<Frame caption="Hovering a layer reveals its own controls: the drag handle, the ⋯ menu, the padlock, and the eye.">
  <img src="https://mintcdn.com/nexlify/jObu3-blJWj5gxav/images/editor/layers-row-actions.png?fit=max&auto=format&n=jObu3-blJWj5gxav&q=85&s=476832ab65cbea3e9f77409091fdd7a1" alt="The Layers panel with the row #10 Choose Pants For 2nd highlighted, showing a drag handle on the left and the more-actions, padlock, and eye icons on the right." width="3840" height="2400" data-path="images/editor/layers-row-actions.png" />
</Frame>

* The **eye** hides a layer while you work. Hiding is a working view only, not a way to keep something off the finished product. If a piece should never print, delete it or let an option set decide when it shows.
* The **padlock** freezes a layer so you cannot drag or resize it by accident. Very handy for a border or a fixed logo you keep nudging.

<Warning>
  A layer inside a locked group cannot be freed from its own padlock. Unlock the group instead, otherwise the click does nothing.
</Warning>

## The right-click menu

Right-click any row for the rest of the actions.

<Frame caption="Right-click a layer for copy, duplicate, rename, hide, lock, and remove.">
  <img src="https://mintcdn.com/nexlify/jObu3-blJWj5gxav/images/editor/layers-context-menu.png?fit=max&auto=format&n=jObu3-blJWj5gxav&q=85&s=480fe9b387c3f27fed1e8e9206cc2e54" alt="The layer right-click menu listing Copy, Paste, Duplicate, Rename, Bulk edit names and IDs, Hide, Lock, and Remove in red." width="464" height="654" data-path="images/editor/layers-context-menu.png" />
</Frame>

Two more actions live on the keyboard rather than in this menu: **⌘⌥C** copies a layer's style and **⌘⌥V** pastes it onto another. Style carries the look, the font, size, and colour, without touching the words. Style one name field the way you want it, then paste that style onto the other three.

## Renaming a lot of layers at once

Renaming rows one by one gets old fast. Pick **Bulk edit names & IDs…** from the right-click menu and you get the whole template as a grid.

<Frame caption="The bulk editor: every layer's number and name in two columns, with a count of how many layers share each number.">
  <img src="https://mintcdn.com/nexlify/jObu3-blJWj5gxav/images/editor/layers-bulk-edit.png?fit=max&auto=format&n=jObu3-blJWj5gxav&q=85&s=7ef6cf0fe07a2d8304c8a06068131b37" alt="The Bulk edit layer names and IDs dialog showing Selected and All layers tabs, a filter box, and ID and Name columns for eighteen layers. Two rows share ID 9 and are marked times two." width="2016" height="1450" data-path="images/editor/layers-bulk-edit.png" />
</Frame>

* Switch between **Selected** and **All layers** at the top, or narrow the grid with **Filter by name or ID**.
* **Enter**, **↑** and **↓** step down a column, so you can retype a whole column without reaching for the mouse. You can also paste a multi-line list to fill a column in one go, which is the quickest way to bring names in from a spreadsheet.
* A badge like **×2** next to a number means two layers share it. That is fine when you meant it, and a bug when you did not: one customer choice will drive both.
* Numbers are whole numbers starting at 1. Leave a cell empty to keep what is already there.
* The **Background** row's number is reserved and cannot be edited.

Nothing is applied until you press **Save** in the dialog, and nothing reaches your live products until you save the template itself.

<Warning>
  Changing a layer's number breaks the link to any option set field pointing at the old number. Rename freely, but renumber only when you are ready to reconnect the option set.
</Warning>

## Where to next

<CardGroup cols={2}>
  <Card title="Connect an option set" icon="link" href="/optionsets/connect-to-a-template">
    Point a customer choice at a layer using its number.
  </Card>

  <Card title="What customers can change" icon="lock-open" href="/editor/customer-permissions">
    Decide which of these layers a shopper may edit.
  </Card>

  <Card title="Design and preview frames" icon="images" href="/editor/design-and-preview-frames">
    Understand the two frames the layer list belongs to.
  </Card>

  <Card title="Build a template" icon="pen-ruler" href="/templates/create-a-template">
    Start a new template from scratch.
  </Card>
</CardGroup>
