The Soft Add To Cart feature shows customers a summary of their cart without leaving the page they're currently viewing. The Add To Cart pop-up window displays when a customer adds an item to their shopping cart or hovers over the View Cart link in your store's header.

Activating / Deactivating Soft Add to Cart

  1. In your Admin Area, go to Inventory > Products.
  2. Click the three-dot actions menu icon and select All Products Settings.
  3. Enable or disable Enable Add To Cart Pop-up, and click Save.

Using Soft Add to Cart

At the bottom of the Soft Add To Cart window, customers see the number of items in their cart along with the subtotal.

They can remove products from their cart by clicking the X to the right of the item.

The Add To Cart window is displayed for 10 seconds if no activity is made within the box. The 10 second time frame resets if there is any activity. The customer can close the pop-up window at any time by clicking Continue Shopping or by navigating to another page.

When they're finished shopping, they can click the Check Out button in the Soft Add to Cart window to continue the checkout process.

Notes on Soft Add to Cart

Soft Add To Cart is not compatible with products using the Multi-Child Add To Cart feature. While the products are added to the cart successfully and show up in the cart summary, the Soft Add To Cart pop-up does not display automatically when multi-child items are added to the cart.

Additionally, note that Soft Add to Cart is not compatible with Volusion's Mobile Commerce feature, which has its own checkout configuration.

Note that the style and layout of the Soft Add To Cart pop-up window can only be modified for certain themes. See Soft Cart Styling for more information.

Styling the Soft Cart

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.

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?