In this tutorial, we'll show you how to add a custom header and footer to your Foxy templates in Webflow. Please follow the steps within each section.
All Templates
- In Webflow, create a page for each template you want to add a custom header/footer to (ex: Full Page Cart, Checkout, and Web Receipt)
- Add your own header and footer elements to each page.
- In between the header and footer elements add an HTML Embed element.
- Give your HTML Embed element an ID of "fc".
- In each page's "Inside <head> tag" section, copy/paste the snippet from here.
- In each page's "Before </body> tag" section, copy/paste the snippet from here.
Full Page Cart Template
- Copy/paste the snippet from here into the HTML Embed element between your header and footer elements.
- Publish your changes and take note of the URL of your Full Page Cart template page.
- Go to your Full Page Cart Template Settings in Foxy here.
- In the "cart template url" field, paste your Full Page Cart template page URL.
- Click the "Cache Your URL" button.
- Before saving, remove this snippet from the cached cart template code.
- And do a CTRL + F in the cached cart template code again and look for the opening <body tag, right next to it, leaving a space and keeping the single quotes, copy and paste this: data-fc-context='{"cart_is_fullpage":true}'
- Click the "Update Template" button.
Checkout Template
- In your Checkout template page in Webflow, copy/paste the snippet from here into the HTML Embed element between your header and footer elements.
- Publish your changes and take note of the URL of your Checkout template page.
- Go to your Checkout Template Settings in Foxy here.
- In the "remote template url" field, paste your Checkout template page URL.
- Click the "Cache Your URL" button.
- Before saving, remove this snippet from the cached checkout template code.
- Click the "Update Template" button.
Web Receipt Template
- In your Web Receipt template page in Webflow, copy/paste the snippet from here into the HTML Embed element between your header and footer elements.
- Publish your changes and take note of the URL of your Web Receipt template page.
- Go to your Web Receipt Template Settings in Foxy here.
- In the "remote template url" field, paste your Web Receipt template page URL.
- Click the "Cache Your URL" button.
- Before saving, remove this snippet from the cached web receipt template code.
- Click the "Update Template" button.
Common Issues
Can't remove "Made in Webflow" badge
The "Made in Webflow" badge will not show once you've cached template URLs using a custom Webflow domain.
Changes to templates not showing in Foxy
If you make any changes to your Foxy templates in Webflow, you must re-cache the modified page URL in Foxy.