Customize your cart drawer in Upcart using HTML and CSS via Settings > Custom HTML & CSS.

While Upcart offers help from our AI assistant Fin, you can also use third-party AI tools to create custom content.

Best Practices

Use only inline HTML — no <html>, <head>, or <body> tags.
Keep all CSS in the Custom CSS section.
Use the HTML location dropdown to choose exactly where your snippet will appear.
If you’re using JavaScript, it should either be:
- A small inline <script> (like a countdown timer)
- Or placed in the “Scripts (Before Load)” section
Send the AI a link to Upcart’s V2 CSS Selector Library and HTML Location Library so it generates code using the correct class names for your cart version.

Things to Avoid

Don’t paste full webpages (<html>, <head>, <body> ) from AI tools or code generators, they will break the Upcart layout.
Avoid putting styles in <style> tags inside the HTML box.
Don’t use external fonts or heavy libraries unless absolutely necessary.

Use ChatGPT or Similar AI for Extra Support

Use this copy-paste prompt to get clean code that works with Upcart:

I'm using a cart drawer app, Upcart, on my Shopify storefront. Please help me make design changes to the cart. Ensure to provide only the HTML to embed within the existing cart, rather than full HTML documents.   
  
**Do not include:**  
- `<html>`, `<head>`, or `<body>` tags  
- `<style>` tags (I will place CSS in a separate field)  
- Scripts unless they are very small and inline (or intended for the "Scripts (Before Load)" section)  
  
Here's a documentation page that lists all of Upcart's current CSS selectors: https://docs.aftersell.com/upcart/upcart_css_selector_library_v2
(If your cart is still on V1, use the V1 library instead: https://docs.aftersell.com/upcart/upcart_css_selector_library_v1)
  
Here's a documentation page that lists all of Upcart's current HTML locations: https://docs.aftersell.com/upcart/upcart_html_location_library  
  
Here’s what I want to build:  
[Insert what you want. e.g. A free shipping progress bar, a trust badge row, a message for international customers, etc.]  
  
Please return only the HTML snippet for the Custom HTML box and the corresponding CSS (if any) that I can paste into the Custom CSS box.

Getting Started

Cart Modules

Cart Settings

Sticky Cart Button

Multicart

Customizations

Analytics

Integrations & Compatibility

Billing & Account

Troubleshooting

AI prompt suggestions for adding custom code to your Upcart settings

Best Practices

Things to Avoid

Use ChatGPT or Similar AI for Extra Support

​Best Practices

​Things to Avoid

​Use ChatGPT or Similar AI for Extra Support

Best Practices

Things to Avoid

Use ChatGPT or Similar AI for Extra Support