Blog

Ideas, tips and news about online marketing – Infusionsoft – WordPress.

How to Create a Gradient Background to Your Infusionsoft Shopping Cart

Infusionsoft-Tutorial-Gradients-SM-Image

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

 

Edit an Infusionsoft 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

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.

 

INfusionsoft Tutorial Screenshot_EditingCssForGradient

 

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):

Infusionsoft Tutorial - WhiteGreen_Gradient

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:

 

In addition, note the main color you are using in the the gradient image. In this case, the green color is: #99cc33

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.

 

Infusionsoft Tutorial - New Cart with Green Gradient Background

 

Comments on this entry are closed.