# Quick start guide

Welcome on board 👋

This guide takes you from a blank Foxify account to your first live page.

<Embed url="https://youtu.be/bIm_mTrVE18" />

*Not installed yet?* See [How to install Foxify](https://docs.foxecom.com/foxify-app/getting-started/setup-and-quick-start/how-to-install-foxify)

<Stepper>
  <Step title="Create a page">
    In the Foxify dashboard, click **Create page** and choose a page type. You'll have three ways to start:

    * **Start from a template**<br />Browse templates by page type or industry. Click **Preview** to see a template in full, then **Select** to open it in the editor.
    * **Generate with AI**<br />Describe your page in a text prompt — your store type, the goal of the page, and the style you want. The AI Layout Generator builds a full layout in seconds. You can edit everything it generates. Learn more: [AI Layout Generator](https://docs.foxecom.com/foxify-app/pages/page-creation/ai-layout-generator)&#x20;
    * **Build from scratch**<br />Start with a blank canvas and design every detail your way

    <Hint type="info">
      If this is your first page, start from a [template](https://docs.foxecom.com/foxify-app/pages/templates) — it's the fastest way to see what Foxify can do and have something to customize right away.
    </Hint>
  </Step>

  <Step title="Customize your page">
    Inside the editor, you're in full control of layout and design. A few tools to know:

    * [Stack](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/stack-elements) — arrange elements vertically with consistent spacing
    * [Grid](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/cells-and-grids) — build flexible, responsive layouts
    * [Constraints](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/constraints) — dock elements where you want them on the page
    * [Pan & Zoom](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/pan-and-zoom-mode) — navigate your design without losing your place

    Drag and drop sections or elements onto the canvas, adjust spacing, and refine styles — everything updates in real time. You can also [copy and paste elements or styles](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/copy-and-paste-elements) anywhere on your page to speed up repetitive work.&#x20;
  </Step>

  <Step title="Check mobile">
    Switch between desktop, tablet, and mobile views using the **device selector** at the top of the editor.

    If your layout needs adjustment on mobile, click [AI Responsive](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/ai-responsive) to automatically fine-tune spacing and sizing across screen sizes — or adjust manually using the Inspector panel.

    [Watch tips for working in mobile view](https://youtu.be/7ISin63dxig?si=VKsHPt06qAypf4bN)
  </Step>

  <Step title="Add animations">
    Once your layout is ready, bring it to life with animations. Animations help guide customer attention and create a smoother browsing experience.

    Select an element — an image, button, or text block — and apply an animation from the Inspector panel. A little motion goes a long way in making your page feel dynamic and polished. [Learn more](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations)
  </Step>

  <Step title="Preview and publish">
    1. Click **Preview** to check your page on desktop and mobile.
    2. If everything looks right, click **Publish**.

    You can update or unpublish your page anytime.&#x20;

    Page not showing on your store after publishing? [Check out our help article here](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/troubleshooting/published-page-is-not-visible-on-live-store)
  </Step>
</Stepper>

## What's next?

<PageLink href="page://cdeb0782-171d-4451-abc4-fb4881c6d0da" subtitle="Full reference for Stack, Grid, Constraints, and more">
  Explore FoxStudio editor tools
</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/pages/page-creation/create-a-product-page" subtitle="Guided walkthrough for product pages">
  Build a high-converting product page
</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/pages/page-creation/create-a-home-page" subtitle="Guided walkthrough for homepages">
  Builde a home page that drives engagement
</PageLink>

<PageLink href="https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements" subtitle="Full reference for all available elements">
  Add elements to your page
</PageLink>

<div data-full-width="false" />