---
title: Soft Add to Cart
description: The Soft Add To Cart feature shows customers a summary of their cart without leaving the page they're currently viewing.
---
[Skip to content](https://help.volusion.com/s/softaddtocart#main-content)
English - United States
Show submenu for translations
Open main navigation
Close main navigation
- English - United States
Show submenu for translations
- [Contact Us](https://volusion.com/contact)
[Contact Us](https://volusion.com/contact)
Search the Help Center
- There are no suggestions because the search field is empty.
1. [Volusion Help Center](https://help.volusion.com/s?hsLang=en-us)
2. [V1](https://help.volusion.com/s/v1?hsLang=en-us)
# Soft Add to Cart
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. Clickthe 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](https://helpcenter.volusion.com/s/article/Multi-ChildAddtoCart?hsLang=en-us)** 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.
(Volusion Mobile Commerce is a legacy feature no longer supported)
Note that the style and layout of the **Soft Add To Cart** pop-up window can only be modified for certain themes.
## **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](https://helpcenter.volusion.com/s/article/HowtoArchiveYourCurrentTheme?hsLang=en-us)**!
Our technical support team is unable to assist with theme customization, but Volusion offers **[design services](https://volusion.com/marketing360)** if you'd like us to customize your site. Please contact our team for more information at 1-800-646-3517.
**Style your soft add to cart:**
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 and tags), paste the following reference to an external stylesheet:
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](https://helpcenter.volusion.com/s/article/UsingYourVolusionFTPSFTPAccount?hsLang=en-us)**, 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 HTML tags and place the entire CSS into the 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;
}
```
- [Getting started](https://help.volusion.com/s/getting-started?hsLang=en-us)
- [Manage Your Store](https://help.volusion.com/s/manage-your-store?hsLang=en-us)
- [Marketing for Success](https://help.volusion.com/s/marketing-for-success?hsLang=en-us)
- [Volusion Payment Powered by Stripe](https://help.volusion.com/s/volusion-payment-powered-by-stripe?hsLang=en-us)
- [Partner Marketplace](https://help.volusion.com/s/partner-marketplace?hsLang=en-us)
- [Support](https://help.volusion.com/s/support?hsLang=en-us)
- [V1](https://help.volusion.com/s/v1?hsLang=en-us)
- [Security](https://help.volusion.com/s/security?hsLang=en-us)
[](https://volusion.com/)
[mailto:email@email.com](mailto:email@email.com)
Copyright © 2026, Volusion