# FoxStudio editor

{% hint style="success" %}
New to FoxStudio? :sparkles: [**Learn what it is now**](https://foxecom.com/blogs/all/shopify-visual-page-builder) :sparkles:
{% endhint %}

In this article, we'll explore the different features and sections of FoxStudio to help you make the most of your design journey.

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

## The Top Bar

The Top Bar menu in FoxStudio helps you manage the page and offers quick access to app settings.

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

From left to right, we have:

1. Menu
2. Publish settings
3. Autosave option
4. Device selector
5. Editor preferences
6. Undo/ Redo
7. Preview/ View mode
8. Publish/ Save settings

### Menu

This is your magic portal.&#x20;

<figure><img src="/files/VQB1KNH6NNt5QvYvKTaW" alt=""><figcaption><p>The me</p></figcaption></figure>

You can access everywhere in Foxify app from here:&#x20;

* Foxify Dashboard
* Pages Manager&#x20;
* Section Manager
* Translation
* Analytics,&#x20;
* User settings, including:&#x20;
  * Plan
  * Library
  * Account
* Help resources, including:
  * Shortcuts
  * Help Center
  * Video tutorials
  * Changelog

### Publish settings

In Publish settings, you can edit your page details to perfection before it goes live!

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

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

In **Page Publish** settings, you can update:

* Page title
* URL and handle
* Page layout
* SEO settings, including:&#x20;
  * SEO title
  * SEO description
  * Social sharing image

### Autosave option

You can set your editor to save automatically after every change you make, or you can disable the feature to save your customize manually.

See how to enable Autosave for your page: [Autosave](/foxify-app/foxstudio/editor-tools/autosave.md)

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

### Device selector

View and edit your canvas on different viewports for the most common devices (desktop, tablet, mobile) to ensure a flawless experience!

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

### Editor preferences

You can set how you want to work with your editor.

In the Editor preferences, you can enable/disable:

* Show grids guide
* Show snap lines
* Show container borders
* Enable autosave.

To learn more about Grids guide and Snap lines, see [Grids guide and Snap lines](/foxify-app/foxstudio/editor-tools/grids-guide-and-snap-lines.md)

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

### Undo/ Redo

You can undo and redo changes made to your design in the editor. See more [Undo & Redo](/foxify-app/foxstudio/editor-tools/undo-and-redo.md)

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

### Preview/ View live page

Preview your progress in realtime, ensuring your design aligns with your vision.&#x20;

If you have published your page on your live theme, click **View live page** <img src="/files/PZ1IqxIfIZi4pieFouav" alt="" data-size="line"> icon to see your page on the storefront.

{% hint style="info" %}
If your storefront password is on, make sure you provide Foxify with your password to view the page.

See more [Quick start guide](/foxify-app/getting-started/setup-and-quick-start/quick-start-guide.md#basic-settings)
{% endhint %}

### Publish/ Save settings

Control when and how your changes are visible to your users. These include:

* **Save**: Manually save changes you made in the editor.
* **Publish**: Publish the page/changes to your theme.
* **Save & Publish**: Save the changes and publish them to your theme.
* **Unpublish**: Unpublish a published page.
* **Save as template**: Save the template as your own custom template for future projects. See more [Save a page as a template](/foxify-app/page-management/templates/save-a-page-as-a-template.md)
* **Import/Export**: Import a page to Foxify or export a Foxify page you have created.
* **Translate content**: Localize your page content if you sell in multiple languages.
* **Publish settings**: Navigate to the [Publish settings](#publish-settings) of your current page.

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

<figure><img src="/files/osE0TqmEK0BTYKBoIrie" alt=""><figcaption><p><a href="https://www.figma.com/community/plugin/1415136291103675876/figma-to-shopify-with-foxify-shopify-page-builder?utm_source=help+center&#x26;utm_medium=banner&#x26;utm_campaign=figma+to+shopify+fxf+launch">Use free now </a><span data-gb-custom-inline data-tag="emoji" data-code="26a1">⚡</span></p></figcaption></figure>

<figure><img src="/files/w4KcZVGhV8kMjivsnpdR" alt=""><figcaption><p><a href="https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom&#x26;utm_medium=helpcenter&#x26;utm_campaign=foxtransfer_launch">Install FoxTransfer Chrome Extension FREE here</a></p></figcaption></figure>

## The Left Sidebar

The Left Sidebar in FoxStudio helps you access all your editor tools to build a page.

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

From top to bottom, we have:

1. Add elements panel
2. Add sections panel
3. Page layers
4. Add app blocks panel
5. Page templates
6. More page settings
7. More actions

### Add elements panel

Click the plus icon <img src="/files/1SnnOOxBZNQqGnjWHIBI" alt="" data-size="line">at the top left to open the elements panel. Use the tabs to navigate between the different categories. These include:

* Basic elements (Text, Buttons, Media, etc.)
* Advanced elements (Layout, Tabs, etc.)
* Shopify elements (Single product, Products, Collections, Blog posts, etc.)

<figure><img src="/files/8Bxi6ofC5d86HnHMrPg1" alt=""><figcaption></figcaption></figure>

### Add sections panel

Think of sections as the building blocks of your page. They allow you to easily structure and organize your content in a clear and visually appealing way.

In the editor, you can add a blank section to start from scratch, a wireframe, or a pre-designed section. The sections are organized by purpose (Banner grid, Collapsible content, Countdown timer, etc.).  Whatever type of section you choose, you can add all the elements you need and customize them to suit the section's intent.

{% content-ref url="/pages/KHNhm1teox3k6XyAsMnD" %}
[Page customization](/foxify-app/foxstudio/page-customization.md)
{% endcontent-ref %}

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

### Page layers

Click the layer icon ![](/files/NaBlHbh56KWH95fNre29) to see all of your page's sections in a hierarchy order. You can use the panel to change the order, duplicate, rename, or delete a section or any element inside.&#x20;

{% content-ref url="/pages/MrWM1r5L3ERggeqPdhyI" %}
[Layers](/foxify-app/foxstudio/editor-tools/layers.md)
{% endcontent-ref %}

<figure><img src="/files/3b2SDxpmjSPWaXVutlWI" alt=""><figcaption></figcaption></figure>

### Add app blocks panel

Add app widgets to your pages using Foxify's [App extensions](/foxify-app/page-management/app-extensions.md).

{% hint style="info" %}
For some apps, you will need to check for the result on the live page, when the page has been published.
{% endhint %}

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

### Page templates

Preview and use a Foxify template or[ your saved template](/foxify-app/page-management/templates/save-a-page-as-a-template.md) to your current page any time.

Simply **Preview** the template > **Select** on the one you like.

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

### More page settings

These include:

* Custom codes
* Page revisions
* Theme settings

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

#### Custom code

Add custom CSS and custom JS to your current page as you like if you're familiar with coding knowledge.

{% hint style="info" %}
Custom codes added here only affect pages using this template. If you want to add custom codes that work for all Foxify pages, please use the option in the [Theme settings](#theme-settings) instead.
{% endhint %}

<figure><img src="/files/9BGJSqJr4lWf4XTq8MEV" alt=""><figcaption></figcaption></figure>

#### Page revisions

Click the clock icon to view the version history. Here, you can browse all saved versions of your page, preview them, and revert to a previous version in seconds.

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

{% hint style="info" %}
The number of page revisions you can view and revert to depends on your app plan.

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

#### Theme settings

Use **Theme settings** to make changes to your page Layout, Product cards, Collection cards, Currency format, and so on.

When you make changes in your theme settings, the changes apply to your entire Foxify pages.

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

### More actions

Find available 24/7 resources to leverage your journey with Foxify!

* **Notifications**: Access all the page's notifications (whether when the page is created or published) to be on track.&#x20;
* **Product updates and announcements**: Check out Foxify's latest updates and announcements.
* **Help resources**, include:
  * [Keyboard shortcuts](/foxify-app/foxstudio/editor-tools/keyboard-shortcuts.md)
  * [Help center](https://docs.foxecom.com/foxify-app)
  * [Video tutorials](https://www.youtube.com/@FoxEcomOfficial)
  * [Changelog](https://help.foxecom.com/changelog/foxify)
* **Chat with us**: Get in touch with our dedicated support team via live chat 💪

<figure><img src="/files/34NSu6N0wtzPcVEbYUb9" alt=""><figcaption></figcaption></figure>

## The Inspector Panel

You can edit the settings and designs of elements, sections, and pages in the Inspector panel.&#x20;

Modify element sizes for different breakpoints, adjust designs and layout, add animations, and more.

Read more in:

{% content-ref url="/pages/nn8kp3o86xxN6hMR1PN9" %}
[Inspector panel](/foxify-app/foxstudio/editor-tools/inspector-panel.md)
{% endcontent-ref %}

<figure><img src="/files/X6SPpRVhmbfrv7lpnpwJ" 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/foxstudio-editor.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.