Upcart CSS Selector Library (V2)

This article outlines the CSS selectors available in Upcart Version 2, designed to support custom styling for the updated cart drawer and module structure.

⚠️ 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.

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.).

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 styling
• Internal 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

CSS Selector	Description
.upcart-public-skeleton	General skeleton loader wrapper for the cart.
.upcart-public-component__button	General button component used across modules.
.upcart-public-component-loader	Loading spinner component.
.upcart-public-component-tag	Tag component wrapper.
.upcart-public-component-tag__icon	Icon inside a tag.
.upcart-public-component-tag__text	Text content of a tag.
.upcart-public-component-collapse__dropdown-container	Container for collapsible dropdown sections.
.upcart-public-component-collapse__expand-icon	Icon that indicates expand/collapse state.

Header module

CSS Selector	Description
.upcart-public-header	Main container for the cart header.
.upcart-public-header__close-button	Button used to close the cart drawer.
.upcart-public-header__close-button-icon	Icon displayed inside the close button.

Announcements module

CSS Selector	Description
.upcart-public-announcement	Banner or announcement section within the cart.

Recommendation and Upsell modules

CSS Selector	Description
.upcart-public-component-upsell-tile	Card layout for each upsell/recommendation product.
.upcart-public-component-upsell-tile__image-container	Container for the upsell product image.
.upcart-public-component-upsell-tile__image	Image of the upsell product.
.upcart-public-component-upsell-tile__info	Information section of the upsell tile.
.upcart-public-component-upsell-tile__title-link	Link wrapper for the product title.
.upcart-public-component-upsell-tile__title	Title of the upsell product.
.upcart-public-component-upsell-tile__rating-row	Row containing product ratings.
.upcart-public-component-upsell-tile__stars	Star rating display.
.upcart-public-component-upsell-tile__star--partial	Partial star for fractional ratings.
.upcart-public-component-upsell-tile__reviews	Review count display.
.upcart-public-component-upsell-tile__price-row	Row containing price information.
.upcart-public-component-upsell-tile__price-compare-at	Original (strikethrough) price for the upsell.
.upcart-public-component-upsell-tile__price	Current price of the upsell item.
.upcart-public-component-upsell-tile__variant-row	Row containing variant selection.
.upcart-public-upsell__skeleton	Skeleton placeholder for upsell module.
.upcart-public-upsell__skeleton-title	Skeleton for upsell section title.
.upcart-public-upsell__skeleton-image	Skeleton for upsell product image.
.upcart-public-upsell__skeleton-product-title	Skeleton for upsell product title.
.upcart-public-upsell__skeleton-product-price	Skeleton for upsell product price.

Notes module

CSS Selector	Description
.upcart-public-notes	Main container for the notes section.
.upcart-public-notes__text-container	Container for the notes text area.
.upcart-public-notes__textarea	Text input area for adding a custom note to the cart.

Discount code module

CSS Selector	Description
.upcart-public-discount-code	Main container for the discount code section.
.upcart-public-discount-code__form	Form wrapper for discount code input.
.upcart-public-discount-code__input-wrapper	Wrapper for the discount code input field.
.upcart-public-discount-code__input	Input field for entering discount codes.
.upcart-public-discount-code__suffix	Suffix element for the input field.
.upcart-public-discount-code__error	Error message display for invalid codes.
.upcart-public-discount-code__button	Button to apply discount code.
.upcart-public-discount-code__skeleton	Skeleton placeholder for discount code module.
.upcart-public-discount-code__skeleton-input	Skeleton for discount code input field.
.upcart-public-discount-code__skeleton-button	Skeleton for discount code apply button.

Trust badges module

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

Tiered rewards module

CSS Selector	Description
.upcart-public-rewards	Main container for the rewards section.
.upcart-public-rewards__message	Displays progress messages related to rewards.
.upcart-public-rewards__bar	Container for the rewards progress bar.
.upcart-public-component-segmented-progress-bar	Segmented progress bar component.
.upcart-public-component-segmented-progress-bar__segments-container	Container for all progress bar segments.
.upcart-public-component-segmented-progress-bar__segment	Individual segment of the progress bar.
.upcart-public-component-segmented-progress-bar__segment-fill	Fill portion of a progress bar segment.
.upcart-public-component-segmented-progress-bar__segment-label	Label for a progress bar segment.
.upcart-public-component-segmented-progress-bar__milestone	Milestone marker on the progress bar.
.upcart-public-component-segmented-progress-bar__milestone--bottom	Milestone positioned at the bottom.
.upcart-public-component-segmented-progress-bar__milestone--top	Milestone positioned at the top.
.upcart-public-component-segmented-progress-bar__milestone--middle	Milestone positioned in the middle.
.upcart-public-component-segmented-progress-bar__milestone-icon	Icon displayed at a milestone.
.upcart-public-component-segmented-progress-bar__milestone-label	Label text for a milestone.
.upcart-public-component-segmented-progress-bar__milestone-label--align-right	Right-aligned milestone label.
.upcart-public-component-segmented-progress-bar__milestone-label--align-center	Center-aligned milestone label.
.upcart-public-rewards__skeleton	Skeleton container for the rewards section.
.upcart-public-rewards__skeleton-message	Skeleton for the rewards progress message.
.upcart-public-rewards__skeleton-bar	Skeleton for the rewards progress bar.

