Fox Studio: Get to know the Editor

Fox Studio is packed with powerful tools to help you build stunning websites without coding. In this guide, we'll explore the different features and sections of the editor to help you make the most of your design journey.

The Top Bar

The menu bar at the top of Fox Studio contains several tools and settings to help you manage your page and quick access to app configuration. Have a look through the menus to see what you can do.

See details

From left to right:

• Settings: Access your Foxify dashboard, Translation, Analytics, app settings, and our help resources.

• Page title: Change your page title anytime.

• Device selector: Access the canvas on different viewports for the most common devices (desktop, tablet, mobile).

• Editor tools management: Turn on/Turn off the editor's grids guide, snap lines, container borders when dragging in your canvas and autosave mode.

• Actions: Preview, Save, Publish, Save as template, Import/Export your page.

The Left Side Panel

Add elements panel

Click the plus iconat 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.)

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.

Page layers

Click the layer iconto 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.

Add app blocks panel

Add app widgets to your pages using Foxify's App extensions.

For some apps, you will need to check for the result on the live page, when the page has been published.

Page templates

Preview and apply a pre-made template or your saved template to your current page at any time.

More actions

Custom code

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

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 instead.

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.

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.

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.

The Inspector Panel

Edit the properties of elements, sections, and pages in the Inspector panel. Modify element sizes for different breakpoints, adjust designs, layout, add animations, and more.