Blog

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

How to Style Your Infusionsoft Ecommerce Cart Theme to Look Sleek and Modern

StylingAModernCart_Promo

 

Looking to style your Infusionsoft ecommerce cart to be sleek and modern?

One of my favorite e-commerce styles is Mr. Porter’s site. Very chic, simple and stylish:

 

Mr. Porter Ecommerce Cart Style

Mr. Porter Ecommerce Cart Style

To get as close as possible (with a minimal of programming),  I created an ecommerce theme in Infusionsoft:

Shopping  Cart Theme tutorial Text Below Product Images

Here’s the basic steps that I took to approximate the look and feel of a simple, sleek black and white shopping cart in Infusionsoft:

 

Step 1 – Create and Save a New E-Commerce Cart Theme

Go to E-Commerce > E Commerce Setup > Shopping Cart Themes > Create a New Theme

Select the One-Column Option and the Basic Blue theme. Name your new theme and that will save it. Then — commence editing it.

 

Step 2: Update the fonts

 

Mr. Porter uses a stylish font (“Georgia”) that is one of the browser-friendly Web fonts.

 

To change that — we go to the Edit CSS tab. That’s where we can change the appearance and layout of the shopping cart:

Shopping  Cart Theme tutorial Screenshot Of Font CSS

 

Here’s the typical coding you’ll see that controls the font style in the Appearance Style sheet:

/* Layout: One Column
 Theme: Basic Blue v.2
Controls fonts, colors and images.
===============================================================*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

body {
font: 15px/1.5 ‘Open Sans’, Arial, sans-serif;
color: #222;
}

Change that to Georgia by replacing it with this:

body {
 font: 15px/1.5 Georgia, Arial, sans-serif;
 color: #222;
 }

Step 3: Change the Company Logo Top Banner

Upload a new Company Logo Top Banner under the Images > Company Top Logo Banner area. The image needs to be 960 pixels wide.

Step 4:  Restyle the Navigation Bar

The navigation bar needs to simplified — with the gradient removed. To do that — use the Appearane CSS stylesheet to change the navigation code to:

/* NAVIGATION
===============================================================*/

#topNav {
 background-color: #ececec;
 background-image: url(http://www.almondtreesocial.com/wp-content/uploads/2014/12/TopNavImage_BandW_SampleIS_Ecart.jpg);
 background-repeat: no-repeat;
}

#topNav a {
 font-size: 20px;
 
 
}

#nav {
 border-bottom: 4px solid #000;
 
 }

#nav li a {
 ;
 }


#nav li a:hover {
 background-color: #efefef;
 }

#nav a {
 text-decoration: none;
 color: #000;
 }

#nav a:hover {
 text-decoration: none;
 color: #333;
 }

Step 5: Remove Custom Home Product Grid Top

The Custom Home Product Grid Top is the image that appears underneath the navigation bar (see image below – circled in yellow):

 

Ecommerce Cart heme tutorial Example Product Grid Image

 

To do that, go the shopping cart theme > HTML Areas > Store Front. Then delete the coding that inserts the image (see circled in yellow). Hit Save.

 

Infusionsoft Custom Home Product Grid Top

Infusionsoft Custom Home Product Grid Top

 

Step 6: Move Product Descriptions to below the Product images

To do that, you need to change the CSS in the Layout CSS, which controls the layout of the Infusionsoft Shopping Cart. You will change the coding for the productLarge object (see below) to take out the float: left

.productLarge {
 /*  Large image on product details page */
 /* float: left; */
 margin: 6px 20px 40px 0;
 border-radius: 4px;
 -moz-border-radius: 4px;
 -webkit-border-radius: 4px;
 }

And that is pretty much it!

Comments on this entry are closed.