Documentation You are here: start » v » 2.0 » templates

Templates, Caching, and Template Customization with HTML + CSS

FoxyCart's templates are beautiful and responsive out of the box with the new default templates available in 2.0. Paired with the new template configuration, you can even customise the templates without having to touch a single line of code.

Under the hood though, we make use of some standards and systems that make the templates extremely flexible and customizable, so that if you need, you can alter the raw markup of the page to suite your needs.

Working with FoxyCart Templates

Basic Customizations

You can set your store logo in the Settings tab of your FoxyCart Store's Admin. There, you can add the url for your store's logo to the “logo url” field. We'll also securely cache your logo from that URL to ensure it and your templates are served securely.

If you don't already have a copy of your logo someplace online, an alternate option is to add the logo to a Dropbox folder, then follow these steps:

  1. Use the share link to get the link to your image.
  2. In the resulting URL, change the start from https://www to https://dl and load it in your browser
  3. When loaded in your browser, you should see only your image and nothing else. Copy the URL as it currently is set in your browser, it will be slightly different than you pasted previously.
  4. Paste the updated URL as the store logo in your FoxyCart administration

As an example, your share URL might be https://www.dropbox.com/s/ggq5g1qpvonh0/My%20Logo.jpg?dl=0, and after updating it would be something like https://dl.dropboxusercontent.com/s/ggq5g1qpvonh0/My%20Logo.jpg?dl=0. That's an easy and free way to get your logo hosted someplace that we can access it from.

Other Common Customizations

FoxyCart supports many common template customizations from the Template Configuration page in the admin. You can configure:

  • Guest checkout settings (forcing guest, forcing account, allowing both but defaulting to one or the other).
  • Adding a Terms of Service (TOS) checkbox and link.
  • Newsletter opt-in checkbox.
  • Color settings to control the major color styles on the cart, checkout and receipt.
  • Product option hiding. You can hide product options or your own custom product options using the Customize Cart Display checkbox. Hide weight, code, category, subscription details, custom options, or all options. This will hide the items in the list for which you've removed the checkbox from the cart, checkout, web receipt, and email receipt.
  • Customize (remove or add) what credit card options you support. (If you don't accept AmEx, uncheck that box. Note that this only changes the display, not what your payment gateway actually accepts.)
  • Credit card security code requirements. (Required, optional, etc.) Step by Step instructions here
  • Change what billing checkout fields are required and displayed. (Don't collect the address info if you aren't shipping. Require a phone field. Etc.) Note: If you have shippable products present in the cart, the complete shipping address is always require.
  • Add custom content (HTML, JS) to your templates, for custom styles, tracking codes or custom fields on your checkout.
  • Enable debug logging to your browsers console.
  • Shipping and billing country/region whitelisting/blacklisting. If you only want to accept customers or to ship to certain countries, you can do that here.

Minor Styling Customizations

Using the custom code template setting, it's now possible to add CSS and javascript to your templates without needing to modify the templates themselves. If you just want to change the background, some colors or styling, or anything else you accomplish with CSS only, we strongly recommend taking this approach.

You can customize your styling in the TEMPLATES configuration settings by checking the Add custom header and footer code to your templates and inserting your styles in the custom header: text box like this:

<style>
#fc .fc-form-control {
    background: #cc33cc;
}
</style>

This changes the background of entry boxes to magenta.

To see what classes you need to use, we recommend making use of an inspection tool - which most modern browsers will have built in. By using their inspection tools, you can select a given element on the page and the tool will show you the markup that outputs that element and you'll then be able to see the classes that apply to it.

For information on the different browser development tools - see the following:

If you want to really customize, read on!

Site Tools