Every layout in Instant is built from nested elements — grids, rows, text, images, Shopify blocks, and more. The Layers panel, at the bottom of Layouts & layers, shows that structure as a tree so you can work with complex layouts without losing track of what's where.
Open the Layers panel
Switch to the canvas and open Layouts & layers (Alt+Shift+2). The top half lists your project's layouts; the bottom half is Layers for the layout you're currently editing. Drag the divider between them to give either list more room.
Click a layer to select that element on the canvas. The canvas and design panel update to match your selection.
Understand the tree
Layers mirror the nesting on your page. A grid at the top level contains rows or columns; those contain text, buttons, product cards, and so on. Indentation shows parent-child relationships, and the chevron next to a parent layer expands or collapses its branch.
Icons beside a layer name hint at special behavior:
An eye-with-slash icon means the layer is hidden at the current breakpoint.
A Shopify icon means the layer is connected to live Shopify content.
Interaction and conditional-visibility icons flag advanced behavior.
Use Collapse layers in the panel header to fold the tree around your current selection.
Reorder layers
Drag a layer up or down in the tree to change its position within its parent. This is often easier than dragging on the canvas when elements overlap.
With a layer selected, you can also use the arrow keys to move it within its parent container. In a grid, Arrow Up / Arrow Down move by row and Arrow Left / Arrow Right move by position.
Rename layers
Double-click a layer name, or select the layer and press Ctrl+R / Cmd+R, to rename it. Descriptive names like "Hero headline" or "Product grid" make large pages easier to navigate. Renaming is for your reference only — it doesn't change what shoppers see on the live storefront.
Show and hide layers
Visibility is set per breakpoint. Select an element on a smaller breakpoint (Laptop, Tablet, or Mobile) and toggle the eye control at the top of the design panel, or press Ctrl+Shift+H / Cmd+Shift+H, to hide it at that screen size.
Hidden layers show the eye-with-slash icon in the tree.
Hiding a parent hides its children too.
An element hidden on Mobile can still appear on Desktop.
Z-order (stacking)
When elements overlap, z-order controls which one appears on top:
Bring to front — the
]key or the right-click menu.Send to back — the
[key or the right-click menu.
Z-order matters for overlays, badges, and decorative elements that share the same grid area.
Wrap in container
Select one or more sibling elements and choose Wrap in container from the right-click menu. Instant groups them inside a new container so you can style, move, or hide them as a unit. This is especially helpful after multi-selecting several elements that should move together.
Layers and the design panel
Selecting a layer opens the same design panel you get from clicking on the canvas — edits in either place stay in sync. If you can't find an element on the canvas because it's buried under others, the Layers tree is usually the fastest way to reach it.