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
Things to Avoid
Don’t paste full webpages 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 the UpCart app on Shopify. Please provide only the HTML to embed within an existing page — no 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)
I want to place this inside the cart drawer at this location: [insert location from UpCart’s HTML placement dropdown — e.g., “Above checkout button”].
Here’s what I want to build:
[insert what the customer wants — 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.
Custom HTML/CSS is causing UI conflicts in the UpCart app.
If your custom code caused layout changes in the UpCart interface within your Shopify Admin, no worries! Just contact our support team — we’re happy to help fix it.