> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.ecomx.co/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Blum Cart template

**Theme:** Blum · **Section type:** Template (cart page) and Theme setting

The cart shows what customers are about to buy, with the total and the checkout button. In Blum, you choose whether customers use a cart page or a cart drawer, what happens when they add a product, and what extra information the cart shows, such as order notes, a discount field, and a free shipping progress bar.

> **Note:** The cart page has a **Cart page** section, and you can add other sections below it. The default template includes a **Featured product carousel** for suggested products. Most cart options are in **Theme settings** > **Cart** and apply to both the cart page and the cart drawer.
![Cart page with a discount code link, free shipping bar, order note, and checkout button](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cart-1_1lju4v6.png)

**What you can do**
- Choose a cart page or a cart drawer
- Choose what happens after Add to cart
- Show order notes, a discount field, and tax information
- Show a free shipping progress bar
- Show pre-order messages and disclosures in the cart
- Change the cart page section
- See what customers see
- Change the Cart settings
- Fix common problems

---

## Choose a cart page or a cart drawer
1. In the theme editor, click **Theme settings** > **Cart**.
2. Choose a **Cart type**:
   - **Drawer**: the cart slides in from the side of the page.
   - **Page**: the cart opens as a separate page.
3. Click **Save**.

## Choose what happens after Add to cart
1. In **Theme settings** > **Cart**, choose the **Add to cart confirmation**:
   - **Show Popup**: a small popup confirms that the product was added, with **View cart** and **Check out** buttons.
   - **Open cart**: the cart drawer opens. With the **Page** cart type, customers go to the cart page.
2. Click **Save**.

## Show order notes, a discount field, and tax information
1. In **Theme settings** > **Cart**, select the options you want:
   - **Show product vendor** under each product name.
   - **Show discount field**, where customers enter a discount code.
   - **Enable order notes**, so customers can add instructions to the order.
   - **Enable dynamic checkout button**, to show buttons such as Shop Pay or PayPal on the cart page.
   - **Show tax and shipping information** below the checkout button.
2. Click **Save**.

> **Note:** Dynamic checkout buttons appear on the cart page only, not in the cart drawer.

## Show a free shipping progress bar
1. In **Theme settings** > **Cart**, select **Show free shipping notification**.
2. In **Minimum order price for free shipping**, enter the order amount that qualifies for free shipping in your store's currency, for example 100.
3. Click **Save**.

> **Caution:** This setting only shows a message. It doesn't create free shipping. Set up a matching free shipping rate in your Shopify admin under **Settings** > **Shipping and delivery**, so customers aren't told they qualify when they don't.

## Show pre-order messages and disclosures in the cart
**Pre-order message** (Blum 3.9 and later)
1. In the theme editor, click **Theme settings** > **Product information**.
2. Under **Pre-order**, turn on **Enable pre-order**, and enter a **Cart message**, for example "Ships in 2 weeks".
3. Click **Save**.

Pre-order items in the cart page and the cart drawer show the pre-order label and the message, for example "Pre-order: Ships in 2 weeks". See the article "Pre-order" for the full setup.

**Disclosures** (Blum 3.9 and later)
Product disclosures that you set to show in the cart appear under the product in the cart page and the cart drawer. You add disclosures to products in the Shopify admin.

## Change the cart page section
1. In the theme editor, open the page selector at the top and click **Cart**.
2. Click **Cart page**.
3. Choose a **Color scheme**.
4. Optional: select **Remove padding top** or **Remove padding bottom**.
5. Click **Save**.

## What customers see
- **Cart items:** each item shows the image, name, variant, price, and a quantity selector. Customers change the quantity or remove the item, and the total updates.
- **Discount field:** customers click **Discount code**, enter a code, and apply it. Valid discounts appear above the total. Shipping discounts appear at checkout after customers add an address.
- **Free shipping bar:** a message such as "You're $20.00 away from free shipping" and a progress bar. When the cart reaches the minimum, the message says the order qualifies for free shipping. The bar also appears in the add-to-cart popup and the cart drawer.
- **Order notes:** customers click **Add order note** to open the text box.
- **Empty cart:** the page shows "Your cart is empty" and a **Continue shopping** link.
- **Cart drawer:** with **Drawer**, the cart icon in the header opens the drawer, which shows the same items, notes, discount field, and checkout button.
![Add to cart popup with the free shipping progress bar, View cart, and Check out](https://storage.crisp.chat/users/helpdesk/website/-/f/8/b/b/f8bb8da391016800/cart-2_vtoy5b.png)

## Settings reference
### Cart page section: General
| Setting | What it does |
| ---- | ---- |
| Color scheme | Sets the colors of the cart page. Edit the schemes in Theme settings > Colors. |

### Cart page section: Layout
| Setting | What it does |
| ---- | ---- |
| Remove padding top | Removes the space above the section. |
| Remove padding bottom | Removes the space below the section. |

### Theme settings > Cart
| Setting | What it does |
| ---- | ---- |
| Cart type | Opens the cart as a Drawer on the current page or as a separate Page. |
| Add to cart confirmation | After Add to cart, shows a confirmation popup (Show Popup) or opens the cart (Open cart). |
| Show product vendor | Shows the vendor under each product name in the cart. |
| Show discount field | Adds a field where customers apply a discount code. |
| Enable order notes | Adds a text box for order instructions. |
| Enable dynamic checkout button | Shows buttons such as Shop Pay or PayPal under the checkout button on the cart page. |
| Show tax and shipping information | Shows a note about taxes and shipping below the checkout button. |
| Show free shipping notification | Shows how much more customers need to spend to get free shipping, with a progress bar. |
| Minimum order price for free shipping | Sets the order amount for free shipping, in your store's currency. The amount is converted when customers switch currencies. |

### Theme settings > Product information > Pre-order (cart setting)
| Setting | What it does |
| ---- | ---- |
| Cart message | Shows on pre-order items in the cart and the cart drawer. If empty, "Ships in 2 weeks" is used. Appears when pre-order is turned on. |

## Troubleshooting
**The free shipping bar doesn't appear.**
Check that **Show free shipping notification** is selected and that **Minimum order price for free shipping** has a value.

**Customers see "qualifies for free shipping" but pay shipping at checkout.**
The bar only uses the amount you entered. Make sure a free shipping rate with the same minimum exists in **Settings** > **Shipping and delivery**.

**Dynamic checkout buttons don't show in the cart drawer.**
These buttons appear only on the cart page. Switch **Cart type** to **Page** if you need them in the cart.

**The cart drawer doesn't open after Add to cart.**
Set **Add to cart confirmation** to **Open cart** and **Cart type** to **Drawer**.

## Related articles
- [Blum Product Template](https://doc.ecomx.co/en/article/blum-product-template-cv3oj3/)
- [Blum Featured Product Carousel](https://doc.ecomx.co/en/article/blum-featured-product-carousel-t3g24r/)
- [Blum Header](https://doc.ecomx.co/en/article/blum-header-12ft7y5/)
- [Blum Theme Settings](https://doc.ecomx.co/en/article/blum-theme-settings-1esrmj4/)