Resources

×

Visual CMS

Drag-and-drop visual editor and headless CMS for any tech stack

Theme Studio for Shopify

Build and optimize your Shopify-hosted storefront, no coding required

Resources

Blog

Get StartedLogin

☰

Forum

Blog

Github

Signup

Made in Builder

Using layers

You can find an overview of every element on your page in the Layers tab and achieve the following:

  • View the hierarchy of nested elements.
  • Drag-and-drop layers for precision placement.
  • Add, remove, and rename elements.
  • See which layers have features such as an animation, action, binding, or event.
Screenshot of the Layers tab showing a dozen layers, with some nested within others.

Renaming layers

To rename a layer, double-click on the layer and enter the new name. Name layers to give your element a specific name instead of the default. This can give you a better idea of what each layer contains. 

Nested layers

A nested element is a child element inside of a parent container. An element with nested elements has an arrow next to it that shows all nested layers.

Animations, actions, and events

If an element has features such as an animation, action, binding, or event, it will feature an indicator icon, as in the following example:

Adding, deleting, and moving layers

You can select an block in the Insert tab, drag it to the Layers tab, and drop it wherever you like among the other layers.

To nest the block, hover the block where you'd like to place it. Blue lines appear to show you where you are placing the block and whether you're nesting it within another layer.

👉Tip: Because of the way browsers understand webpage code, when you move a layer, you are adjusting the structure of your page. If you have styles on a layer and you remove one of its child layers, those styles the child layer inherits from the parent no longer apply to the child.

If you accidentally move a layer, you can step backwards by undoing with Cmd+z on a Mac and Ctrl+z on a PC.

Up Next

Shopify FAQ
Was this article helpful?