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
  • What is Pan & Zoom mode 🔍
  • How to enable Pan & Zoom mode ⚙️
  • How it works 🖱️
  • Move around your canvas easily
  • Zoom in and out like a pro
  • Best practices ✅

Was this helpful?

  1. FoxStudio 🔥
  2. FoxStudio tools

Pan & Zoom mode

Navigate and zoom around your canvas with ease for a better editing experience

PreviousGrids guide and Snap linesNextInspector panel

Last updated 20 days ago

Was this helpful?

Easily navigate and preview your pages, especially on large screens or complex layouts. Whether you're fine-tuning your page design or working on detailed sections, this mode helps you view and move around the editor more freely and with precision.

What is Pan & Zoom mode 🔍

Pan & Zoom mode allows you to:

  • Zoom in/out of the canvas to see more or fewer page details.

  • Pan (drag) across different parts of your page without scrolling.

  • Get better control over layout adjustments, especially helpful when working on large desktop views or zoomed-out perspectives.

How to enable Pan & Zoom mode ⚙️

You can toggle this feature directly in the Foxify Editor:

Steps:

In the Top bar of the editor, toggle to turn on the Pan & zoom mode.

or

Click the Editor preferences icon, select the option Enable pan & zoom mode.

Once enabled, you'll see the Zoom Toolbar appear at the bottom center of the canvas.

How it works 🖱️

Move around your canvas easily

  • Hand tool: Click the hand icon 🖐️ in the toolbar to enable pan mode.

  • Mouse navigation:

    • Click and drag to pan across the canvas

    • Scroll to pan vertically (up and down)

Hold down the Spacebar to temporarily switch to the hand tool.

Zoom in and out like a pro

When you first open the editor, the canvas loads at Zoom to 100% by default.

Keyboard shortcuts & scroll:

  • Ctrl + scroll up / Cmd + scroll up → Zoom in

  • Ctrl + scroll down / Cmd + scroll down → Zoom out

Zoom menu options:

  • Choose Zoom to fit to view the entire design area in one frame.

  • Select Zoom to 100% to return to actual size.

  • Snap to center top: Click this option to instantly scroll to the top of your design while maintaining your current zoom level.

Best practices ✅

  • Keep your browser zoom at 100% for full access to editing tools and best performance.

  • Use Zoom to fit before publishing to quickly review your full design layout.