# Layout template 🧩

{% embed url="<https://youtu.be/dxWMgpGc9PE>" %}

<figure><img src="/files/7htvO7fABjp3rR8knwVi" alt=""><figcaption></figcaption></figure>

With the **Layout template** feature, you can now create and apply **custom headers and footers** for your Foxify pages — without relying on your theme’s default structure.

This gives you total creative control to **design site-wide elements** that match your brand and UX vision.

## Why use Layout templates?&#x20;

Here are a few reasons why this new feature rocks:

* **Custom branding**: Design unique headers/footers to reflect campaigns or seasonal promos (e.g. Mother's Day, Black Friday, etc.).
* **Consistent UI**: Apply one layout across multiple pages for design consistency.
* **More control**: Avoid limitations from the theme’s built-in layout structure.
* **Efficiency**: Edit once, apply to many — no need to manually copy/paste sections across pages.<br>

## How to create a Layout template for FoxStudio pages

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

1. In the FoxStudio editor, open the **Layouts manager** from the left sidebar.
2. Click **Create new layout**.
3. Select the new layout you have created to customize it.
4. Once you've done designing, **Save & Publish** the layout.
   {% endhint %}

<figure><img src="/files/7KojF9wtBU4hWbrLyi8R" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Customize your layout template:

* Add sections/elements **above the Content area** for **Header** section.
* Add sections/elements **below the Content area** for **Footer** section.

:white\_check\_mark: Design these areas just like you would with your Foxify pages.&#x20;
{% endhint %}

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

{% hint style="info" %}
:writing\_hand: Learn more: \
[Page customization](/foxify-app/foxstudio/page-customization.md)\
[Layout & styling](/foxify-app/foxstudio/layout-and-styling.md)

💡 Tip: Use **pre-designed sections** for a quick start and inspiration.
{% endhint %}

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

{% hint style="warning" %}
The number of published layout templates depends on your current plan limits.

To see your plan details, go to **Settings > Plan**.
{% endhint %}

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

1. Open the page you want to apply the layout to in Foxify.
2. Click on the **Layout settings** in the top toolbar.
3. In the **Layout settings** panel, find the **Layout templates** setting.
4. Select your published layout template from the list.
5. Hit **Update** to apply the layout to your page.&#x20;
   {% endhint %}

✅ Done! Your yustom header and footer will now show on that page.

{% hint style="info" %}
:pushpin: For best results, set the Page layout as Blank layout when using a Layout template from Foxify.
{% endhint %}

{% hint style="success" %}
All available templates are shown in the Layout templates selector. However, only published layout templates can be displayed on the preview page or live page.
{% endhint %}

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

{% hint style="info" %}
:pushpin: You can always switch between a **Theme layout**, **Blank layout**, or your custom **Layout templates**.

To set the page to use Theme layout or Blank layout, select the **Layout templates as None**.

![](/files/EJcOFsU0QS6XCjnTX9R8)
{% endhint %}

## Manage Foxify layout templates

{% hint style="success" %}
🟢 Green dot = Published layout\
⚫ Gray dot = Draft layout

![](/files/eYHGiIgN4iTEImrVwBSS)
{% endhint %}

From the **Layouts manager**, click the **three-dot menu** on any layout to:&#x20;

:abc: **Rename**: Give your layout a descriptive name.

📄 **Duplicate**: Quickly create a new layout based on an existing one — perfect for small variations.

🗑️ **Delete**: Remove unused layouts to keep your workspace clean. This action cannot be undone.

{% hint style="warning" %}
When you delete a layout template, you will be prompted to **update the Layout template used for those pages before continuing**.
{% endhint %}

## FAQs

### Can I apply the same layout to multiple pages?

Yes! That's one of the main perks. One layout template can be used across Foxify pages.

### What happens if I edit a layout template that's already applied to a page?

All pages using that layout template will reflect the changes - instant updates, no manual rework.

***

<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_layout_template&#x26;utm_campaign=anchor-text&#x26;utm_term=try-foxify-ai"><mark style="color:orange;">Try Foxify AI</mark></a> ✨</p></figcaption></figure></div>


---

# 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/layout-template.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.