Cart items module

CSS Selector	Description
.upcart-public-component-product-tile	Wrapper for an individual product item in the cart.
.upcart-public-component-product-tile__content	Content area of the product tile.
.upcart-public-component-product-tile__image-wrapper	Wrapper around the product image.
.upcart-public-component-product-tile__image	Image of the product in the cart.
.upcart-public-component-product-tile__info	Information section of the product tile.
.upcart-public-component-product-tile__header	Header section of the product tile.
.upcart-public-component-product-tile__product-title	Name of the product in the cart.
.upcart-public-component-product-tile__title-link	Link that wraps the product title.
.upcart-public-component-product-tile__remove-button	Button to remove the product from cart.
.upcart-public-component-product-tile__variant	Variant information display.
.upcart-public-component-product-tile__properties	Wrapper for additional product metadata.
.upcart-public-component-product-tile__bundle	Bundle information section.
.upcart-public-component-product-tile__product-pricing	Pricing section of the product tile.
.upcart-public-component-product-tile__price-compare-at	Original (strikethrough) price.
.upcart-public-component-product-tile__price	Final price shown to the customer.
.upcart-public-component-product-tile__savings	Specific savings for a cart item.
.upcart-public-component-product-tile__controls	Controls section (quantity, etc.).
.upcart-public-component-product-tile__quantity-selector	Quantity selector wrapper.
.upcart-public-component-product-tile__quantity-minus	Button to decrease quantity.
.upcart-public-component-product-tile__quantity-plus	Button to increase quantity.
.upcart-public-component-product-tile__discount-codes	Discount codes applied to the item.
.upcart-public-component-product-tile__subscription-upgrade	Subscription upgrade section.
.upcart-public-component-product-tile__select-wrapper	Wrapper for select dropdown.
.upcart-public-component-product-tile__select	Select dropdown element.
.upcart-public-product-properties__subscription	Displays subscription details for the item.
.upcart-public-product-properties__item	Individual product property.
.upcart-public-product-properties__link	Link within product properties.
.upcart-public-cart-items__key-value-pair	Key-value pair display for item properties.
.upcart-public-bundle-properties	Container for bundle properties.
.upcart-public-bundle-properties__variant-title	Variant title for bundle items.
.upcart-public-bundle-properties__header	Header for bundle properties section.
.upcart-public-bundle-properties__item-components	Container for bundle item components.
.upcart-public-bundle-properties__item-component-row	Row for each bundle item component.
.upcart-public-bundle-properties__image-wrapper	Wrapper for bundle item image.
.upcart-public-bundle-properties__content	Content area for bundle item.
.upcart-public-bundle-properties__product-title	Product title for bundle item.

Add-ons module

CSS Selector	Description
.upcart-public-addons	Main container for the add-ons section.
.upcart-public-addons__image-wrapper	Wrapper for the add-on image.
.upcart-public-addons__content-wrapper	Content wrapper for add-on information.
.upcart-public-addons__content-title-wrapper	Wrapper for add-on title.
.upcart-public-addons__content-title	Title of the add-on product.
.upcart-public-addons__content-price	Price section for add-on.
.upcart-public-addons__compare-at-price	Original (strikethrough) price of the add-on.
.upcart-public-addons__price	Current price of the add-on product.
.upcart-public-addons__content-description	Description of the add-on product.
.upcart-public-addons__toggle-wrapper	Wrapper for the add-on toggle.
.upcart-public-addons__toggle	Toggle switch to add/remove an add-on.
.upcart-public-addons__toggle-switch	Switch element of the toggle.
.upcart-public-addons__toggle-slider	Slider element of the toggle.
.upcart-public-addons__skeleton	Skeleton placeholder for add-ons section.
.upcart-public-addons__skeleton-image	Skeleton for add-on product image.
.upcart-public-addons__skeleton-text	Skeleton for text content in add-ons.

Cart summary module

CSS Selector	Description
.upcart-public-cart-summary	Main container for the cart summary.
.upcart-public-cart-summary__discount-codes	Container for discount codes in summary.
.upcart-public-cart-summary__discount-label	Label for discount section.
.upcart-public-cart-summary__slide-codes	Sliding container for discount codes.
.upcart-public-cart-summary__total-discount	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.