Overview
Upcart gives you full control to modify the cart’s appearance and behavior using Custom HTML, Custom CSS, and JavaScript. These tools let you add new features, style your cart to match your brand, or introduce logic to improve how your cart works.
This guide covers the basics of each and shows how to get started. Each section includes a quick visual example to help you understand how changes look in practice.
Before you start, make sure to review Upcart’s customization policy so you know what is and isn’t supported by our team.
Add content with HTML
HTML is used to add static content like text, banners, or buttons into your cart. You can choose from multiple HTML locations in the Custom HTML editor (e.g., above checkout button, bottom of cart, between items).
Common use cases:
Add custom messages
Insert legal disclaimers or policy links
Highlight shipping deadlines or delivery info
Example:
<div style="text-align: center; font-weight: bold;">
Thanks for shopping with us!
</div
Add logic with JavaScript
JavaScript controls cart behavior and logic. You can use it to show or hide elements, conditionally apply styling, or respond to cart changes in real time.
You’ll wrap your code in a <script> tag and place it in Custom HTML > Scripts (Before Load) or Above Announcements, depending on when it should run.
Example: Limit the cart to one upsell at a time:
<script>
// Show upsells again when upsells are removed
window.upcartOnItemRemoved = (_, item) => {
if (item?.properties?.__upcartUpsell) {
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
if (upsells) upsells.style.display = "block";
}
};
// Hide upsells once one is added
window.upcartOnAddUpsell = () => {
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
if (upsells) upsells.style.display = "none";
};
// Check for upsell in cart when it loads
window.upcartOnCartLoaded = (cart) => {
const upsells = window.upcartDocumentOrShadowRoot.querySelector(".upcart-upsells-module");
const items = cart.items || [];
const hasUpsell = items.some(item => item?.properties?.__upcartUpsell);
if (upsells && hasUpsell) {
upsells.style.display = "none";
}
};
</script>
🔧 Developer note:
Upcart provides a full Public API documentation that lists all functions, variables, and best‑practice patterns available for advanced customizations. We recommend reviewing this when building more complex scripts or integrations.
Style your cart with CSS
CSS controls the look and feel of elements in your cart. Use it to adjust spacing, colors, font sizes, or hide unwanted elements. The Custom CSS section is found at the bottom of the Settings tab.
Common use cases:
Change product title or button colors
Adjust font size or alignment
Add spacing between sections
Example: Change upsell title color:
.upcart-upsells-title {
color: #C20075 !important;
font-size: 25px;
font-style: italic;
text-align: center;
}
Additional resources
Looking to improve your HTML, CSS, or JavaScript skills? Check out these free tools:
Support for customizations
Upcart’s support team can’t assist with implementing custom code. For more advanced changes, we recommend hiring a Shopify Expert.