Skip to content
Search Articles/

2 min read • Updated a day 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 (ie: Full Page Cart, Checkout, and Web Receipt). These will be separate from Webflow Ecommerce's default ecommerce pages.

  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

    In the Foxy admin, go to Settings > Cart.

  5. 5

    In the Template URL field, paste your Webflow Full Page Cart URL.

  6. 6

    Click the save button (at top right of page).

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

    In the Foxy admin, go to Settings > Checkout.

  4. 4

    In the Template URL field, paste your Webflow Full Page Cart URL.

  5. 5

    Click the save button (at top right of page).

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

    In the Foxy admin, go to Settings > Receipts.

  4. 4

    In the Template URL field, paste your Webflow Full Page Cart URL.

  5. 5

    Click the save button (at top right of page).

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.