Skip to content
Search for answers/

3 min read • Updated 2 years ago

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. 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. 2

    Add your own header and footer elements to each page.

  3. 3

    In between the header and footer elements add an HTML Embed element.

  4. 4

    Give your HTML Embed element an ID of "fc".

  5. 5

    In each page's "Inside <head> tag" section, copy/paste the snippet from here.

  6. 6

    In each page's "Before </body> tag" section, copy/paste the snippet from here.

Full Page Cart Template

  1. 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. 2

    Copy/paste the snippet from here into the HTML Embed element between your header and footer elements.

  3. 3

    Publish your changes and take note of the URL of your Full Page Cart template page.

  4. 4

    Go to your Full Page Cart Template Settings in Foxy here.

  5. 5

    In the "cart template url" field, paste your Full Page Cart template page URL.

  6. 6

    Click the "Cache Your URL" button.

  7. 7

    Before saving, remove this snippet from the cached cart template code.

  8. 8

    Click the "Update Template" button.

Checkout Template

  1. 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. 2

    Publish your changes and take note of the URL of your Checkout template page.

  3. 3

    Go to your Checkout Template Settings in Foxy here.

  4. 4

    In the "remote template url" field, paste your Checkout template page URL.

  5. 5

    Click the "Cache Your URL" button.

  6. 6

    Before saving, remove this snippet from the cached checkout template code.

  7. 7

    Click the "Update Template" button.

Web Receipt Template

  1. 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. 2

    Publish your changes and take note of the URL of your Web Receipt template page.

  3. 3

    Go to your Web Receipt Template Settings in Foxy here.

  4. 4

    In the "remote template url" field, paste your Web Receipt template page URL.

  5. 5

    Click the "Cache Your URL" button.

  6. 6

    Before saving, remove this snippet from the cached web receipt template code.

  7. 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.

Need Help?

Did this article answer your questions? Need help with anything? Please click below to contact us.