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.
⚠️ Please note
While we provide this library for your convenience, the UpCart support team cannot help with building or fixing custom code. 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.).
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
Design Module
CSS Selector | Description |
| Main container for the cart drawer. |
| Holds the primary content of the cart. |
| The dark overlay that appears behind the cart. |
| Displays a loading bar while the cart is loading. |
Header Module
Header Module
CSS Selector | Description |
| Container for the cart header, including the logo and close button. |
| Button used to close the cart drawer. |
| The icon displayed inside the close button. |
| Displays the logo image in the cart header. |
| The title text displayed in the cart header. |
Body Settings
Announcements Module
Announcements Module
CSS Selector | Description |
| Banner or announcement section within the cart. |
| Skeleton placeholder for the announcement section. |
Rewards Module
Rewards Module
CSS Selector | Description |
| Main container for the rewards section. |
| Displays progress messages related to rewards. |
| Background layer of the rewards progress bar. |
| Foreground/progress fill of the rewards bar. |
| Represents a specific tier in the rewards system. |
| Visual circle indicator for a reward tier. |
| Icon inside a reward tier circle. |
| Description text under each reward tier. |
| Skeleton container for the rewards section. |
| Skeleton for the rewards progress message. |
| Skeleton for the rewards progress bar. |
Recommendations Module
Recommendations Module
CSS Selector | Description |
| Wrapper for the entire product recommendation module. |
| Title text for the recommendations section. |
| Button to shop a recommended product directly from the cart. |
Subscription Upgrades Module
Subscription Upgrades Module
CSS Selector | Description |
| Section for promoting subscription upgrades in the cart. |
| Button used to trigger a subscription upgrade. |
| Dropdown to select available subscription upgrade options. |
Upsells Module
Upsells Module
CSS Selector | Description |
| Main container for the upsells section. |
| Wrapper for the upsells module. |
| Title of the upsells section. |
| Button to add upsell items to cart. |
| Card layout for each upsell product. |
| Title of the upsell product. |
| Wrapper around the upsell product image. |
| Image of the upsell product. |
| Price of the upsell item. |
| Row containing price and compare price. |
| Original price (strikethrough) for the upsell. |
| Variant dropdown for upsell products. |
Product Settings
Product Settings
CSS Selector | Description |
| Container for all products in the cart. |
| Wrapper for an individual product item. |
| Name of the product in the cart. |
| Link that wraps the product title. |
| Row that contains pricing information. |
| Final price shown to the customer. |
| Original (strikethrough) price. |
| Specific savings for a cart item. |
| Container for product options like size or color. |
| Label for the product option category. |
| Value of the selected product option. |
| Wrapper for additional product metadata. |
| Individual product property. |
| Displays subscription details for the item. |
| Quantity input field for the product. |
| Button to decrease quantity. |
| Button to increase quantity. |
| Wrapper around the product image. |
| Container for any quantity limit message. |
| Text for quantity warning shown to the user. |
Footer Settings
Add-ons Module
Add-ons Module
CSS Selector | Description |
| Main container for the add-ons section. |
| Title of the add-ons section. |
| Description of the add-on product. |
| Price of the add-on product. |
| Original (strikethrough) price of the add-on. |
| Toggle switch to add/remove an add-on. |
| Wrapper for the add-on image. |
Discount Codes Module
Discount Codes Module
CSS Selector | Description |
| Container row for the discount code section. |
| Wrapper around all discount code elements. |
| Button to apply a discount code. |
| Input field where the discount code is entered. |
| Container that wraps the input field. |
| Label showing an applied discount. |
| Icon next to the discount code input or message. |
| Additional text related to discount codes. |
Express Payments Module
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.
CSS Selector | Description |
| Container for all express pay buttons. |
| Row layout for express pay buttons. |
| General selector for an express payment button. |
| Specific button for Shop Pay. |
| Specific button for Google Pay. |
| Specific button for PayPal. |
| Specific button for Apple Pay. |
| Specific button for Amazon Pay. |
| Specific button for Meta Pay. |
Trust Badges Module
Trust Badges Module
CSS Selector | Description |
| Container for the trust badges. |
| Image element used in a trust badge. |
Additional Notes Module
Additional Notes Module
CSS Selector | Description |
| Container for the additional notes. |
| Title container of the notes section |
| Title for the dropdown of the notes section |
| Input area for adding a custom note to the cart. |
UpCart Settings Module
Skeleton Selectors
Skeleton Selectors
CSS Selector | Description |
| General skeleton loader wrapper for the cart. |
| Placeholder while a product loads. |
| Placeholder for a product image. |
| Placeholder for product title text. |
| Placeholder for pricing area. |
| Placeholder for quantity controls. |
| Placeholder for item options. |
| Skeleton for the upsells module. |
| Skeleton for upsell section title. |
| Skeleton for upsell product image. |
| Skeleton for upsell product title. |
| Skeleton for upsell product price. |
| Skeleton for upsell action button. |
| Skeleton for trust badge container. |
| Skeleton for trust badge image. |
| Skeleton placeholder for announcements. |
| Skeleton for the rewards section. |
| Skeleton for reward messages. |
| Skeleton for reward progress bar. |
| Skeleton for the add-ons section. |
| Skeleton for add-on product image. |
| Skeleton for text content in add-ons. |
| Skeleton for discount code module. |
| Skeleton for discount code input. |
| Skeleton for discount code apply button. |
| Skeleton for checkout button wrapper. |
| Skeleton for checkout button. |
| Skeleton for express payment container. |
| Skeleton for individual express payment button. |
Zapiet Integration
Zapiet Integration
CSS Selector | Description |
| Section for displaying Zapiet pickup information. |
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.