Ctrlk
Back to PageFly.ioVideo Tutorials
For the complete documentation index, see llms.txt. This page is also available as Markdown.

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.

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.

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.

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

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.

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 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

Last updated

Was this helpful?