# FoxTransfer - Clone web design to Foxify

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

{% hint style="info" %}
**Copy any web designs by copying HTML elements** and instantly paste them to your Foxify page builder using [FoxTransfer](https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom\&utm_medium=help_center_foxify_foxtransfer_clone_web_design\&utm_campaign=anchor_text\&utm_term=foxtransfer).
{% endhint %}

This feature boosts your productivity, accelerates workflows, and gives you the creative freedom to adapt and refine existing designs effortlessly.

{% hint style="danger" %}
**Beta version:** This feature is currently in its beta stage. You may encounter minor issues as we work to improve it. Your feedback is valuable in helping us perfect this function :heart:
{% endhint %}

## Before you start

{% hint style="warning" %}
To ensure a smooth experience with **FoxTransfer** and copy webpage designs into **FoxStudio**, make sure the **following requirements** are met.
{% endhint %}

<details>

<summary><strong>Google Chrome browser</strong> (latest version recommended)</summary>

This extension is only available on Chrome browser.

👉 [Download Chrome](https://www.google.com/chrome/)

</details>

<details>

<summary><strong>Clipboard permission is enabled in Chrome</strong></summary>

:white\_check\_mark: Before using **FoxTransfer**, make sure to enable Clipboard permissions for Chrome. Here’s how:

1️ Method 1:

1. Open **Foxify Page Builder** app in Shopify.
2. Click the site information icon next to the URL in the address bar.
3. In the dropdown menu, locate the **Clipboard** option and select **Allow.**

<img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Fx4I50HyXKunD9zBc90Gp%2Fimage.png?alt=media&#x26;token=78c276ad-e7d9-40fa-8bda-dd680131cfaa" alt="" data-size="original">

2️ Method 2:

1. Open **Chrome settings** by clicking the three vertical dots (<img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FovgxoXVmLusWNbtdqxhB%2FMenuVerticalIcon.svg?alt=media&#x26;token=0230c6b3-ca97-4267-9e60-f89bdfda71ba" alt="" data-size="line">) in the upper-right corner. Select **Settings**.
2. Navigate to **Privacy and Security** in the left-hand menu.&#x20;
3. Then click **Site settings** > **Permissions > Additional permissions** > **Clipboard**:  <chrome://settings/content/clipboard>&#x20;
4. In the list of sites allowed to see your clipboard, add **admin.shopify.com**.

![](https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FTC5xWorIsfMp2HbsU7a9%2Fimage.png?alt=media\&token=b97da3f8-b40d-4b78-8d76-d4facd58ff63)

</details>

## Add FoxTransfer extension to your Chrome

{% hint style="success" %}
**Steps:**

1. Open [FoxTransfer in the Chrome Web Store](https://chromewebstore.google.com/detail/foxtransfer-html-to-shopi/babcinhpofjfhjjbcnjhoikcjbgebimb?utm_source=foxecom\&utm_medium=help_center_foxify_foxtransfer_clone_web_design\&utm_campaign=anchor_text\&utm_term=foxtransfer_in_the_chrome).
2. Click **Add to Chrome.**
3. Review the types of data that the extension will be able to access. Then click **Add extension**.

You'll see your extensions in Chrome as buttons on the toolbar.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FMxT468SqxesnfWUDAMOE%2Fimage.png?alt=media&#x26;token=6d455c2d-8538-4b4f-8e07-3b1d629bc70f" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Note**: You can't add extensions if:

* You're [browsing as a guest](https://support.google.com/chromebook/answer/1057090).
* You're using your Chromebook at work or school. If you have questions or need help, contact your administrator.
  {% endhint %}

## Connect FoxTransfer with your FoxStudio

Once you have added FoxTransfer extension to your Chrome, it's time to connect it with your FoxStudio.

{% hint style="success" %}
**Steps:**

1. Select **FoxTransfer** extension on the Chrome toolbar.
2. In the pop-up, select the **Let's connect** button.
3. Enter the required information:&#x20;

   1. **Your name**;
   2. **Store domain**: Your primary domain (in the format your-store-name.myshopify.com);
   3. **Secret key:** Your API secret key in Shopify admin > Foxify app > **Settings** > **Account** section.&#x20;

   :information\_source: *Learn more :* [how-to-get-api-secret-key-in-foxify](https://docs.foxecom.com/foxify-app/faqs-and-troubleshooting/faqs/how-to-get-api-secret-key-in-foxify "mention")
4. Click **Connect store**.
   {% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FB41HJegCOax8dYEXD48F%2Fimage.png?alt=media&#x26;token=14f43e4f-b549-4149-b58c-145c4cd11102" alt=""><figcaption></figcaption></figure>

All set! 🎉 Now you're ready to copy and paste the element you want to your FoxStudio pages.  :raised\_hands:

## Use FoxTransfer to copy a design and paste it into your FoxStudio editor

### Copy a design from a webpage

{% hint style="success" %}
**Steps:**

1. Open **FoxTransfer** extension on the Chrome toolbar.
2. In the extension's pop-up, click **Select element**.
3. Select the element you want to copy from the webpage.
4. Check/uncheck the option **Conver images to placeholders.**

If the option is checked, all images in the design will be converted to placeholders once pasted into your FoxStudio editor.

5. Click **Copy**.
   {% endhint %}

{% embed url="<https://youtu.be/_MOcGFsPOwY>" %}
Copy a design from a webpage using FoxTransfer Chrome extension
{% endembed %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F3w6MPaG9yGNK90a8VEq0%2Fimage.png?alt=media&#x26;token=7c8fbd55-b005-41c9-9ed9-146ca2ebdf4d" alt=""><figcaption></figcaption></figure>

### Paste a design to your FoxStudio editor

After you have copied the element using the **FoxTransfer** extension, you can paste it to your **FoxStudio pages**.

{% hint style="info" %}
Each paste action will use **2** credits.

:coin: *Learn more about credits in Foxify:* [all-about-credit](https://docs.foxecom.com/foxify-app/ai-powered-fox-magic/all-about-credit "mention")
{% endhint %}

{% hint style="success" %}
In your FoxStudio editor, you can paste the copied design to your section in 2 ways:

* Use hotkeys: **CMD + V for Mac OS** or **CTRL + V for Windows**
* Right-click in the editor and select the option **Paste from FoxTransfe**r.

The pasted element's position will depend on the cursor's current location.&#x20;

After placement, the pasted element can be edited like other elements using the available tools in the editor.
{% endhint %}

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F6yx4GWWP4H0SDQEN0XSp%2Fimage.png?alt=media&#x26;token=a93bda15-5d2f-4688-b6d5-ffc2d66386a8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}

### Best practices and notes:

* **Copy smaller elements instead of large sections**&#x20;

💡 **Why?** Copying smaller elements rather than an entire section reduces complexity and avoids transferring a deeply nested structure, which may be harder to adjust later.&#x20;

✅ **Example:** Instead of copying an entire homepage section, try copying only a text block, image container, or button group for easier customization.

* **Adjust for each viewport**

💡 **Note:** **FoxTransfer applies the design only to the current viewport you are working on.**

✅ **Best practice:** After transferring, **switch to other devices** (desktop, tablet, mobile) and manually adjust the design to ensure proper responsiveness.
{% endhint %}

#### How Foxify handles the assets of the copied design

* **Custom fonts**: Any custom fonts used in the element will be uploaded to the user’s store automatically.
* **Google fonts**: No further action is needed if the element uses detected Google fonts.
* **Images**: Images included in the element will be uploaded to the user's store or [converted to placeholders](#copy-a-design-from-a-webpage) if the user selects this option.

{% hint style="danger" %}
Users must have the appropriate licenses for premium assets like fonts or images.&#x20;

:warning: Users are responsible for any risks of using these assets without proper licensing.&#x20;

*Learn more:* [terms-and-policies](https://docs.foxecom.com/foxify-app/getting-started/account-and-billing/terms-and-policies "mention")
{% endhint %}

*Examples:*

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2Ff64vVemXP4YbSKDVlvFv%2FUntitled%20design%20(9).gif?alt=media&#x26;token=95cffb64-8932-4d7c-a576-7e7b17c43968" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2F5lu8FY1vZAgMYh7HwagZ%2FUntitled%20design%20(11).gif?alt=media&#x26;token=09f9f503-9831-4ceb-8093-d27eacf7d369" alt=""><figcaption></figcaption></figure>

***

<figure><img src="https://1749964694-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfgpgvtRaQLc36GYyIktZ%2Fuploads%2FoMe6IOoN3E0qq3NwU6SG%2Flivechat883x471%20(1).png?alt=media&#x26;token=5c9ef726-8e24-4c38-973e-42ceb89f06be" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_foxify_foxtransfer&#x26;utm_campaign=anchor-text&#x26;utm_term=install_xflow_back_in_stock_automation-free">Install XFlow Back In Stock Automation FREE</a></p></figcaption></figure>