Skip to main content

Buttons and checkout area

Configure cart width, checkout button behavior, and sticky footer in the Cart Editor's Settings panel.

A
Written by Aditya Singh

The Settings panel in the Cart Editor controls how the cart drawer looks and behaves around the checkout area. This article walks through each option.

[Screenshot: Cart Editor → Settings panel showing Cart Width slider, Go to cart instead of checkout, and Disable Sticky Checkout Footer]

Cart Width For Desktop

Controls how wide the cart drawer is on desktop screens.

Default: 440px on desktop, 100% on mobile.

Drag the slider to set a custom width. The slider goes up to a wide cart format (around 600px) which gives more breathing room for upsell cards and product images.

Mobile is unaffected by this setting. Mobile always uses 100% screen width regardless of where the slider is set, so this is purely a desktop control.

What to pick:

  • 440px (default) — works for most stores. Tight enough to feel like a side panel, wide enough for a clean cart layout.

  • 500–600px — better if you have lots of cart features enabled (rewards bar + upsells + add-ons + trust badges). More room means less cramped.

  • Below 440px — usually too tight. Product images get small, line items wrap, and upsell cards look squashed.

Go to cart instead of checkout

Controls where the checkout button takes the customer.

  • Off (recommended) — Clicking the checkout button takes customers straight to Shopify's checkout, skipping the standard /cart page entirely. Faster, fewer clicks, higher conversion.

  • On — Clicking the checkout button takes customers to the Shopify cart page first, where they have to click a second time to reach checkout.

When to turn this on: only if your store has a custom-built cart page that does something Shopify checkout can't (custom B2B logic, multi-step quoting, custom integrations). For most stores, leave this off — every extra click between cart and checkout costs conversions.

Disable Sticky Checkout Footer

Note: this setting works in reverse. Leave it unchecked for the recommended behavior.

  • Unchecked (recommended) — The checkout button stays pinned to the bottom of the cart drawer while the cart contents scroll above it. Customers can always see the checkout button, no matter how many items are in their cart.

  • Checked — The checkout footer scrolls along with the rest of the cart contents. On long carts, customers have to scroll all the way down to find the checkout button.

The recommended setup is unchecked. A sticky checkout footer is one of the highest-impact UX choices in the cart drawer — losing it on long carts is one of the most common reasons customers abandon mid-cart.

Show Advance Settings

Click Show Advance Settings to reveal additional options. These are less commonly changed and most stores leave them at default.

Other Settings (further down)

Below the buttons section, the same settings panel includes:

  • Show Applied Discount — display active discount details on the cart.

  • Show total savings of cart — show a "Total savings: $X" line near the totals when discounts are applied.

  • Total Saving Bar Display Type — controls how the savings line is styled.

"Show total savings of cart" is the strongest of these — it makes the dollar amount customers are saving feel tangible at the moment of conversion. Recommended on whenever you run any discount.

Tip

After making any changes here, test the cart on both desktop and mobile in incognito mode. Width changes especially behave differently across screen sizes — what feels right on a 27-inch monitor can feel cramped on a 13-inch laptop.

Did this answer your question?