> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/cart-drawer/cart-drawer.md).

# Overview

### What is PageFly Cart Drawer

PageFly Cart Drawer replaces your Shopify theme's default cart drawer with a drag-and-drop builder. You compose the drawer from a library of components (free shipping and reward progress, product recommendations, bundle offers, trust badges, countdown timers, and more), style it to match your brand, and publish it — no code required.

{% hint style="info" %}
**Note**: Cart Drawer is a separate surface from PageFly's page builder. It lives in its own **CRO Center** area of the PageFly app and has its own publish flow, independent of your pages and sections.
{% endhint %}

### How it works, end to end

Getting a working drawer live on your storefront takes three steps, done in order:

1. **Build a drawer** — pick a template or start blank, then drag components onto the canvas.
2. **Publish the drawer** — this is an in-app action that marks your drawer as the active one PageFly will serve.
3. **Turn on the Cart Drawer app embed in your theme** — Shopify requires a merchant action in the theme editor before any app's storefront code can run. See [Turn on the cart drawer in your theme](/cart-drawer/turn-on-cart-drawer-in-your-theme.md).

All three steps are required. Missing any one of them means your storefront keeps showing your theme's original cart drawer.

{% hint style="warning" %}
**If your drawer still doesn't show after all three steps**, some themes need one more setting: **Force replace theme cart drawer**, found in the drawer's **Settings** tab. Most themes are auto-detected and don't need it, but if your theme isn't on PageFly's compatibility list, the drawer stays inactive until you turn this on, save, and republish.
{% endhint %}

### What you can build with it

The component library is organized into six groups, matching how you'll see them in the builder's component picker:

* **Grow order value** — Reward Ladder, Bundle Offers, Cart Recommendations, Gift Wrap, Shipping Protection
* **Build trust** — Trust Signals
* **Add urgency** — Countdown Timer
* **Remove buying barriers** — Discount Code, Order Note, Welcome Back
* **Promote** — Announcement
* **Foundational** — Drawer Header, Cart Items, Subtotal, Checkout Button, Empty Cart (always present, can't be removed)

See the full [component library reference](/cart-drawer/components.md) for what each one does.

### Before you start

* You need a Shopify theme that supports app embeds (most current themes do).
* Two components — **Reward Ladder** and **Bundle Offers** — apply real discounts at checkout. Before they'll work, you'll need to grant PageFly additional Shopify permissions (`read/write_cart_transforms`, `read/write_discounts`). The builder prompts you for this the first time you add either component.
* If you already run another cart-drawer app (for example Oxify, Upcart, or a similar app), PageFly detects it and warns you in the builder — both drawers can end up running on the same theme if you don't disable the other one.

### Next steps

* [Turn on the cart drawer in your theme](/cart-drawer/turn-on-cart-drawer-in-your-theme.md)
* [Publish and manage your drawer](/cart-drawer/publish-and-manage-your-drawer.md)
* [Component library reference](/cart-drawer/components.md)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://help.pagefly.io/cart-drawer/cart-drawer.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.