Skip to main content

How do I customize the cart drawer for my storefront?

Set up your cart drawer on one page — enable it, brand the colors, customize the text, and pick up to 10 cross-sell products.

You can configure your cart drawer from a dedicated settings page in your Subi admin. This includes turning the drawer on or off, choosing the colors, customizing the text, and picking up to 10 cross-sell products to display inside it.

Where to find the cart drawer settings

In your Subi admin, open the left side menu and go to Growth > Cart drawer settings.

Step 1 — Turn the cart drawer on

The Activity section at the top of the page has two checkboxes:

  • Cart drawer — Turns the cart drawer on or off on your storefront. When it's on, customers see Subi's cart drawer instead of your theme's default cart.

  • Subscription upgrade in cart — Lets customers upgrade one-time items to a subscription directly inside the drawer, so they don't have to go back to the product page.

Step 2 — Confirm the drawer is working

After you enable the cart drawer and save, a banner appears asking you to verify it on your storefront. Open your store, add a product to the cart, and check that the drawer opens and behaves correctly.

  • Yes, it's working — Dismisses the banner. You won't see it again.

  • Something's wrong — Opens our support chat with a pre-filled message so we can investigate quickly.

Step 3 — Match the colors to your theme

Open the Appearance tab to set seven colors that control how the drawer looks:

  • Text primary and Text secondary — Headings and supporting text.

  • Background primary and Background secondary — The drawer surface and lighter sub-sections.

  • Border — Lines between items.

  • Button background — The Checkout and other primary action buttons.

  • Invert text — Text that appears on top of the button background.

Each color uses a HEX value (for example, 024600) and shows a swatch preview next to the input. You don't need to set all seven — any color you leave blank falls back to a sensible default.

Step 4 — Customize the text

Open the Content tab to override the wording shown inside the drawer. Eight fields are available: header title, empty-cart message, subtotal label, checkout button label, upsell section title, upgrade CTA, upsell add button label, and the close button's accessible label.

The default text Subi uses is shown in each field as a placeholder, so you only need to fill in the ones you want to change.

Step 5 — Add cross-sell products

Open the Upsell tab to pick up to 10 products to surface as a cross-sell carousel inside the drawer. Click Select products, choose products from your catalog, and confirm. Selected products appear as tags on the page. To remove a product, click the × on its tag.

The carousel renders below the cart items and above the checkout block in the drawer.

Saving your changes

When you make any change, an Unsaved changes bar appears at the bottom of the page. Click Save to apply your changes, or Discard to revert. The page validates everything before saving — if any field is invalid, it switches you to the right tab and highlights the error.

Plan and theme requirements

The cart drawer is available on the Subi Plus plan. The current version supports the Dawn theme.

Next steps

After saving, visit your storefront and add a product to the cart to see the drawer in action. If anything looks off, click Something's wrong on the confirmation banner — that opens our support chat with the right context so we can help quickly.

Did this answer your question?