Cart templates, width, padding & layout settings • Oxify Cart Drawer Cart Upsell

Cart Templates and Overall Layout

What you can control on this page

In the Cart Editor, you can change the overall look and shape of your cart drawer, including:

Cart template (a pre-made layout, if your store has templates available)
Cart width (how wide the drawer is on desktop)
Padding (space inside the cart, around the content)
Border radius (rounded corners)
Desktop vs mobile layout (so it looks good on both)

Some stores see a “Cart template” selector, and some don’t. If you don’t see templates, you can still use width, padding, and border radius to style your cart.

Choose a cart template (if available)

In your app dashboard, go to Cart Editor.

Open the section for Design or Layout (names can vary slightly).

Look for a setting like Cart template, Template, or Layout style.

Select the template you like. Then use the editor preview to make sure the spacing and sections look right for your products.

If your cart feels “too tall” or “too busy,” try a simpler template first. Then add spacing (padding) before changing lots of other settings.

Set the cart width (desktop)

Cart width controls how wide the drawer is on larger screens (desktop and laptop). A wider drawer can feel more premium, but too wide can cover too much of the page.

In Design & Layout, look for Cart width or Drawer width.

Set a width that keeps the cart easy to read without taking over the whole screen.

If the cart looks cramped: increase the width.
If the cart covers too much of the store: decrease the width.

Preview a cart with a long product title and a variant name (like size/color). Make sure text wraps nicely and buttons still fit.

Many stores aim for a drawer that feels roomy but still leaves part of the storefront visible in the background. Your best width depends on your theme and how much content you show in the cart.

Adjust padding (space inside the cart)

Padding is the empty space inside the cart drawer. It creates “breathing room” around your text, buttons, and product rows.

In Design & Layout, look for Padding (sometimes split into top/bottom/left/right).

Increase padding a little at a time until the cart looks clean and easy to scan.

After changing padding, check the bottom area (totals and checkout button). Make sure it still fits on screen without feeling squeezed.

Too much padding can push important parts (like the checkout button) below the fold, especially on mobile. Always check mobile after changing padding.

Set border radius (rounded corners)

Border radius controls how rounded the cart drawer corners look. This should match your theme style.

In Design & Layout, look for Border radius or Corner radius.

Square look: use a low radius (or 0).
Soft/rounded look: use a higher radius.

If your cart has cards/sections inside it, make sure the corner style looks consistent with those sections and your buttons.

For a clean design, use one main corner style across your storefront: cart drawer, buttons, and input fields should feel like they belong together.

Control layout for desktop and mobile

Desktop and mobile screens are very different sizes. Your cart should be easy to use on both.

What to check on desktop

Width: the cart should not feel too narrow or too wide.
Spacing: product rows should be easy to scan (image, title, price, quantity).
Long content: long product titles and discount text should wrap nicely.

Quick desktop tuning

Adjust Cart width first.
Then adjust Padding to reduce clutter.
Finish with Border radius to match your theme.

What to check on mobile

Checkout button visibility: it should be easy to find without lots of scrolling.
Touch targets: quantity buttons and close button should be easy to tap.
Padding: enough space to read, but not so much that content gets pushed down.

Quick mobile tuning

If your editor has a Mobile preview toggle, switch to it before making final changes.
Reduce Padding slightly if the cart feels too tall.
Keep corners (border radius) consistent with your theme, but avoid huge rounding if it looks odd on small screens.

Mobile layout usually uses the full screen width. Your width setting may mainly affect desktop.

Suggested workflow (fast and safe)

Choose the closest template to what you want, so you do less manual tweaking.

Get the drawer width feeling right first. This affects the whole design.

Add breathing room, then re-check the totals and checkout area.

Match your theme’s corner style so everything looks consistent.

Make sure text wraps well, buttons are easy to use, and nothing looks crowded.

Common issues (and quick fixes)

That’s okay. Not all setups show templates. Use width, padding, and border radius to style the cart. If you still need a different structure, look for other layout options in the Cart Editor sections (like item layout or header/button sections) covered on their own pages.

Increase cart width (desktop).
Increase padding slightly.
Re-check long product names and variant text.

Reduce padding so important content sits higher.
Make sure the checkout area is not pushed too far down.
Check that sections are not adding extra blank space.

Lower the border radius until it matches your theme. If your theme has mostly square buttons and inputs, a very rounded cart can look out of place.