# Quick start guide

**Welcome on board**:wave:**!** Let's get started with Foxify.

{% embed url="<https://youtu.be/bIm_mTrVE18/>" %}

{% hint style="success" %}

### Who is this guide for?

Anyone looking to create their first page with Foxify page builder quickly.&#x20;

We'll guide you through the necessary steps to get things up and ready.
{% endhint %}

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

***

{% stepper %}
{% step %}

### Create your first page

Foxify offers three flexible ways to start building. Choose the method that fits your workflow:

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F8lTmgHFmjeNqHfJRdEro%2Fimage.png?alt=media&#x26;token=969b97ec-a760-4b57-af5a-0f2f63fafe62" alt=""><figcaption></figcaption></figure>

<details>

<summary>✨ Start from a Template</summary>

Choose from a library of professional, ready-made page templates designed for conversion and industry use cases.\
A fast way to launch a polished page.

→ Learn more: [templates](https://docs.foxecom.com/foxify-app/page-management/templates "mention")

{% hint style="info" %}
Foxify's templates are released and updated regularly. :sparkles: View [Changelog](https://docs.foxecom.com/foxify-app/getting-started/setup-and-quick-start/broken-reference). :sparkles:
{% endhint %}

</details>

<details>

<summary>✨ Create with AI (AI Layout Generator)</summary>

Describe the page you want—your brand style, sections, goals—and Foxify’s AI instantly generates a ready-to-customize layout.\
Ideal if you need a strong wireframe but don’t want to start from scratch.

→ Learn more: [ai-layout-generator](https://docs.foxecom.com/foxify-app/page-management/ai-layout-generator "mention")

</details>

<details>

<summary>✨ Build from Scratch</summary>

Start with a blank canvas and design every detail your way. \
Best for advanced users or stores with a very specific layout in mind.

</details>
{% endstep %}

{% step %}

### Customize your page with editor tools

Foxify’s editor (FoxStudio) gives you complete control over layout, visual structure, and styling.

**🔧 Core editor tools**

Use these tools to design faster and maintain structure:

* **Stack** → Arrange elements vertically with consistent spacing.&#x20;
* **Grid** → Build flexible, responsive layouts.
* **Constraints** → Control how elements resize on different screens.
* **Pan & Zoom** → Easily navigate large or detailed layouts.&#x20;

→ Learn more: [foxstudio](https://docs.foxecom.com/foxify-app/foxstudio "mention")

{% hint style="info" %}
:star: **You might also like**: Learn from the best with our [build-for-success-series](https://docs.foxecom.com/foxify-app/build-for-success-series "mention")
{% endhint %}
{% endstep %}

{% step %}

### Update Global styles&#x20;

Set consistent brand styling across all Foxify pages—including colors, typography, and buttons.\
Update once and apply everywhere.

{% content-ref url="../../page-management/global-styles" %}
[global-styles](https://docs.foxecom.com/foxify-app/page-management/global-styles)
{% endcontent-ref %}
{% endstep %}

{% step %}

### Make sure that your pages are mobile-friendly

More than half of ecommerce traffic comes from mobile. Foxify provides powerful tools to help you optimize your layout for every device.

{% embed url="<https://youtu.be/7ISin63dxig>" %}

**📱 Responsive tools**

* All Foxify pre-made templates and sections are responsive by default ✨
* Use the **device mode selector** to preview desktop, tablet, and mobile views
* Hide/show sections per device using the **Visibility** settings.

**⚡ AI responsive**

Use **AI Responsive** to automatically fine-tune spacing, sizing, and layout across screen views — saving time and ensuring consistency.

→ Learn more: [ai-responsive](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/ai-responsive "mention")
{% endstep %}

{% step %}

### Animate your sections and elements

Add smooth, modern animations to bring your pages to life—fade-ins, slide-ups, and more.&#x20;

Animations help guide customer focus and improve engagement.

{% content-ref url="../../foxstudio/layout-and-styling/animations" %}
[animations](https://docs.foxecom.com/foxify-app/foxstudio/layout-and-styling/animations)
{% endcontent-ref %}
{% endstep %}

{% step %}

### View your page revisions

Roll your design back to any previously saved version using the **page revisions** feature.&#x20;

{% content-ref url="../../foxstudio/editor-tools/page-revisions" %}
[page-revisions](https://docs.foxecom.com/foxify-app/foxstudio/editor-tools/page-revisions)
{% endcontent-ref %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fpahl9yxXFlik3mjHgPLO%2Fimage.png?alt=media&#x26;token=41bc31ca-1b79-4852-b708-3d92d81b697f" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Preview and publish your page

Once your design is ready:

{% hint style="success" %}

1. Click **Preview** to test the page on desktop and mobile.
2. Make final adjustments using responsive controls.
3. Hit **Publish** to push your page live to your Shopify store.
   {% endhint %}

You can update or unpublish pages at any time.
{% endstep %}
{% endstepper %}

### Recommended browser

Foxify supports all major browsers.

For the best performance, we recommend using the latest versions of Firefox, Safari, Chrome, or Microsoft Edge.

If you experience issues, reach us via [**in-app live chat**](https://admin.shopify.com/apps/foxify-builder?utm_source=foxecom\&utm_medium=help_center_foxify_quick_start_guide\&utm_campaign=anchor_text\&utm_term=in_app_live_chat) or email [**happytohelp@foxecom.com**](mailto:happytohelp@foxecom.com)

### ✅ **You’re ready to build**

With templates, AI, advanced editor tools, animations, and responsive controls, Foxify makes it fast and effortless to create beautiful Shopify pages tailored to your brand.

***

<div data-full-width="false"><figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FEj8YgLWvHPzkL3z1Emhb%2FBANNER%201%2C%202%20%20%20%20%20%20%20%20%20%20%20%20%20%20800x400%20(2)%20(1).png?alt=media&#x26;token=7e11de75-84e5-4576-902e-8c435aff2578" alt=""><figcaption><p>Foxify AI turns a prompt into a well-structured page layout in seconds. <a href="https://admin.shopify.com/apps/foxify-builder?utm_source=foxecom&#x26;utm_medium=help_center_foxify_quick_start_guide&#x26;utm_campaign=anchor-text&#x26;utm_term=try_foxify_ai"><mark style="color:orange;">Try Foxify AI</mark></a> ✨</p></figcaption></figure></div>