⚠️ IMPORTANT NOTICE
These selectors apply only to Version 2 (V2) of the Upcart cart modules. If you are using Version 1 (V1), these selectors will not work.
For V1 carts, please refer to the Version 1 CSS Selectors documentation, which covers the legacy module structure and selectors.
To check which version you’re using, go to Upcart > Cart Editor > Settings > Cart versioning. For more information about migrating from V1 to V2, see the V2.0 migration guide.
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.
How 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
To apply your CSS, go to Upcart > Settings > Custom CSS, and paste your styles into the editor.
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.).
The following selectors work with Version 2 of Upcart cart modules. V2 introduces a structured naming system with public and internal class prefixes.
Important guidelines for V2 selectors
⚠️ Use only public selectors for customization
Public selectors (prefixed with
upcart-public-) are part of the stable API and safe to use for custom stylingInternal selectors (prefixed with
upcart-internal-) are reserved for internal use and may change without notice
✅ DO: Use public class names for styling
/* ✅ Correct usage */
.upcart-public-header {
font-size: 18px;
font-weight: bold;
}
❌ DON’T: Override internal classnames or use deep selectors
/* ❌ Avoid this */
.upcart-internal-header {
font-size: 18px;
font-weight: bold;
}
/* ❌ Avoid this */
.upcart-public-upsell div a {
font-size: 18px;
font-weight: bold;
}
CSS Selectors
General Components
General Components
CSS Selector | Description |
| General skeleton loader wrapper for the cart. |
| General button component used across modules. |
| Loading spinner component. |
| Tag component wrapper. |
| Icon inside a tag. |
| Text content of a tag. |
| Container for collapsible dropdown sections. |
| Icon that indicates expand/collapse state. |
Header module
Header module
CSS Selector | Description |
| Main container for the cart header. |
| Button used to close the cart drawer. |
| Icon displayed inside the close button. |
Announcements module
Announcements module
CSS Selector | Description |
| Banner or announcement section within the cart. |
Recommendation and Upsell modules
Recommendation and Upsell modules
CSS Selector | Description |
| Card layout for each upsell/recommendation product. |
| Container for the upsell product image. |
| Image of the upsell product. |
| Information section of the upsell tile. |
| Link wrapper for the product title. |
| Title of the upsell product. |
| Row containing product ratings. |
| Star rating display. |
| Partial star for fractional ratings. |
| Review count display. |
| Row containing price information. |
| Original (strikethrough) price for the upsell. |
| Current price of the upsell item. |
| Row containing variant selection. |
| Skeleton placeholder for upsell module. |
| Skeleton for upsell section title. |
| Skeleton for upsell product image. |
| Skeleton for upsell product title. |
| Skeleton for upsell product price. |
Notes module
Notes module
CSS Selector | Description |
| Main container for the notes section. |
| Container for the notes text area. |
| Text input area for adding a custom note to the cart. |
Discount code module
Discount code module
CSS Selector | Description |
| Main container for the discount code section. |
| Form wrapper for discount code input. |
| Wrapper for the discount code input field. |
| Input field for entering discount codes. |
| Suffix element for the input field. |
| Error message display for invalid codes. |
| Button to apply discount code. |
| Skeleton placeholder for discount code module. |
| Skeleton for discount code input field. |
| Skeleton for discount code apply button. |
Trust badges module
Trust badges module
CSS Selector | Description |
| Container for the trust badges. |
| Image element used in a trust badge. |
Tiered rewards module
Tiered rewards module
CSS Selector | Description |
| Main container for the rewards section. |
| Displays progress messages related to rewards. |
| Container for the rewards progress bar. |
| Segmented progress bar component. |
| Container for all progress bar segments. |
| Individual segment of the progress bar. |
| Fill portion of a progress bar segment. |
| Label for a progress bar segment. |
| Milestone marker on the progress bar. |
| Milestone positioned at the bottom. |
| Milestone positioned at the top. |
| Milestone positioned in the middle. |
| Icon displayed at a milestone. |
| Label text for a milestone. |
| Right-aligned milestone label. |
| Center-aligned milestone label. |
| Skeleton container for the rewards section. |
| Skeleton for the rewards progress message. |
| Skeleton for the rewards progress bar. |
Cart items module
Cart items module
CSS Selector | Description |
| Wrapper for an individual product item in the cart. |
| Content area of the product tile. |
| Wrapper around the product image. |
| Image of the product in the cart. |
| Information section of the product tile. |
| Header section of the product tile. |
| Name of the product in the cart. |
| Link that wraps the product title. |
| Button to remove the product from cart. |
| Variant information display. |
| Wrapper for additional product metadata. |
| Bundle information section. |
| Pricing section of the product tile. |
| Original (strikethrough) price. |
| Final price shown to the customer. |
| Specific savings for a cart item. |
| Controls section (quantity, etc.). |
| Quantity selector wrapper. |
| Button to decrease quantity. |
| Button to increase quantity. |
| Discount codes applied to the item. |
| Subscription upgrade section. |
| Wrapper for select dropdown. |
| Select dropdown element. |
| Displays subscription details for the item. |
| Individual product property. |
| Link within product properties. |
| Key-value pair display for item properties. |
| Container for bundle properties. |
| Variant title for bundle items. |
| Header for bundle properties section. |
| Container for bundle item components. |
| Row for each bundle item component. |
| Wrapper for bundle item image. |
| Content area for bundle item. |
| Product title for bundle item. |
Add-ons module
Add-ons module
CSS Selector | Description |
| Main container for the add-ons section. |
| Wrapper for the add-on image. |
| Content wrapper for add-on information. |
| Wrapper for add-on title. |
| Title of the add-on product. |
| Price section for add-on. |
| Original (strikethrough) price of the add-on. |
| Current price of the add-on product. |
| Description of the add-on product. |
| Wrapper for the add-on toggle. |
| Toggle switch to add/remove an add-on. |
| Switch element of the toggle. |
| Slider element of the toggle. |
| Skeleton placeholder for add-ons section. |
| Skeleton for add-on product image. |
| Skeleton for text content in add-ons. |
Cart summary module
Cart summary module
CSS Selector | Description |
| Main container for the cart summary. |
| Container for discount codes in summary. |
| Label for discount section. |
| Sliding container for discount codes. |
| Total discount amount display. |
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.