> For the complete documentation index, see [llms.txt](https://fstack-software.gitbook.io/eazify-cart-upsell/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://fstack-software.gitbook.io/eazify-cart-upsell/cart-editor-merchant-guide.md).

# Cart Editor — Merchant Guide

The Cart Editor is where you design and configure your store's cart drawer: what it looks like, which blocks appear in it, and how they behave. This guide walks through every section of the editor.

### 1. Templates

Your cart drawer uses one of two templates, each with its own independent set of blocks and settings:

* **Classic** — the full-featured drawer layout, with the widest range of blocks and per-block customization.
* **Minimal** — a more compact drawer, built for stores that want a leaner cart experience.

Switching templates does not affect the other template's configuration — you can set up both and switch between them at any time.

### 2. The Editor Layout

* A live preview of the drawer sits alongside the settings panel, so every change you make is reflected immediately.
* Use the **Items / Empty cart** toggle above the preview to see how the drawer looks with items in the cart versus when it's empty — these are configured separately (see Empty Cart State).
* Use the **Desktop / Mobile** toggle to preview both layouts.
* A **View on store** link opens your actual live storefront so you can see the drawer in context.
* Changes are drafted locally as you edit; use the Save button to publish them to your live store.

### 3. General Settings

* **Cart width** — Slim, Normal, or Thick.
* **Dividers** — show/hide divider lines between sections, and set their thickness.
* **Image ratio** — aspect ratio used for product images in the drawer.
* **Open on add to cart** — automatically opens the drawer when a shopper adds a product.
* **Open on cart icon click** — makes your theme's existing cart icon open this drawer instead of the theme's default cart.
* **Continue shopping link** — an optional link shown in the drawer (label + destination URL).

### 4. Design

Controls the drawer's visual style: colors (background, text, buttons, borders, icons, prices), corner radius, and fonts. These apply across every block unless a specific block has its own color overrides (e.g. the reward bar and upsell blocks have their own color settings, since they're often styled to stand out).

### 5. Sticky Cart Button

An optional floating button on your storefront (outside the drawer itself) that shoppers can click to open the cart:

* **Layout** — a corner button or a side tab.
* **Position** — bottom-left or bottom-right, with adjustable distance from the edge.
* **Icon, size, roundness, and colors** — for both the button itself and the item-count badge.
* **Show item count** / **hide when cart is empty**.
* **Click behavior** — open the cart drawer, or go straight to the checkout page.
* **Device visibility** — desktop only, mobile only, or both.
* **Draggable position** — lets shoppers reposition the button themselves on their screen.

### 6. Building the Drawer: Zones and Blocks

The drawer is split into three zones — **Header**, **Body**, and **Footer** — each holding an ordered list of blocks you can add, remove, and drag to reorder. Most blocks are optional; a few (marked *required* below) are always present because the drawer can't function without them.

#### Header

* **Header** *(required)* — the drawer's title (supports the `{{cart_quantity}}` placeholder), optional logo, alignment, height, and font settings.
* You can also add an **Announcement** or **Rewards bar** block into the header zone if you'd rather have them at the top instead of in the body.

#### Body

* **Product card** *(required)* — controls how each cart line item is displayed: vendor, variant info, properties, compare-at price, unit price, discounts, savings, image size/border, name/price typography, stock-left indicator, SKU, reviews widget, and the quick variant-edit panel.
* **Rewards bar** — a progress bar toward a free-shipping, free-gift, or discount reward once the cart reaches a spending threshold. Configure one or more tiers, each with its own goal and reward. See Rewards & Discounts below for how the discount is actually applied at checkout.
* **Upsell products** — a "You might also like" section recommending products for the shopper to add without leaving the drawer. Product sources include Shopify's own recommendation engine, best-sellers, or a hand-picked "Specific product" list; you can also define named rules that offer a discount on particular recommended products. Layout (carousel/list), button behavior (add directly, open a quick-view modal, or redirect to the product page), and full styling are all configurable.
* **Announcement** — a rotating or carousel message bar, optionally a countdown-timer/cart-reservation style banner.
* **Checklist — Benefits**, **Info Bar — Shipping + Returns**, **Trust — Cart Security Seals**, **Custom HTML** — supporting content blocks for trust-building and merchandising messages.
* **Empty cart** *(required)* — see Empty Cart State.

#### Footer

* **Subtotal** *(required)* — label, VAT breakdown toggle, savings/compare-at-price display.
* **Checkout and View cart button** *(required)* — checkout button label/icon/style, and an optional secondary "View cart" button.
* **Discount codes** — lets shoppers enter a discount code; can render inline in the footer or behind a "Discount" trigger button.
* **Order note** — an optional "Add special instructions" field for the shopper.
* **Gift wrap** — offers a gift-wrap add-on (backed by a real placeholder product/variant you choose) with an optional gift note field.
* **Shipping protection** — offers an add-on shipping-protection line item (also backed by a real placeholder product/variant), with its own title, description, price, and tooltip.
* **Trust badges** — payment/security icons.
* **Custom text** — free-form text, optionally paired with a required agreement checkbox that blocks checkout until it's ticked.
* **Express payments** — shows the shopper's available express checkout buttons (Shop Pay, PayPal, etc.). This requires a one-time manual step: the app shows you a short code snippet to paste into your theme once, so Shopify can render your store's real express-checkout buttons inside the drawer.

> **Gift wrap** and **Shipping protection** both require you to pick a real product/variant in their settings — the block stays hidden on your storefront until one is selected.

### 7. Empty Cart State

Switch the preview to **Empty cart** to configure what shoppers see when their cart has nothing in it. This is a fully separate configuration from the "has items" state:

* The **Header**, **Body**, and **Footer** zones each have their own empty-cart block order — for example, you might want the checkout button hidden entirely on an empty cart, or show a "Continue shopping" link that isn't shown otherwise.
* The **Empty cart** block itself lets you set an icon, message, padding, an optional "Continue shopping" button, and suggested collections to help shoppers start browsing.

### 8. Rewards & Discounts: How They Work

The **Rewards bar** and the **Upsell block's discount rules** don't just change what's displayed — they create and manage real Shopify Automatic Discounts on your store, so the price reduction is enforced at checkout, not just shown in the drawer. You don't need to create these discounts yourself in Shopify Admin; the app keeps them in sync automatically every time you save your settings.

### 9. Cart Validation

Set a minimum or maximum number of items required before checkout is allowed (not both at once):

* **Type** — Minimum or Maximum.
* **Items** — the threshold count.
* **Applies to** — all products, specific products, or specific collections (with optional variant-level narrowing for specific products).
* **Message** — a customizable error message (with color and size) shown to the shopper, and the checkout button is disabled until the rule is satisfied.

### 10. Page Display

Control which storefront pages the cart drawer is allowed to appear on: everywhere, only on a hand-picked list of pages, or hidden on a hand-picked list of pages.

### 11. Analytics

The app's Analytics dashboard shows store-level metrics derived from completed orders and anonymous storefront sessions — average order value, reward-bar unlock rate and its impact on order value, and cart-funnel metrics (cart views, checkout clicks, and their conversion into completed orders). No individual shopper is identified in this data.

### 12. Saving and Publishing

Changes you make in the editor are a draft until you click **Save** — at that point they're written to your store and take effect on your live storefront immediately. Use the **Active/Inactive** status toggle (separate from the Save action) to instantly turn the entire cart drawer on or off on your storefront without discarding your configuration.