Cart Drawer Position and Size: Desktop and Mobile
You can set where the cart drawer slides in from, how wide it is, and how round its corners are. Desktop and mobile each have their own values.
Open the Position card
- Open your cart drawer in the editor.
- In the left menu, click Settings.
- The Position card is at the top of the Settings tab.
The card has a desktop / mobile switch. It switches the editor preview too, so you see each change as you make it. Desktop means screens 750px and wider.
Desktop
| Setting | What it does |
|---|---|
| Slide from | Right or Left |
| Width | 360 to 640px |
| Corner radius | 0 to 32px |
| Style | Attached: the drawer touches the screen edges. Floating: the drawer floats as a card with space around it |
| Space from screen edges | Floating only. Top, Right, Bottom and Left, 0 to 80px each |
When you pick Floating and the corners are square (0px), they change to 12px so the card looks right. A corner radius you've already set is kept. You can change it after.
Mobile
| Setting | What it does |
|---|---|
| Slide from | Right, Left or Bottom |
| Width | Right or Left: 50 to 100% of the screen. Below 100%, the page shows beside the drawer |
| Max height | Bottom: 40 to 100% of the screen. Below 100%, the page shows above the sheet |
| Corner radius | 0 to 32px. Not available at 100%, where the drawer fills the screen |
Bottom opens the cart as a sheet. Shoppers swipe down or tap outside to close it.
Open on add to cart
Open cart drawer on add to cart also sits in the Position card. It applies to both desktop and mobile.
- Ticked: the drawer opens every time a customer adds a product.
- Unticked: adds happen quietly, and the drawer doesn't open on add. It opens from the cart icon or any other cart trigger you've set up.
For finer rules, see Controlling When the Cart Drawer Opens.