Table of Contents
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 code from “Step 1” of the
jQuery is already loaded when you copy/paste the “Sample Code”, and if you include jQuery again the default Colorbox-style cart will break, and your cart will not load in the modal window at all. To ensure this isn't the case, follow these simple steps:
- View your site as it is output in the browser. In other words, load the site itself, and not your templates.
- View the source.
- Do a “find” on the source for “
jquery”. You should see it once inside the
<!– BEGIN FOXYCART CODE –>block. You may see it elsewhere also.
- If you see any files like
jquery.accordion.js, or anything similar, those are plugins and can remain.
- If you see any files like
jquery-1.4.2.min.js, or anything similar, find out where those
<script />tags are being inserted, and remove them. Reload your page and view the source to ensure they're all gone.
- If you cannot remove calls to
jquery.js, make sure you move your
<!– BEGIN FOXYCART CODE –>block after any other jQuery calls.
- Test again.
- If you need help, please ask in our forum.
Add Your Cart Links
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 you'll need to create a link with an
href pointing to your FoxyCart domain:
In this example,
YOURSUBDOMAIN is the value you entered as your store subdomain.
ITEMNAME is, of course, the name you would like the cart to display for your item.
<a href="http://YOURSUBDOMAIN.foxycart.com/cart?name=ITEMNAME&price=YOURPRICE">Add to Cart</a>
Style Your Checkout Page
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://YOURSUBDOMAIN.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" />