Upcart CSS Selector Library (V1)

This article outlines the CSS selectors available in Upcart Version 1, allowing you to apply custom styling to the legacy cart drawer.

⚠️ Important notice

These selectors apply only to Version 1 (V1) of the Upcart cart modules. If you’ve upgraded to Version 2 (V2), these selectors will not work.

For V2 carts, please refer to the Version 2 CSS Selectors documentation, which includes the updated selectors designed specifically for the new module architecture.

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.

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

CSS Selector	Description
.upcart-cart	Main container for the cart drawer.
.upcart-cart-body	Holds the primary content of the cart.
.upcart-backdrop	The dark overlay that appears behind the cart.
.upcart-loading-bar-container	Displays a loading bar while the cart is loading.

Header Module

CSS Selector	Description
.upcart-header	Container for the cart header, including the logo and close button.
.upcart-header-close-button	Button used to close the cart drawer.
.upcart-header-close-button-icon	The icon displayed inside the close button.
.upcart-header-logo	Displays the logo image in the cart header.
.upcart-header-text	The title text displayed in the cart header.

Body Settings

Announcements Module

CSS Selector	Description
.upcart-announcement	Banner or announcement section within the cart.
.upcart-announcement-skeleton	Skeleton placeholder for the announcement section.

Rewards Module

CSS Selector	Description
.upcart-rewards	Main container for the rewards section.
.upcart-rewards-message	Displays progress messages related to rewards.
.upcart-rewards-bar-background	Background layer of the rewards progress bar.
.upcart-rewards-bar-foreground	Foreground/progress fill of the rewards bar.
.upcart-rewards-tier	Represents a specific tier in the rewards system.
.upcart-rewards-tier-circle	Visual circle indicator for a reward tier.
.upcart-rewards-tier-icon	Icon inside a reward tier circle.
.upcart-rewards-tier-description	Description text under each reward tier.
.upcart-rewards-skeleton	Skeleton container for the rewards section.
.upcart-rewards-message-skeleton	Skeleton for the rewards progress message.
.upcart-rewards-bar-skeleton	Skeleton for the rewards progress bar.

Recommendations Module

CSS Selector	Description
.upcart-recommendation-module	Wrapper for the entire product recommendation module.
.upcart-recommendations-title	Title text for the recommendations section.
.upcart-recommendations-shop-now-button	Button to shop a recommended product directly from the cart.

Subscription Upgrades Module

CSS Selector	Description
.upcart-subscription-upgrade-section	Section for promoting subscription upgrades in the cart.
.upcart-subscription-upgrade-button	Button used to trigger a subscription upgrade.
.upcart-subscription-upgrade-dropdown	Dropdown to select available subscription upgrade options.

Upsells Module

CSS Selector	Description
.upcart-upsells	Main container for the upsells section.
.upcart-upsells-module	Wrapper for the upsells module.
.upcart-upsells-title	Title of the upsells section.
.upcart-upsells-button	Button to add upsell items to cart.
.upcart-upsell-item-card	Card layout for each upsell product.
.upcart-upsell-item-title	Title of the upsell product.
.upcart-upsell-item-image-wrapper	Wrapper around the upsell product image.
.upcart-upsell-item-image	Image of the upsell product.
.upcart-upsell-item-price	Price of the upsell item.
.upcart-upsell-item-price-row	Row containing price and compare price.
.upcart-upsell-item-compare-price	Original price (strikethrough) for the upsell.
.upcart-upsell-item-variant-selector	Variant dropdown for upsell products.

Product Settings

CSS Selector	Description
.upcart-products-section	Container for all products in the cart.
.upcart-product-item	Wrapper for an individual product item.
.upcart-product-title	Name of the product in the cart.
.upcart-product-title-link	Link that wraps the product title.
.upcart-item-prices-row	Row that contains pricing information.
.upcart-item-price	Final price shown to the customer.
.upcart-item-compare-price	Original (strikethrough) price.
.upcart-product-savings	Specific savings for a cart item.
.upcart-item-option	Container for product options like size or color.
.upcart-item-option-category	Label for the product option category.
.upcart-item-option-value	Value of the selected product option.
.upcart-item-properties	Wrapper for additional product metadata.
.upcart-item-property	Individual product property.
.upcart-item-property-subscription	Displays subscription details for the item.
.upcart-product-quantity-input	Quantity input field for the product.
.upcart-product-quantity-minus	Button to decrease quantity.
.upcart-product-quantity-plus	Button to increase quantity.
.upcart-product-image-wrapper	Wrapper around the product image.
.upcart-quantity-warning	Container for any quantity limit message.
.upcart-quantity-warning-text	Text for quantity warning shown to the user.

