Your Shopify cart drawer is where shoppers decide to check out, so it should look like part of your store. HS Slide Cart Drawer Upsell lets you adjust the layout, colors, text and buttons of the slide cart without editing your theme. Design settings belong to the cart drawer you are editing, so each cart drawer can have its own look.

Layout and position

  • Cart style: Classic or Rounded, plus an overall corner roundness.
  • Width: Compact, Standard or Wide.
  • Position: open the cart from the left, from the right or centered on the screen.
  • Mobile opening: when the drawer opens from a side, choose whether it slides in from the side or from the bottom on phones.
  • Transition duration and a right-to-left layout for languages such as Arabic and Hebrew.
  • Loading behavior: open the cart after products load, after a loading overlay, or right away.

Colors, fonts and text

Start from a color preset to apply a ready-made palette without touching your layout, then fine-tune your brand colors for cart surfaces and text, buttons and highlights, and offer badges. Most elements also have their own colors.

The cart drawer uses your theme's font. For each element you can set the font size, font weight and text case. To use a different font family, add it with custom CSS.

Header

  • Show your theme's heading style, a custom title or your logo.
  • Add {{item_count}} to a custom title to show how many items are in the cart.
  • Set the alignment, bar colors, bottom border and the close button's position, size and thickness.

Products, buttons and footer

  • Use an icon or text for the remove control, and a boxed or borderless quantity selector.
  • Style the checkout and cart buttons: colors, hover colors, height, corner radius and text case. The checkout button can also show an icon and the subtotal.
  • Drag the blocks of the cart body and footer to change their order.
  • Choose the product image resolution and size, and whether prices show the currency code.

Custom CSS and import/export

Add custom CSS for this cart drawer when you need a change the settings don't cover (do not include style tags). You can also export your design to reuse it in another store or keep it as a backup, and import it later.

Best practices

  • Match your theme's brand colors and keep strong contrast on the checkout button.
  • Check the drawer on a phone as well as on desktop.
  • Export your design before making large changes.
  • Keep custom CSS short and review it after theme updates.

Troubleshooting

  • Changes don't appear in the store: save, then reload the storefront. With several cart drawers, confirm you edited the one shown on that page.
  • Custom CSS has no effect: remove any style tags and use more specific selectors, as theme styles can take priority.
  • Text looks different from the admin preview: the live cart inherits your theme's font.

Need help with your cart design? Contact us at [email protected] and we'll be happy to help.