# Layout template 🧩

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

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FwGyyL0t8oKx0JXZ54rkx%2Fimage.png?alt=media&#x26;token=ea096d66-78a0-47d3-b4b6-53d104757c50" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F3zOfNtWFve4MJhcorDg0%2Fimage.png?alt=media&#x26;token=c369ddd9-2a12-4f59-be34-1c9063f39cac" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fck2fyyuQeTYA9O4EPhcq%2Fimage.png?alt=media&#x26;token=0d22c040-ac42-417e-9ff6-25611141e08b" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
:writing\_hand: Learn more: \
[page-customization](https://docs.foxecom.com/foxify-app/foxstudio/page-customization "mention")\
[layout-and-styling](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling "mention")

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

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FOBxFlaFyx3sSmLlSzzmO%2Fimage.png?alt=media&#x26;token=7b5b83fe-ae60-4bab-a762-11b8719ee925" 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FrUDegckQHVUit0nmRgEy%2Fimage.png?alt=media&#x26;token=2ef9df31-ba51-485b-94d9-fb8a8496278b" 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**.

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FFlUtx8EWG5LjH7mwSN8C%2Fimage.png?alt=media\&token=ebab3f7c-6f22-4638-91a1-ecb2cc7222f7)
{% endhint %}

## Manage Foxify layout templates

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

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Ff3L2S6uWteIdxOPZMAcO%2Fimage.png?alt=media\&token=b05fd86b-d0da-4286-ba38-1954f1ebe582)
{% 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="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FEj8YgLWvHPzkL3z1Emhb%2FBANNER%201%2C%202%20%20%20%20%20%20%20%20%20%20%20%20%20%20800x400%20(2)%20(1).png?alt=media&#x26;token=7e11de75-84e5-4576-902e-8c435aff2578" 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>