Guide to Easily Updating Your Cart and Checkout Images

August 15, 2011 0 Comments

The default FoxyCart images are fine, but if you would like to customize them, it can take some time to hunt them all down, rebuild the images and then adjust the CSS in new templates. Here are some shortcuts to save you a bunch of time.

Step 1: Rebuild Your Images

Use the listed images below and rebuild them in Photoshop with a new design. It saves a lot of time if you can keep the new images the same size.

Cart::
https://admin.foxycart.com/themes/standard/images/cart-checkout.png
https://admin.foxycart.com/themes/standard/images/cart-update.png
https://admin.foxycart.com/themes/standard/images/cart-title.png

Receipt:
https://admin.foxycart.com/themes/standard/images/receipt-header.png
https://admin.foxycart.com/themes/standard/images/receipt-billing.png
https://admin.foxycart.com/themes/standard/images/receipt-shipping.png
https://admin.foxycart.com/themes/standard/images/receipt-general.png
https://admin.foxycart.com/themes/standard/images/receipt-order.png
https://admin.foxycart.com/themes/standard/images/receipt-print.png

You can download them all right here

Step 2: Upload Files

Put your images in a folder called “cartimages” underneath the folder where you will store your temporary caching files. You can do this right off the root or in your theme folder. Putting them in your theme folder makes them a little more portable as they can easily travel with your theme.

Step 3: Setup templates

Make three new files called template_cart.html, template_checkout.html, and template_receipt.html. Copy the contents of the FoxyCart templates to the appropriate folders.

Step 4: Put in the new CSS

Put this in the cart code in the head:

Put this in the checkout template:

Put this in the receipt template:

Step 5: Cache Your Files

Put the full urls for each of these files into the FoxyCart template box and click “cache your url”. Once that has been cached, click the “Update Template” button. Then check out your templates and make sure they look good.