How to Create a Gradient Background to Your Infusionsoft Shopping Cart

Add a little flare to your e-commerce cart with a gradient image in the background. A little soft color can help to emphasize your banner — and make your product images POP out.

Here’s how you do it:

Go to your Infusionsoft shopping cart theme to make the changes you need. To get there, go to:

Ecommerce tab > Ecommerce setup > Shopping Cart Theme

To edit your theme — click on the EDIT link at the bottom right corner of your active theme image:

You can edit your Infusionsoft shopping cart theme here

Then, go to the tab entitled: EDIT CSS. We will be editing the portion (in yell0w) to change the body background.

Now — you need to make a gradient image. In my example here, I made the image 20 pixels wide and 500 pixels in length. The length is the most important item — because it depends on the size of your header and navigation bar, as well as how you want the colors of the background image to blend with these items. For this example, I used green and white. Feel free to download it for your own purposes (link below!)

In this case, the shopping cart header and navigation items are roughly 450 pixels in height — so I make the background image and the white part a little bit taller than that.

Here’s a gradient image I made in Photoshop. You can do it with any free image-ware (like GIMP):

You must upload the image into either Infusionsoft (via the Home >Tools > Files) or onto a hosted site that you have. Note the image URL — you’ll need it later. In this case, the URL is:

Return to the CSS tab for the e-commerce cart. There, we will change the code to this (note the changes in red):

body {

font: 13px/1.5 ‘Open Sans’, “Lucida Grande”, “Lucida Sans Unicode”, “Lucida Sans”, Calibri, Verdana, sans-serif;
color: #6b6f51;
background-color: #99cc33;
background-image: url(http://www.almondtreesocial.com/wp-content/uploads/2015/02/WhiteGreen_Gradient.jpg);
background-repeat: repeat-x;
}

Save the changes and then view them in your cart.