# FoxTransfer - Clone web design to Foxify
**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).
This feature boosts your productivity, accelerates workflows, and gives you the creative freedom to adapt and refine existing designs effortlessly.
**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 ❤️
## Before you start
To ensure a smooth experience with **FoxTransfer** and copy webpage designs into **FoxStudio**, make sure the **following requirements** are met.
This extension is only available on Chrome browser.
👉 [Download Chrome](https://www.google.com/chrome/)
✅ 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.**
2️ Method 2:
1. Open **Chrome settings** by clicking the three vertical dots () in the upper-right corner. Select **Settings**.
2. Navigate to **Privacy and Security** in the left-hand menu.
3. Then click **Site settings** > **Permissions > Additional permissions** > **Clipboard**: [chrome://settings/content/clipboard](chrome://settings/content/clipboard)
4. In the list of sites allowed to see your clipboard, add **admin.shopify.com**.
## Add FoxTransfer extension to your Chrome
**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.
**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.
## Connect FoxTransfer with your FoxStudio
Once you have added FoxTransfer extension to your Chrome, it's time to connect it with your FoxStudio.
**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:
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.
ℹ️ *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)
4. Click **Connect store**.
All set! 🎉 Now you're ready to copy and paste the element you want to your FoxStudio pages. 🙌
## Use FoxTransfer to copy a design and paste it into your FoxStudio editor
### Copy a design from a webpage
**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**.
Copy a design from a webpage using FoxTransfer Chrome extension
### 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**.
Each paste action will use **2** credits.
🪙 *Learn more about credits in Foxify:* [All about credit](https://docs.foxecom.com/foxify-app/ai-powered-fox-magic/all-about-credit)
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.
After placement, the pasted element can be edited like other elements using the available tools in the editor.
* **Copy smaller elements instead of large sections**
💡 **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.
✅ **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.
#### 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.
Users must have the appropriate licenses for premium assets like fonts or images.
⚠️ Users are responsible for any risks of using these assets without proper licensing.
*Learn more:* [Terms & Policies](https://docs.foxecom.com/foxify-app/getting-started/account-and-billing/terms-and-policies)
*Examples:*
_4NHyYnTa.gif)
_t7VP26W3.gif)