Articles on: ShopCart

How to customize the cart drawer design

How to customize the cart drawer design


In this article:


You can match the ShopCart cart drawer to your store's look without code: pick a ready-made color template, then fine-tune the font, card style and colors.


Choose a color template


  1. Open ShopCart and click Edit in the Cart Drawer card.
  2. Click Design and open Color templates.
  3. In Choose color template, select a template: Graphite, Violet & Gold, Light Lilac, Terracotta, Neon Lime or Azure. The preview on the right changes right away.
  4. Click Save at the top of the editor.




A template sets the colors of the whole cart at once. You can still change single colors afterwards on each widget's Styles tab.


Set the card style, font and background


Open Theme setting:


  • Card style: Sharp for square corners or Rounded for rounded ones.
  • Font settings: search for a font in Font and choose its Style, for example Semi Bold. The box above shows a sample.
  • Main background color: the background of the whole cart drawer.




Click Save when you're done.


Change the colors of each widget


Every widget has its own colors. Click the widget on the left, for example Header or Upsells, and open the Styles tab. To go back to the original look of a widget, click Restore to default at the bottom of the panel.


Preview on desktop, tablet and mobile


Use the three device icons next to Publish at the top of the editor to see the cart on desktop, tablet and mobile. The preview shows sample products, so you can check the design before you add anything to your own cart.


✔️ Next step


Check our articles to learn more about the app's functionality:


Updated on: 20/10/2026

Was this article helpful?

Share your feedback

Cancel

Thank you!