Getting Started with FoxyCart!

How to get your website's store set up to work with FoxyCart.

For a nice and quick FoxyCart implementation, insert the following code into the head section of your webpage, after any other CSS or javascript tags you might have.

    <!-- BEGIN FOXYCART FILES -->
    <script src="https://YOURDOMAIN.foxycart.com/files/foxycart_includes.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" href="https://YOURDOMAIN.foxycart.com/files/foxybox.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->

If you'd like to use the default theme, you'll need one additional file. This is to style the elements of the foxybox that are not in the iframe (specifically, the close and the continue shopping links).

    <!-- BEGIN FOXYCART FILES -->
    <link rel="stylesheet" href="https://YOURDOMAIN.foxycart.com/themes/standard/theme.foxybox.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->

• When linking to any file on foxycart.com, you must call the files using your store's subdomain. So, if you're calling /files/foxycart_includes.js, you must call it at https://YOURDOMAIN.foxycart.com/files/foxycart_includes.js. This is because of the way FoxyCart serves these files, which is dependent on the version of FoxyCart you're using.
• Please note that this standard configuration uses John Resig's excellent jQuery and a slightly modified version of Cody Lindley's Thickbox (which we call FoxyBox). If you're using another javascript library, or if you're already calling jQuery elsewhere in your template you'll want to remove it. If you prefer to use another library, you should use whatever “Thickbox” (modal window) equivalent is available.
  • * If you'd prefer additional control over these elements, feel free to download the files to your own server and edit them. Or grab the latest versions of jQuery and Thickbox and go from there.

Products are added to your customer's cart using “add to cart links” that you create. Create your FoxyCart links the same as you would create any HTML link (e.g.: <a href=“blah”>Link Text</a>) To make this a FoxyCart link, add the class “foxycart” and create the href with this format: http://SUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE

In this example, SUBDOMAIN is the value you entered as your store subdomain.

ITEMNAME is, of course, the name you would like the cart to display for you item. For spaces, use ”%20”. For example, if I want my item to be “Book About Cats,” I would use the ITEMNAME Book%20About%Cats

Important: Be sure to add the class “foxycart” to any “Add to Cart” links you have created. That’s it!

<a href="http://SUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE" class="foxycart">

Though you don't need to, it may save you time to use one of our default styles in your checkout template.

To use one of our default stylesheets as a starting point, simply add the following calls into the head section of your template:

    <!-- BEGIN FOXYCART FILES -->
    <link rel="stylesheet" href="https://YOURDOMAIN.foxycart.com/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->

You can then easily create an additional stylesheet of your own to override the styles in default.checkout.css, or you can just copy the contents of default.checkout.css into your own stylesheet, edit as desired, and skip the FoxyCart CSS altogether.

So your code might look like this:

    <!-- BEGIN FOXYCART FILES -->
    <link rel="stylesheet" href="https://YOURDOMAIN.foxycart.com/themes/standard/styles.css" type="text/css" media="screen" charset="utf-8" />
    <!-- END FOXYCART FILES -->
 
    <!-- Override FoxyCart CSS with your own stylesheet: -->
    <link rel="stylesheet" href="https://www.your-domain.com/path/to/your.css" type="text/css" media="screen" charset="utf-8" />