# Layers

<div data-full-width="false"><figure><img src="/files/kcilvHtHzK8t5VOGf1nR" alt=""><figcaption><p>Foxify AI turns a prompt into a well-structured page layout in seconds. <a href="https://admin.shopify.com/apps/foxify-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_layers&#x26;utm_campaign=anchor-text&#x26;utm_term=try-foxify-ai"><mark style="color:orange;">Try Foxify AI</mark></a> ✨</p></figcaption></figure></div>

The Layers panel provides a clear overview of your page structure, displaying all sections and elements in a hierarchy from top to bottom.

<figure><img src="/files/8yFC8WPsYFWKRMlODhMF" alt="" width="306"><figcaption></figcaption></figure>

## Open the Page Layers

{% hint style="success" %}
**Steps:**

1. From the left-side bar of the editor, click **Layers** or press (**L**).
2. The **Page Layers** panel of the page will be opened.
   {% endhint %}

Elements nested within other elements form a parent-child relationship, clearly visible in the panel. By clicking on a parent element, you can expand and view its child components.

## Manage a layer

Perform actions like moving the element up or down, renaming duplicating, exporting and so on.

{% hint style="success" %}
**Steps:**

1. Click on the layer's name.
2. Click the **More actions** <img src="/files/wths7LjyyWsz693Y4nsY" alt="" data-size="line">icon next to the layer's name.
   {% endhint %}

<figure><img src="/files/KOKCocLp41SObhbmk5hI" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

* The layer that has the [animation effect](/foxify-app/foxstudio/layout-and-styling/animations.md) enabled will have the icon :zap: next to its name.

![](/files/lCl4MmoD18ISPdsMDcab)

* The layer that is hidden will have its name dimmer than the other.&#x20;

![](/files/26hEIXXSMMxRvM8l8GPk)
{% endhint %}

## Re-order Layers

Easily re-order the elements and sections on your current page by drag and drop them in the Layers panel.&#x20;

Moving the elements around in the Layers panel will affect their position on the canvas.

<figure><img src="/files/1MXdmDfjih6k3JKQv8Q7" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/layers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
