FoxTransfer - Clone web design to Foxify
A guide to use FoxTransfer Chrome extension in Foxify visual builder
Last updated
Was this helpful?
A guide to use FoxTransfer Chrome extension in Foxify visual builder
Last updated
Was this helpful?
Was this helpful?
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 ❤️
To ensure a smooth experience with FoxTransfer and copy webpage designs into FoxStudio, make sure the following requirements are met.
✅ Before using FoxTransfer, make sure to enable Clipboard permissions for Chrome. Here’s how:
1️ Method 1:
Open Foxify Page Builder app in Shopify.
Click the site information icon next to the URL in the address bar.
In the dropdown menu, locate the Clipboard option and select Allow.
2️ Method 2:
Open Chrome settings by clicking the three vertical dots (
) in the upper-right corner. Select Settings.
Navigate to Privacy and Security in the left-hand menu.
Then click Site settings > Permissions > Additional permissions > Clipboard: chrome://settings/content/clipboard
In the list of sites allowed to see your clipboard, add admin.shopify.com.
Steps:
Click Add to Chrome.
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.
Once you have added FoxTransfer extension to your Chrome, it's time to connect it with your FoxStudio.
Steps:
Select FoxTransfer extension on the Chrome toolbar.
In the pop-up, select the Let's connect button.
Enter the required information:
Your name;
Store domain: Your primary domain (in the format your-store-name.myshopify.com);
Secret key: Your API secret key in Shopify admin > Foxify app > Settings > Account section.
ℹ️ Learn more : How to get API Secret key in Foxify
Click Connect store.
All set! 🎉 Now you're ready to copy and paste the element you want to your FoxStudio pages. 🙌
Steps:
Open FoxTransfer extension on the Chrome toolbar.
In the extension's pop-up, click Select element.
Select the element you want to copy from the webpage.
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.
Click Copy.
After you have copied the element using the FoxTransfer extension, you can paste it to your FoxStudio pages.
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 FoxTransfer.
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.
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 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
Examples:
