Custom Foxy Template Pages

Here are the steps to add a custom header and footer to your Checkout and Receipt templates. It looks like a lot of steps but it’s super straightforward and of course if you run into any issues, we’re here to help.

All Templates (do the following steps for each template)

  1. In Webflow, create a page for each template (ie: Checkout and Receipt)
  2. Add your own header and footer elements
  3. In between the header and footer elements add a html embed element
  4. Give your html embed an ID of “fc” like this: http://d.pr/i/1841q/5j7Y1kN4
  5. In the custom header of your page settings, add the following: https://pastebin.com/raw/YyiwVUCH
  6. In the custom footer of your page settings, add the following: https://pastebin.com/raw/ibgPnXVm

Checkout Template

  1. Paste the following into the html embed:  https://pastebin.com/raw/3ZaHLHj8
  2. Publish changes and get url for checkout page
  3. Go to your FoxyCart checkout template settings here: https://admin.foxycart.com/admin.php?ThisAction=EditTemplate&template=checkout
  4. Paste in the checkout url from your Webflow site into the “remote template url” field
  5. Click “Cache Your URL” button
  6. Click “Update Template” button

Receipt Template

  1. Paste the following into the html embed:  https://pastebin.com/raw/GcRTES7H
  2. Publish changes and get url for checkout page
  3. Go to your FoxyCart checkout template settings here:  https://admin.foxycart.com/admin.php?
    ThisAction=EditTemplate&template=receipt
  4. Paste in the checkout url from your Webflow site into the “remote template url” field
  5. Click “Cache Your URL” button
  6. Click “Update Template” button

You can see how we have set things up in our demo store here: https://preview.webflow.com/preview/foxystore?preview=ace49a7a5b44685f0d4046eb6b533ef5

‍

Sidecart

Customizing the sidecart requires custom css added to your Configuration page: https://admin.foxycart.com/admin.php?ThisAction=TemplateConfig