Add a custom header and footer to your Foxy templates in Webflow

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

  1. 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)
  2. Add your own header and footer elements to each page.
  3. In between the header and footer elements add an HTML Embed element.
  4. Give your HTML Embed element an ID of "fc".
  5. In each page's "Inside <head> tag" section, copy/paste the snippet from here.
  6. In each page's "Before </body> tag" section, copy/paste the snippet from here.

Full Page Cart Template

  1. In your Full Page Cart template page in Webflow, give your body element a custom attribute with the Name data-fc-context and Value {"cart_is_fullpage":true}
  2. Copy/paste the snippet from here into the HTML Embed element between your header and footer elements.
  3. Publish your changes and take note of the URL of your Full Page Cart template page.
  4. Go to your Full Page Cart Template Settings in Foxy here.
  5. In the "cart template url" field, paste your Full Page Cart template page URL.
  6. Click the "Cache Your URL" button.
  7. Before saving, remove this snippet from the cached cart template code.
  8. Click the "Update Template" button.

Checkout Template

  1. In your Checkout template page in Webflow, copy/paste the snippet from here into the HTML Embed element between your header and footer elements.
  2. Publish your changes and take note of the URL of your Checkout template page.
  3. Go to your Checkout Template Settings in Foxy here.
  4. In the "remote template url" field, paste your Checkout template page URL.
  5. Click the "Cache Your URL" button.
  6. Before saving, remove this snippet from the cached checkout template code.
  7. Click the "Update Template" button.

Web Receipt Template

  1. 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.
  2. Publish your changes and take note of the URL of your Web Receipt template page.
  3. Go to your Web Receipt Template Settings in Foxy here.
  4. In the "remote template url" field, paste your Web Receipt template page URL.
  5. Click the "Cache Your URL" button.
  6. Before saving, remove this snippet from the cached web receipt template code.
  7. 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.

In This Article

Related Articles

Create a purchase form with Webflow's Form Builder
Add a mini-cart to your Webflow website
Manage product inventory with Webflow's CMS
Create a purchase button in Webflow

Need help?

Can't find the answers you're looking for? Our team is here to help. Please click below to contact us.

Contact Us