.upcart-cart and .upcart-cart-body are on the drawer shell rather than on a module, so they still apply on V2. Layout fixes that target the drawer as a whole (constraining its width, stopping horizontal overflow) keep working after an upgrade.
Overview
If you want to change the appearance of your cart, such as hiding a price, adjusting text size, or repositioning a button, this is the place to begin. This CSS selector library provides the tools you need to make those changes with your own custom code. All available CSS selectors are grouped in this article, along with links to helpful resources for writing and testing your styles.Note
While we provide this library for your convenience, the Upcart support team cannot help with building or fixing custom code. This is part of our Customization Policy. We recommend consulting with a Shopify Expert for custom code solutions. See Shopify ExpertsHow to Use Upcart CSS Selectors
This article is a library of CSS selectors you can use to style and customize your Upcart cart drawer. Each selector targets a specific part of the cart—like the header, product rows, upsells, rewards module, and more. You can use these selectors to:- Hide or restyle elements
- Change spacing, fonts, or colors
- Adjust layout based on your store’s branding
What to Know Before Adding CSS
Before jumping into your custom styles, here are a few tips to help things go smoothly. These will make it easier to test changes, avoid surprises, and get the look you want without breaking anything in your cart.CSS Customization Checklist:
- Test in a safe environment: Use a preview or unpublished theme when possible before going live.
- Start small: Make one change at a time so it’s easier to track what worked or didn’t.
- Paste styles in the right place: Use the Upcart Editor > Settings > Custom CSS field to add your code.
- Use Inspect Tool: Right-click on elements in your browser and select Inspect to find and test selectors live.
- Avoid assumptions: Not every element appears on all carts—test with different carts (with/without rewards, upsells, etc.).
CSS Selectors Library
Below is a list of all the CSS selectors available in Upcart. These are grouped by module (like header, products, upsells, etc.) to make it easier for you to find what you want to customize. Use this as a reference when writing your own styles.General Settings
Design Module
Header Module
Body Settings
Announcements Module
Rewards Module
Recommendations Module
Subscription Upgrades Module
Upsells Module
Product Settings
Footer Settings
Add-ons Module
Discount Codes Module
Savings Row
Express Payments Module
Note
The Express Payments buttons in Upcart serve as visual containers, while the content and functionality within them are fully controlled by Shopify. As a result, we’re unable to modify their behavior or appearance. Refer to the Express Payments Module Guide for more information.Trust Badges Module
Additional Notes Module
Upcart Settings Module
Skeleton Selectors
Helpful resources to get started:
- Getting Started with Custom CSS: Learn how to safely add custom CSS in Upcart.
- Intro to Customizations in Upcart: Understand how customization works and where to start.
- Use AI to Write Custom Code for Upcart: Get help writing CSS or JavaScript using simple prompts.
- Best Practices to Increase Cart Conversions: Optimize your cart design with proven tips.