Match the cart drawer to your store

Open your cart design in Bundlex Cart and select Style. This tab controls the drawer's overall appearance and how it opens.

Choose colours

(1) Pick a theme colour. (2) Tinted derives a pale background and matching text colours. (3) Edit colours contains the Drawer base colours and the enabled blocks. The adjacent preview uses sample products.

The Theme colours row offers colours from your published theme. Pick one and choose a Palette style: Clean, Tinted, or Dark. You can also pick a custom colour or try a random one.

Default restores the default colours while keeping the layout, such as drawer width and corner radius.

Change the colours of one block

Under Edit colours, the first row, Drawer, holds the base colours: background, text, accent, accent text, muted text, savings and borders. Below it, each block of the drawer has its own row, for example the header, the announcement bar, the rewards bar, the upsells, the footer and the checkout button. A block's row shows while that block is switched on.

Leave a block's colour empty and the block follows the drawer colours. Picking a theme colour, a custom or random colour, or Default clears every block colour, so the drawer starts clean.

Set the drawer's layout

(1) Set position, layout, header height and width in Layout. Floating exposes Gap from edges, set to 16px here. (2) Set corner radius, text size and shadows in Shape and text. Check the saved width on the storefront.

The Layout card sets where the drawer sits and how it behaves:

Drawer position: choose the left or right edge.
Drawer layout: Attached sits against the edge; Floating leaves space around the drawer and shows Gap from edges, from 0 to 80px.
Header height: Default or Compact. Compact halves the space above and below the cart title, so more of the cart fits on small screens.
Drawer width: from 280 to 700px.
Open the cart when a product is added: see automatic opening below.

The editor preview keeps its own fixed width so the controls remain usable. Save and check the storefront to judge the actual drawer width. A narrow screen limits the drawer to the available space.

Set the shape and text

The Shape and text card holds the finishing touches:

Corner radius: from 0 to 20px.
Text size: from 90 to 120%. It scales all the drawer's text at once and keeps your theme's font.
Shadows: turn depth effects on or off.

Adjust product images

Image shape is Square or Portrait (3:4). It applies to cart item images and every upsell image, so the whole drawer crops the same way.

The Images card holds every image size in one place: Cart item image size, List upsell image size (upsells in the Vertical list and One at a time layouts), Carousel and side upsell image size (the Carousel layout and every side upsell card) and Add-on image size.

Border on cart item images adds a thin line around each product photo in the cart. Turn it on when your photos have a white background, so they stand out from the drawer. New carts start without it, and upsell and add-on images never get one.

Control automatic opening

(1) The drawer sits inside the page edge with rounded corners and a pale blue background. (2) Its checkout button uses the chosen accent colour.

Open the cart when a product is added is on the Layout card. Turning it off stops automatic opening after an add; shoppers can still open the drawer with the cart icon.

In this example, a blue theme colour with Tinted and Floating gives the drawer a pale blue background and a 16px gap. Save and check the storefront on desktop and mobile. For changes beyond these controls, see custom HTML and CSS. Custom CSS sits at the bottom of Style, under Advanced.