Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • The Top Bar
  • Menu
  • Publish settings
  • Autosave option
  • Device selector
  • Editor preferences
  • Undo/ Redo
  • Preview/ View live page
  • Publish/ Save settings
  • The Left Sidebar
  • Add elements panel
  • Add sections panel
  • Page layers
  • Add app blocks panel
  • Page templates
  • More page settings
  • More actions
  • The Inspector Panel

Was this helpful?

  1. FoxStudio 🔥

FoxStudio editor

FoxStudio is the most updated version of a page builder, offering you a free-form canvas to design and build.

PreviousWhat is FoxStudioNextFoxStudio tools

Last updated 4 months ago

Was this helpful?

New to FoxStudio?

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

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

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.

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

Publish settings

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

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

Device selector

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

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

Undo/ Redo

You can undo and redo changes made to your design in the editor. See more Undo & Redo

Preview/ View live page

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.

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

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

The Left Sidebar

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

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

  • 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

Add app blocks panel

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

Page templates

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

More page settings

These include:

  • Custom codes

  • Page revisions

  • Theme settings

Custom code

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

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.

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.

  • 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 💪

The Inspector Panel

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:

If you have published your page on your live theme, click View live page icon to see your page on the storefront.

See more

Publish settings: Navigate to the of your current page.

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.

Add app widgets to your pages using Foxify's .

Preview and use a Foxify template or to your current page any time.

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

Working with Pages
Layers
App extensions
your saved template
Keyboard shortcuts
Help center
Video tutorials
Changelog
Inspector panel
Publish settings
Theme settings
✨
✨
Learn what it is now
Basic settings
The me
| Code: BFCM2024WIN ⏰ Ends on Dec 24th, 2024 | *applied for 3 months
Install FoxTransfer Chrome Extension FREE here
GRAB HERE