Cart & Cart Drawer
The theme offers two cart experiences, controlled by a single setting:
- Drawer (default) — adding a product slides a cart panel in from the side without leaving the page.
- Page — adding a product takes the shopper to a full
/cartpage.
The cart drawer supports an empty-state with suggested products, product upsells, a free-shipping progress bar (with a celebratory confetti effect), an estimated-delivery countdown, order notes, discount codes, and cart sharing. This guide documents every setting for both the drawer and the cart page.
Table of contents
- Cart type - Empty state - Drawer settings - Upsell - Progress bar (free shipping) - Estimate delivery - Colors
Before you start
From your Shopify admin go to Online Store → Themes → Customize.
- Drawer and global cart options: click the Theme settings (gear) icon → Cart.
- Cart page: open the template picker → choose Cart, then select the cart section.
Note
This theme has only two cart modes — Drawer and Page. There is no "notification" popup mode.
The cart drawer has no section settings of its own; it is configured entirely through Theme settings → Cart.
Part 1 — Global cart settings (drives the drawer)
Open Theme settings → Cart.
Cart type
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Cart type** | Whether adding an item opens the slide-in drawer or sends shoppers to the full cart page | Drawer / Page | Drawer |
Empty state
Shown when the cart has no items.
| Setting | What it does | Type | Default |
|---|---|---|---|
| **Empty state collection** | A collection shown as suggestions when the cart is empty | Collection | — |
| **Button label 1** | First call-to-action label | Text | `Continue shopping` |
| **Button link 1** | First button link | URL | — |
| **Button label 2** | Second CTA label | Text | — |
| **Button link 2** | Second button link | URL | — |
| **Button label 3** | Third CTA label | Text | — |
| **Button link 3** | Third button link | URL | — |
Drawer settings
| Setting | What it does | Default |
|---|---|---|
| **Show vendor** | Display the product brand/vendor on each line item | Off |
| **Show view cart button** | Show a link to the full cart page from the drawer | On |
| **Show accelerated checkout buttons** | Show express checkout buttons (Shop Pay, PayPal, etc.) | On |
| **Show payment icons** | Show accepted-payment logos | On |
| **Enable share** | Let shoppers copy a link to their cart | On |
| **Enable order note** | Let shoppers add an order note | On |
| **Enable discount** | Let shoppers enter a discount code | On |
| **Enable cart note** | Enable the cart note feature | On |
Upsell
Suggested add-on products shown in the cart. Products already in the cart are automatically hidden.
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Upsell title** | Heading above the suggestions | Text | `Upsell products` |
| **Upsell position (desktop)** | Where upsells sit in the drawer | Left / Right | Left |
| **Upsell columns** | Items per row | 1 column / 2 columns | 1 column |
| **Upsell layout** | Card orientation | Horizontal / Vertical | Vertical |
| **Choose products** | The products to suggest | Product list | — |
Progress bar (free shipping)
Encourages shoppers to reach a free-shipping threshold. Crossing it triggers a confetti animation.
| Setting | What it does | Type | Default |
|---|---|---|---|
| **Show progress bar** | Enable the free-shipping progress bar | Checkbox | On |
| **Shipping threshold** | Order total that unlocks free shipping (entered in your store currency, e.g. `50`). Only when progress bar is on | Number | — |
| **Progress message** | Text shown while below the threshold. `[Amount]` is replaced by the remaining amount | Rich text | — |
| **Success message** | Text shown once the threshold is reached | Rich text | — |
Estimate delivery
Shows an estimated delivery window with a live cut-off countdown.
| Setting | What it does | Options / Type | Default |
|---|---|---|---|
| **Enable estimate delivery** | Turn the widget on | Checkbox | On |
| **Message** | Delivery message. Supports the codes `earliest_delivery_date`, `latest_delivery_date`, and `time_to_cut_off` | Rich text | A default "Estimated delivery between… Order within…" message |
Delivery days
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Min delivery days** | Earliest delivery offset | 0–30 | 2 |
| **Max delivery days** | Latest delivery offset | 0–30 | 5 |
Cutoff time
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Cutoff hour** | Daily order cut-off hour | 0–23 | 12 |
| **Cutoff minute** | Cut-off minute (5-minute steps) | 00, 05, 10 … 55 | 00 |
Countdown labels
| Setting | What it does | Default |
|---|---|---|
| **Hours label** | Wording for the hours unit | `hours` |
| **Minutes label** | Wording for the minutes unit | `mins` |
Exclusions
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Weekend exclusions** | Days skipped when calculating delivery | None / Saturday / Sunday / Saturday & Sunday | None |
| **Holiday exclusions** | Non-shipping dates, one per line (e.g. `January 1`) | Text area | — |
Date format
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Date format** | How dates display | Month Day / Day Month | Month Day |
Countdown appearance
| Setting | What it does | Default |
|---|---|---|
| **Enable background** | Show a background behind the widget | On |
| **Show border** | Show a border around the widget | On |
Colors (light & dark mode)
Set under Light mode and Dark mode headers. Leave blank to inherit the theme.
Light mode
| Setting | What it does | Default |
|---|---|---|
| **Background color** (primary) | Main drawer background | — |
| **Text color** (primary) | Main drawer text | — |
| **Progress bar text** | Progress bar label color | `#ff692d` |
| **Track** | Progress bar background track | `#d9d9d9` |
| **Fill** | Progress bar filled portion | `#000` |
| **Background color** (secondary) | Background for share / note / discount popups | — |
| **Text color** (secondary) | Text for those popups | — |
Dark mode
| Setting | What it does | Default |
|---|---|---|
| **Background color** (primary) | Drawer background | — |
| **Text color** (primary) | Drawer text | `#fff` |
| **Progress bar text** | Progress bar label color | `#d9d9d9` |
| **Track** | Progress bar track | `#8b8a8d` |
| **Fill** | Progress bar fill | `#fff` |
| **Background color** (secondary) | Popup background | — |
| **Text color** (secondary) | Popup text | — |
Note
In each mode there are two "Background color"/"Text color" pairs. The first pair styles the main drawer surface; the second styles the secondary popups (share, note, discount).
Part 2 — Cart page settings
These apply to the full cart page (used when Cart type = Page, and also reachable at /cart). Open the Cart template and select its section.
Layout
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Desktop layout** | Items and order summary stacked or side-by-side | Column / Row | Column |
| **Vendor** | Show product brand/vendor | On / Off | Off |
| **Enable payment icons** | Show accepted-payment logos | On / Off | On |
| **Enable share** | Allow sharing the cart | On / Off | On |
| **Enable order note** | Allow an order note | On / Off | On |
| **Enable Discount** | Allow a discount code | On / Off | On |
Heading settings
| Setting | What it does | Options / Range | Default |
|---|---|---|---|
| **Heading** | Cart page title. Wrap text in `**` to highlight | Text | `Your cart` |
| **Empty Heading** | Title shown when the cart is empty | Text | `Your cart is empty` |
| **Desktop heading size** | Heading size on desktop | 50–250 %, step 5 | 140 % |
| **Mobile heading size** | Heading size on mobile | 50–200 %, step 5 | 90 % |
| **Heading max width** | Maximum heading width | 400–1000 px | 600 px |
| **Heading tag** | HTML heading level | H1 / H2 / H3 / H4 | H1 |
| **Desktop heading margin bottom** | Space below (desktop) | 0–60 px | 0 px |
| **Mobile heading margin bottom** | Space below (mobile) | 0–50 px | 0 px |
Shopping button (continue shopping)
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Button label** | Continue-shopping button text | Text | `Continue Shopping` |
| **Button link** | Where it links (defaults to the "All" collection if blank) | URL | — |
| **Button size** | Button size | 2XS / Extra small / S / M / L / Extra large / 2XL | M |
| **Button style** | Visual style | Primary / Secondary / Text link | Secondary |
| **Open this link in a new window** | Open in a new tab | On / Off | Off |
Estimate delivery (cart page)
The cart page has its own copy of the estimate-delivery settings, configured separately from the drawer:
| Setting | What it does | Options | Default |
|---|---|---|---|
| **Message** | Delivery message (same `earliest_delivery_date` / `latest_delivery_date` / `time_to_cut_off` codes) | Rich text | Default message |
| **Min delivery days / Max delivery days** | Delivery window | 0–30 each | 2 / 5 |
| **Cutoff hour** | Cut-off hour (12-hour labels, e.g. 12 AM, 01 PM) | 0–23 | 12 |
| **Cutoff minute** | Cut-off minute (every minute) | 0–59 | 0 |
| **Hours label / Minutes label** | Countdown unit wording | Text | `Hours` / `mins` |
| **Weekend exclusions** | Days skipped | None / Saturday / Sunday / Saturday & Sunday | None |
| **Holiday exclusions** | Non-shipping dates, one per line | Text area | — |
| **Date format** | Date display | Month Day / Day Month | Month Day |
| **Enable background / Show border** | Widget appearance | On / Off | On / On |
Section spacing
| Setting | Range | Default |
|---|---|---|
| **Desktop padding top / bottom** | 0–200 px, step 2 | 60 px / 60 px |
| **Mobile padding top / bottom** | 0–100 px | 40 px / 40 px |
Colors
Grouped under Colors (light mode) and Colors (dark mode), each with Primary and Secondary surfaces:
| Setting | What it does |
|---|---|
| **Background color / Text color** (Primary) | Main cart-page surface |
| **Background color / Text color** (Secondary) | Secondary surfaces (popups/panels) |
Leave blank to inherit the theme.
Blocks
The cart page supports Shopify app blocks, so you can add compatible app widgets (e.g. trust badges) to the cart.
How-to guides
Switch from a cart drawer to a full cart page
- Open Theme settings → Cart → set Cart type to Page. Save.
- Open the Cart template to style the full page (layout, heading, colors).
Add a free-shipping incentive bar
- Theme settings → Cart → Progress bar → turn on Show progress bar.
- Set Shipping threshold to your free-shipping minimum (e.g.
75). - Write the Progress message using
[Amount](e.g.You're [Amount] away from free shipping!) and a Success message. Save.
Offer product add-ons in the cart
- Theme settings → Cart → Upsell → set a Upsell title and choose products under Choose products.
- Adjust position, columns, and layout to fit your drawer width. Save.
Set up estimated delivery dates
- Theme settings → Cart → Estimate delivery → turn on Enable estimate delivery.
- Set Min/Max delivery days, the Cutoff hour/minute, and any Weekend/Holiday exclusions.
- If you also use the cart page, repeat the same values under the Cart template's Estimate delivery group so both match. Save.
Customize the empty-cart state
- Theme settings → Cart → Empty state → choose an Empty state collection to show suggestions.
- Add 1–3 buttons (label + link) pointing to key pages. Save.
Best practices
- Use the drawer to keep shoppers shopping. The slide-in drawer lets shoppers keep browsing after adding items — generally better for conversion than a full-page redirect.
- Keep delivery estimates consistent. Estimate-delivery settings exist in two places (drawer + cart page). Set both to the same values to avoid conflicting promises.
- Pick complementary upsells. Choose genuine add-ons (accessories, consumables) rather than unrelated products.
- Set a realistic free-shipping threshold. A threshold slightly above your average order value nudges shoppers to add one more item.
FAQ
Is there a cart "notification" popup mode? No. The only options are Drawer and Page.
Where do I configure the drawer's settings? Entirely under Theme settings → Cart. The drawer has no separate section settings.
Can I translate the drawer's labels (e.g. "Your cart", "Check out")? Some drawer labels are built into the theme and are not editable through the language editor. See Troubleshooting below.
Why don't my upsell products show? Products already in the cart are hidden from upsells, and you must select products under Choose products.
How is the free-shipping threshold entered? As a plain number in your store currency (e.g. 75, not 7500).
Troubleshooting
Some drawer text won't translate. Certain drawer labels — including "Your cart", "Estimated total", "Check out", "Share cart", "Order note", "Discount", and the tax/duties note — are fixed in the theme and cannot be changed through Shopify's language editor. Plan around this if you sell in other languages.
The estimated delivery date differs between the drawer and cart page. The two are configured separately. Update both the Theme settings → Cart values and the Cart template's Estimate delivery values to match.
The progress bar isn't showing. Confirm Show progress bar is on and that Shipping threshold has a value.
The confetti doesn't appear. It triggers only when the cart total crosses the free-shipping threshold. Make sure the threshold is set and the progress bar is enabled.
Upsells aren't appearing in the drawer. Make sure products are selected under Choose products, and remember items already in the cart are filtered out.