What is FoxStudio?
FoxStudio is the most updated version of a page builder, offering you a free-form canvas to design and build.
Last updated
FoxStudio is the most updated version of a page builder, offering you a free-form canvas to design and build.
Last updated
New to FoxStudio? ✨ Learn what it is now ✨
In this article, we'll explore the different features and sections of FoxStudio to help you make the most of your design journey.
The Top Bar menu in FoxStudio helps you manage the page and offers quick access to app settings.
From left to right, we have:
Menu
Publish settings
Autosave option
Device selector
Editor preferences
Undo/ Redo
Preview/ View mode
Publish/ Save settings
This is your magic portal.
You can access everywhere in Foxify app from here:
Foxify Dashboard
Pages Manager
Section Manager
Translation
Analytics,
User settings, including:
Plan
Library
Account
Help resources, including:
Shortcuts
Help Center
Video tutorials
Changelog
In Publish settings, you can edit your page details to perfection before it goes live!
In Page Publish settings, you can update:
Page title
URL and handle
Page layout
SEO settings, including:
SEO title
SEO description
Social sharing image
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
View and edit your canvas on different viewports for the most common devices (desktop, tablet, mobile) to ensure a flawless experience!
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
You can undo and redo changes made to your design in the editor. See more Undo & Redo
Preview your progress in realtime, ensuring your design aligns with your vision.
If your storefront password is on, make sure you provide Foxify with your password to view the page.
See more Basic 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
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 of your current page.
The Left Sidebar in FoxStudio helps you access all your editor tools to build a page.
From top to bottom, we have:
Add elements panel
Add sections panel
Page layers
Add app blocks panel
Page templates
More page settings
More actions
Basic elements (Text, Buttons, Media, etc.)
Advanced elements (Layout, Tabs, etc.)
Shopify elements (Single product, Products, Collections, Blog posts, etc.)
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.
Working with SectionsAdd 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.
Preview and use a Foxify template or your saved template to your current page any time.
Simply Preview the template > Select on the one you like.
These include:
Custom codes
Page revisions
Theme settings
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.
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.
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.
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.
Product updates and announcements: Check out Foxify's latest updates and announcements.
Help resources, include:
Chat with us: Get in touch with our dedicated support team via live chat 💪
You can edit the settings and designs of elements, sections, and pages in the Inspector panel.
Modify element sizes for different breakpoints, adjust designs and layout, add animations, and more.
Read more in:
Inspector PanelIf you have published your page on your live theme, click View live page icon to see your page on the storefront.
Click the plus icon at the top left to open the elements panel. Use the tabs to navigate between the different categories. These include:
Click the layer icon 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.
.svg?alt=media&token=c806485a-0edc-468b-84a8-5873ad69e97d)
