The new soft add to cart styling and features are available by default on many Volusion free themes. When installing one of these themes, you may need to re-publish the theme and / or clear your browser's cache to fully experience the new features. If you have some coding knowledge, you can implement these features on your current theme without sacrificing the work that you've already done.

Important Note

Before you make any edits or changes, be sure to archive your theme!

Our technical support team is unable to assist with theme customization, but Volusion offers design services if you'd like us to customize your site. Please contact our services sales team for more information at 1-800-646-3517.

Styling the Soft Cart

To style your soft add to cart as you see in the screenshots below:

  1. Go to Design > File Editor and click Template_xx.html in the Shortcuts menu.
  2. In the head section of the theme HTML (between the <head> and </head> tags), paste the following reference to an external stylesheet: <link href="/v/vspfiles/templates/YourTheme/css/softaddtocart.css"rel="stylesheet" type="text/css" />
     Note that "YourTheme" in the code should be replaced with the unique name/number of your current store theme. You can find this information by looking at the template_xx.html shortcut - "xx" is the unique name / number of your theme.
  3. Click Save.
  4. Copy the entire contents of the Soft Add to Cart CSS below and Save As "softaddtocart.css".
  5. Using your FTP account, upload the CSS file into the folder/directory path that is now referenced in your theme.

Once you've uploaded this CSS file, you can add more CSS to the soft cart by going to Design > File Editor and clicking Template_xx.css in the Shortcuts menu. The softaddtocart.css file will appear in the Choose File menu once it is uploaded to the /v/vspfiles/templates/YourTheme/css folder of your store. Please see the important note above before making any changes to your theme files.

If you would prefer, you can also wrap the CSS with <style type="text/css"> </style> HTML tags and place the entire CSS into the <head> section of your Template_xx.html file.

Soft Cart CSS

/*****************************
*     SOFT ADD CONTAINER     *
*****************************/

/* Outer container - KEEP !IMPORTANTs - DO NOT USE 'BOTTOM' */
/*Use for width, background, box-shadow, border-radius */
.cartDiv .soft_add_wrapper {
    background: #fff;
    box-shadow: 0 0 5px rgba(0,0,0,.3);
    height: auto !important;
    padding: 10px;
    width: 275px;
    z-index: 1100;
    padding:0;
    font-family: Alice, Georgia, "Times New Roman", serif !important;
}

div.soft_add_content_wrapper div.soft_add_content_area table.cart_table {width:auto;}

/***************************
*      PRODUCT DETAILS     *
***************************/

/* Product details container */
.cartDiv ul.anchored-cart {
    min-height: 75px;
    margin: 0 5px;
    padding-top: 5px; /*Used to make room for 'recently-added shadow'*/
}

/* Product details row container */
.cartDiv ul.anchored-cart li.product-row {
    border-bottom: 1px solid #eee;
    margin: 0 5px;
    padding: 0 8px;
    background: url(../images/template/faded-border.png) no-repeat 0 0;
}
.cartDiv ul.anchored-cart li.product-row:first-child {
    border-top: none;
    background: none;
}

/* Most recent item added to cart */
.cartDiv ul.anchored-cart li.recently-added {
    box-shadow: none; /*Use 'none' if none to override default*/
}

/* Product name */
.cartDiv ul.anchored-cart .product-name a {
    color: #666;
    font-size: 13px;
}

/* "Options" text */
.cartDiv ul.anchored-cart .product-options a {
    color: #666;
}

/* Quantity */
.cartDiv ul.anchored-cart .product-qty, /*Targets number*/
.cartDiv ul.anchored-cart .product-qty .quantity_text /*Targets "Quantity"*/ {
    color: #666;
    font-size: 11px;
    margin-top: 1px;
}

/* Price */
.cartDiv ul.anchored-cart .product-price {
    color: #666;
    font-size: 13px;
    text-align: right;
}

/*****************************
*          SUBTOTAL             *
*****************************/

/* Subtotal container */
/* Use for padding, text-alignment, margin, borders */
.cartDiv .soft_add_sub_total {
    padding: 15px 0 0;
    margin: 0 10px;
    text-align: right;
    background: url(../images/template/faded-border.png) no-repeat 0 0;
}

/* "Subtotal" text */
.cartDiv .sub_total {
    color: #666;
    font-size: 12px;
}

/* Subtotal amount "$0.00" */
.cartDiv span.sub_total_amount {
    color: #666;
    font-size: 20px;
}

/******************************
*       CHECKOUT BUTTON       *
******************************/

/* Button */
.cartDiv .check_out {
    background: #6d6d6d;
    border-top: 1px solid #6d6d6d;
    border-bottom: 1px solid #6d6d6d;
    height: 28px;
    display: block;
    margin: 18px auto 10px; /*Use for spacing*/
    width: 120px;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    text-indent: 0;
    line-height: 28px;
    font-size: 13px;
}

/* Button */
.cartDiv .check_out:hover {
    color: #fff;
    text-decoration: underline;
}

/*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*
*   FIXES, OVERRIDES, & DEFAULT FUNCTIONALITY    *
*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*/

/* Override defaults*/
.soft_add_content_shadow,
.soft_add_content_wrapper {
    background: none;
    border: none;
    padding: 0;
    width: auto;
}

/* Product image override */
ul.anchored-cart .product-image {width: auto;}

/* Product image width */
ul.anchored-cart .product-image img {max-width: 45px;}

/* Makes divs span entire length */
ul.anchored-cart li div {width: 100%;}

/* Allows "Quantity" text to be visible */
ul.anchored-cart .quantity_text {display: inline-block;}

/* Remove superfluous border radii */
.soft_add_header,
.soft_add_action_area,
.soft_add_content_wrapper {border-radius: 0;}

/* Product Row Layout */
ul.anchored-cart {
    display: table;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Allows for vertical alignment */
ul.anchored-cart .product-image,
ul.anchored-cart .product-detail,
ul.anchored-cart .product-price {display: table-cell;}

/* Vertically aligned text */
ul.anchored-cart li,
ul.anchored-cart .product-detail,
ul.anchored-cart .product-price {vertical-align: top;}

/* Product Price spacing */
ul.anchored-cart .product-price {padding: 10px 0;}

/* Spacing within product details */
ul.anchored-cart .product-image,
ul.anchored-cart .product-detail {padding: 10px 5px;}

/* Removes unused portions */
.aremove, /*Remove button */
.number_of_items, /*Total number of items in cart*/
.continue_shopping /*Continue Shopping Button*/ {display:none;}

/* Header elements */
.soft_add_header {
    background: none;
    padding: 5px;
    width: 265px;
    border:0px;
}

/* Header styling */
.soft_add_header_shadow {
    background: none;
    display: block;
    padding: 0 20px 0 0;
    width: auto;
}

/* Remove text */
.soft_add_span {
    display: none;
}

/* Close button positioning */
div.soft_add_header a.close_btn {
    right: 8px;
    top: 8px;
}

/* Product alignment */
.cart_table td {
    vertical-align: middle;
    padding: 0 0 10px 10px;
}

/* Product hover color */
div.soft_add_content_wrapper span.product_name a:hover {
    color:#6d6d6d;
}

/* Override resets */
.soft_add_content_area, .soft_add_action_area, .soft_add_sub_total, .sub_total, .check_out {
    float: none;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    max-height: inherit;
    min-height: inherit;
    overflow: visible;
}

Screenshots of the Original and New Soft Cart

Original Soft Cart

New Soft Cart

Did this answer your question?