Cart drawer behavior settings (slide & auto-open) • Oxify Cart Drawer Cart Upsell

Cart Behavior Settings

What these settings do

Cart behavior settings control how the drawer moves and when it opens and closes. These options change the shopping feel on your store (especially on mobile).

Where to find cart behavior settings

In your app dashboard, go to Cart Editor.

Look for a section or tab named Behavior (sometimes under Settings).

Save your changes, then preview your theme to test the drawer on desktop and mobile.

Test behavior changes in an incognito/private window so you see the storefront like a new customer.

Slide direction (left, right, bottom)

This controls where the drawer comes from when it opens.

Right: A common choice. Feels natural for most stores.
Left: Helpful if your store layout uses left-side menus or you want the drawer to match your design.
Bottom: Often feels best on mobile because it behaves like a sheet that slides up.

If you choose Bottom, make sure the checkout button area is easy to reach and not covered by other sticky elements on your theme.

Open cart automatically on add-to-cart

When this is on, the drawer opens right after a customer adds an item to the cart.

When you should turn it on

You want customers to see their cart right away.
You use in-cart offers (like upsells, rewards, or coupons) and want shoppers to notice them.
You want fewer “Where is my cart?” moments.

When you should leave it off

Your product page already has a smooth flow and you don’t want interruptions.
You sell items where customers add multiple variants quickly (opening the drawer every time can feel slow).

If you don’t want the drawer to open every time, a common approach is: keep auto-open on, but also enable clear close options (like overlay click and the X button).

Close and interaction rules

These settings control how customers can exit the drawer and how the page behaves while it is open.

Click outside to close (overlay click)

When enabled, clicking the dark background outside the drawer closes it.

On: Faster to close. Feels familiar to most shoppers.
Off: Helps prevent accidental closes (useful on mobile).

Press ESC to close (desktop)

When enabled, desktop shoppers can press Esc to close the drawer.

Lock page scroll while open

When enabled, the page behind the drawer will not scroll while the drawer is open.

On: Prevents “double scrolling” and feels cleaner.
Off: Can be useful if your theme has special layouts, but it may feel messy on mobile.

If the drawer feels “stuck” on some phones, try turning Lock page scroll on. If your theme has its own drawer or sticky elements, test carefully to make sure scrolling still feels normal.

Animation and timing options

Some stores have extra options that change motion and timing. If you see these in your Behavior settings, here is what they mean.

Animation speed: How fast the drawer slides in/out. Faster feels snappy; slower feels smooth.
Auto-close after add-to-cart (if available): The drawer opens, then closes after a set time. Use with care so shoppers can still read what happened.
Focus behavior (if available): Puts the customer’s cursor inside the drawer so it’s easier to use with keyboard.

If you don’t see a setting listed on this page, it may not be available in your plan or your current template.

Recommended setups

Slide direction: Right
Auto-open on add-to-cart: On
Click outside to close: On
Press ESC to close: On
Lock page scroll: On

Slide direction: Bottom
Auto-open on add-to-cart: On
Click outside to close: Off (optional)
Lock page scroll: On

Auto-open on add-to-cart: Off
Use a clear cart icon/button: On your theme header or a floating cart button
Slide direction: Right or Bottom (your choice)

This setup works well when shoppers add several items quickly and you want the page to stay focused on browsing.

Quick checklist (before you publish)

Add an item to cart from a product page and from a collection page.
Make sure customers can close the drawer easily (X button, overlay click, ESC on desktop).
On mobile, confirm the drawer does not cover important buttons and the page does not “jump” while opening.
Check that scrolling feels normal (no double scroll or stuck scroll).

These settings only change the drawer behavior (how it opens/closes). Design options like width, padding, and layout are covered in your design and layout pages.