Footer Settings

Add-ons Module

CSS Selector	Description
.upcart-addons	Main container for the add-ons section.
.upcart-addons-title	Title of the add-ons section.
.upcart-addons-product-description	Description of the add-on product.
.upcart-addons-price	Price of the add-on product.
.upcart-addons-compare-price	Original (strikethrough) price of the add-on.
.upcart-addons-toggle	Toggle switch to add/remove an add-on.
.upcart-addons-image-wrapper	Wrapper for the add-on image.

Discount Codes Module

Savings Row

CSS Selector	Description
.upcart-savings-row	Wrapper for the entire discount/savings section in the cart.
.styles_Footer__savingsCodes__	Container for the label (“Discounts”) and associated discount codes.
.upcart-discount-code-badge	Wrapper for each discount code badge shown in the UI.
.upcart-discount-code-icon	Container for the discount icon (e.g., SVG ticket symbol).
.upcart-discount-code-text	Textual representation of the discount code (e.g., “AUTO 5”).
.upcart-savings-amount	Displays the actual amount saved from discounts.

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
.upcart-express-pay-buttons-container	Container for all express pay buttons.
.upcart-express-pay-buttons-row	Row layout for express pay buttons.
.upcart-express-pay-button	General selector for an express payment button.
.upcart-express-pay-button-shop-pay	Specific button for Shop Pay.
.upcart-express-pay-button-google-pay	Specific button for Google Pay.
.upcart-express-pay-button-paypal	Specific button for PayPal.
.upcart-express-pay-button-apple-pay	Specific button for Apple Pay.
.upcart-express-pay-button-amazon-pay	Specific button for Amazon Pay.
.upcart-express-pay-button-meta-pay	Specific button for Meta Pay.

Trust Badges Module

CSS Selector	Description
.upcart-trust-badge	Container for the trust badges.
.upcart-trust-badge-image	Image element used in a trust badge.

Additional Notes Module

CSS Selector	Description
.NotesModule_NotesModule__	Container for the additional notes.
.NotesModule_NotesModule__titleContainer__	Title container of the notes section
.NotesModule_NotesModule__dropdownContainer__	Title for the dropdown of the notes section
.NotesModule_NotesModule__textModule__ textarea	Input area for adding a custom note to the cart.

Upcart Settings Module

Skeleton Selectors

CSS Selector	Description
.upcart-skeleton	General skeleton loader wrapper for the cart.
.upcart-product-item-skeleton	Placeholder while a product loads.
.upcart-product-image-skeleton	Placeholder for a product image.
.upcart-product-title-skeleton	Placeholder for product title text.
.upcart-product-price-container-skeleton	Placeholder for pricing area.
.upcart-product-quantity-skeleton	Placeholder for quantity controls.
.upcart-item-option-skeleton	Placeholder for item options.
.upcart-upsells-module-skeleton	Skeleton for the upsells module.
.upcart-upsells-title-skeleton	Skeleton for upsell section title.
.upcart-upsell-item-image-skeleton	Skeleton for upsell product image.
.upcart-upsell-item-title-skeleton	Skeleton for upsell product title.
.upcart-upsell-item-price-skeleton	Skeleton for upsell product price.
.upcart-upsells-button-skeleton	Skeleton for upsell action button.
.upcart-trust-badge-skeleton	Skeleton for trust badge container.
.upcart-trust-badge-image-skeleton	Skeleton for trust badge image.
.upcart-announcement-skeleton	Skeleton placeholder for announcements.
.upcart-rewards-skeleton	Skeleton for the rewards section.
.upcart-rewards-message-skeleton	Skeleton for reward messages.
.upcart-rewards-bar-skeleton	Skeleton for reward progress bar.
.upcart-addons-skeleton	Skeleton for the add-ons section.
.upcart-addons-image-wrapper-skeleton	Skeleton for add-on product image.
.upcart-addons-skeleton-text-container	Skeleton for text content in add-ons.
.upcart-discount-code-module-skeleton	Skeleton for discount code module.
.upcart-discount-code-input-skeleton	Skeleton for discount code input.
.upcart-discount-code-button-skeleton	Skeleton for discount code apply button.
.upcart-checkout-button-container-skeleton	Skeleton for checkout button wrapper.
.upcart-checkout-button-skeleton	Skeleton for checkout button.
.upcart-express-pay-buttons-container-skeleton	Skeleton for express payment container.
.upcart-express-pay-button-skeleton	Skeleton for individual express payment button.

Zapiet Integration

CSS Selector	Description
.upcart-integration-zapiet-pickup	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.