Buttons and checkout area

The Settings panel in the Cart Editor controls how the cart drawer looks and behaves around the checkout area. To open it, go to the Oxify app Home, click Manage Cart Drawer (or Set up Cart Drawer) on the Cart Drawer card, then click Settings in the Cart Editor's left sidebar. The options below are in the Cart Settings card. This article walks through each one, then covers the checkout button's text and colors, which live in the Design panel.

[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 Cart Width for Desktop slider to set a custom width. It runs from 440px (the default) up to 850px, so you can make the drawer wider than the default but not narrower. A wider drawer gives more breathing room for upsell cards and product images.

Mobile is unaffected by this setting. On phones the drawer uses the full screen width regardless of where the slider is set, so this is purely a desktop control (it applies on screens about 1,000px wide and up).

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.
• Toward 850px — the maximum. Very wide drawers cover most of the page on smaller laptops.

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 (/cart) 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 area 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 area 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 — without it, shoppers with long carts have to scroll to the bottom to check out.

Show Advance Settings

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

• Add to Cart Button Custom Query Selector, Open Cart Custom Query Selector, Count Bubble Custom Query Selector, and Hide Theme Cart Custom Query Selector — extra CSS selectors (separate several with a comma) for the add-to-cart buttons Oxify listens to, the elements that open the drawer, the cart count bubbles it updates, and the theme cart elements it hides. They are added to the ones Oxify already detects.
• Use Compare At Price for savings calculation — on by default. When on, savings are calculated from the product's compare-at price; when off, only discounts applied in the cart count.
• Use line price for order discount display — off by default. When on, each item shows its price after order-level automatic discounts.
• Show image URLs in line item properties — off by default. When on, property values that are image links display as images.
• Image Optimization — a slider from More Optimized (the default: smaller product images, faster page load, lower image quality) to Less Optimized (larger, sharper images). It sets the image size the cart requests from Shopify.

Other Settings (further down)

Below Cart Settings, the Other Settings card covers more of the checkout area:

• Show Applied Discount — on by default. Shows the settings for the line that lists the discounts applied to the cart: Applied Discount Title (default "Discount"), text color, font size, and background color.
• Show total savings of cart — off by default. Shows a savings line near the subtotal when the cart has savings. Total Saving Bar Display Type sets where: Above Subtotal (default, a row above the subtotal) or Inline (next to the subtotal amount, where you can use {{totalSavings}} in Total saving text to show the amount). You can also set the text, font size, and text color.
• Show continue shopping button? — on by default. Adds a Continue Shopping link under the checkout button that closes the drawer. You can change its text, font size, and text color.
• Show terms and conditions — see Require Terms & Conditions before checkout.

"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.

Checkout button text and colors

The checkout button itself is styled in Cart Editor → Design:

• Checkout Section → Checkout Button — the button text (default CHECKOUT • {{cart_total}}). Click the variable icon to insert {{cart_total}} (the final cart total), {{original_price}} (the pre-discount total, struck through), or {{savings}} (the amount saved). The last two are blank when the cart has no savings.
• Checkout Section also has Subtotal Text (default "Subtotal"), Checkout Background, Subtotal Font Size, and Subtotal Text Color.
• Cart Global Design has Button Text Size, Button Text Color, Button Radius, and Button Background Color for the checkout button. There is no separate height setting — the button grows with Button Text Size.

Express (accelerated) checkout buttons are configured separately under Express Checkout in the sidebar.

Developers can also replace this whole checkout area with the Footer tab of the Custom template card at the bottom of the Design panel — see Cart drawer header for how to turn custom templates on.