📝 Note V1 selectors target the legacy cart drawer modules. If you have upgraded to V2, these selectors will not match. See the V2 CSS Selector Library for current selectors.

​

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 Experts

​

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

​

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.