Make Your Infusionsoft Order Form Upsell Box BETTER!

Sometimes you just need to make the upsell better and paying out the nose to rebuild in another funnel system is not worth the expense. Below you will find some nice CSS code to make that Promo Upsell Box much sexier on your order Form.

#1 Just place the code below, in the settings for your Order Form Theme CSS Tab.

Feel free to modify the below styles as you choose, but this setup does give a nice POP to the upsell box.

 

[cc]

/* Add the below AFTER the items in the “MISC” section of the CSS */

.details-box {
background: none repeat scroll 0 0 #F2F2F2;
border: 2px dashed #FF0000;
border-radius: 3px 3px 3px 3px;
margin: 10px auto 10px auto;
padding: 20px;
float: left;
color: #000;
}

/* UPSELL ADDON – STYLED WIDE UPSELL BOX
===============================================================*/

#UP_SELLS .upsell {
width: 100%;
max-width: 930px;
margin: 0px auto 25px auto;
}

#UP_SELLS .upsellDescription {
float:left;
max-width: 510px;
}

#UP_SELLS #upsellContainer h2, #UP_SELLS .discountedPrice, #UP_SELLS .upsellPrice {
font-size: 22px;
line-height: normal;
}

#UP_SELLS #upsellContainer h3 {
font-size: 22px;
line-height: normal;
color: #CC0000;
font-weight: bold;
}

@media screen and (max-width: 768px) {

#UP_SELLS #upsellContainer h2, #UP_SELLS .discountedPrice, #UP_SELLS .upsellPrice, #UP_SELLS #upsellContainer h3 {
font-size: 18px;
line-height: normal;
}

}

/* ADDON DESCRIPTION

#UP_SELLS .upsellDescription:after {
content: ‘ CHECK THIS OUT!!!’;
}
*/

@media screen and (max-width: 992px) {

#UP_SELLS .upsell {
width: 90% !important;
}

#UP_SELLS .upsell, #UP_SELLS .upsellAdd {
float: none;
}

#UP_SELLS .upsellDescription {
float:left;
max-width: none;
}

}

#UP_SELLS .upsellAdd a {
text-height: 0px;
font-size: 0px;
}

#UP_SELLS .upsellAdd a:after{
content: “Add To Order”;
text-height: auto;
font-size: 24px;
}

#UP_SELLS .discountedPrice { display: none !important; }

#UP_SELLS .upsellPrice { margin-left: 0px !important; }

#UP_SELLS .upsellButton {
background: #FFE400;
background-image: -ms-linear-gradient(top, #FFE400 0%, #FFAE00 100%);
background-image: -moz-linear-gradient(top, #FFE400 0%, #FFAE00 100%);
background-image: -o-linear-gradient(top, #FFE400 0%, #FFAE00 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFE400), color-stop(1, #FFAE00));
background-image: -webkit-linear-gradient(top, #FFE400 0%, #FFAE00 100%);
background-image: linear-gradient(to bottom, #FFE400 0%, #FFAE00 100%);
border: 1px solid #B7CCD7;
border-radius: 8px;
display: inline-block;
color: #000;
font: bold 20px/1.8 “Helvetica Neue”,Helvetica,Arial,sans-serif;
text-align: center;
text-decoration: none;
text-shadow: 1px 1px 0px #DDD;
width: 260px;
margin: 10px auto;
}

#UP_SELLS .upsellButton:hover {
color: #000;
background: #FFAE00;
background-image: -ms-linear-gradient(top, #FFAE00 0%, #FFE400 100%);
background-image: -moz-linear-gradient(top, #FFAE00 0%, #FFE400 100%);
background-image: -o-linear-gradient(top, #FFAE00 0%, #FFE400 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFAE00), color-stop(1, #FFE400));
background-image: -webkit-linear-gradient(top, #FFAE00 0%, #FFE400 100%);
background-image: linear-gradient(to bottom, #FFAE00 0%, #FFE400 100%);
}

@media screen and (max-width: 768px) {

#UP_SELLS .upsellButton {
width: 90%;
margin: 0px auto;
}

}

[/cc]