Pages
Cart design and the cart drawer
Design one cart that powers both your /cart page and a slide-out cart drawer, and set how the drawer behaves.
In PageStax, one cart design powers two places: your store's /cart page and a slide-out cart drawer. You design it once like any other page.
Until you publish a cart design, PageStax adds nothing to your cart — no drawer, no extra scripts. Your theme's own cart keeps working.
Create a cart design#
- In Pages, press Create page and choose Cart.
- Pick one of the cart templates (or Start blank), name it, and press Create & open in editor.
- Build it from cart sections: line items, a rewards bar, an in-cart offer slot, trust badges, a discount-code box and more.
Use the Cart drawer preview (420 px) in the device switcher to see how it looks in the drawer, and Desktop for the full /cart page.
Drawer settings#
Open Page settings on the left rail:
| Setting | Default |
|---|---|
| Slides in from — Right or Left | Right |
| Panel width (px) — 320 to 560 | 420 |
| Panel heading | Cart |
| Open when something is added to the cart | On |
| Floating cart button on every page | Off |
| Replace your theme's cart icon | Off |
Under Empty cart you set the Heading, Message, Button label and Button link shoppers see when the cart is empty.
By default the drawer only takes over links to /cart. Turn on Replace your theme's cart icon if your theme's cart icon should open the drawer too.
Publish it#
Press Publish and choose a target:
- Your store's cart — replaces both the
/cartpage and the slide-out drawer across your store. - Dedicated Cart Page — a page at
/pages/<handle>. - Instant Preview Link — a link at
/apps/pagestax/p/<handle>for checking your design. It doesn't change your store's cart.
To switch the PageStax cart off, unpublish it. Both /cart and the drawer go back to your theme's.
Things to know#
- Totals are always Shopify's. Line prices, discounts and the total come from your Shopify cart. Nothing in the drawer changes what the shopper pays unless Shopify does.
- Rewards and offers in the cart need a real mechanism in Shopify. See Free-shipping and free-gift milestones and Cross-sells and add-ons.
- The drawer runs on your theme's pages through the app embed. On pages PageStax shows as a full page of its own, Add to cart takes shoppers to
/cart, where your PageStax cart design is shown. - Without a cart design, Add to cart on a PageStax page uses your theme's cart: it refreshes the theme's cart drawer if your theme has a compatible one, and otherwise goes to
/cart.