⚠️ 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, open the Cart Editor and look at the top of the left-hand menu. A Cart version dropdown appears there once every module in the cart is on V2; if you don’t see it, your cart still has V1 modules. 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, open the Cart Editor, go to Settings, select the Custom CSS tab, 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-tag__remove-button`	Remove (“x”) button inside a removable tag.
`.upcart-public-component-collapse__dropdown-container`	Container for collapsible dropdown sections.
`.upcart-public-component-collapse__expand-icon`	Icon that indicates expand/collapse state.
`.upcart-public-component-carousel__container`	Outer wrapper of a carousel.
`.upcart-public-component-carousel__window`	Clipping window the slides scroll inside.
`.upcart-public-component-carousel__track`	The moving track holding the slides.
`.upcart-public-component-carousel__slide`	A single carousel slide.
`.upcart-public-component-carousel__button`	Previous / next arrow button.
`.upcart-public-component-progress-bar`	Plain (unsegmented) progress bar component.
`.upcart-public-component-progress-bar__track`	Track of the plain progress bar.
`.upcart-public-component-progress-bar__fill`	Filled portion of the plain progress bar.
`.upcart-public-component-progress-bar__milestone`	Milestone marker on the plain progress bar.
`.upcart-public-component-progress-bar__milestone-icon`	Icon at a milestone on the plain progress bar.
`.upcart-public-component-progress-bar__milestone-label`	Label at a milestone on the plain progress bar.

Header module


CSS Selector	Description
`.upcart-public-header`	Main container for the cart header.
`.upcart-public-header__logo`	Logo image in 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.
`.upcart-public-announcement-skeleton`	Skeleton loader for announcement bar.

Recommendation and Upsell modules


CSS Selector	Description
`.upcart-public-upsell`	Main wrapper for the upsell module.
`.upcart-public-upsell__header`	Header of the upsell section.
`.upcart-public-upsell__title`	Title text of the upsell section.
`.upcart-public-upsell__shop-now-button`	Shop Now button on upsell items.
`.upcart-public-upsell__vertical-layout-wrapper`	Wrapper for vertical upsell layout.
`.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__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-cart-items`	Main wrapper for the cart items list.
`.upcart-public-cart-item`	Individual cart item wrapper.
`.upcart-public-cart-items-skeleton__content`	Skeleton loader for cart items.
`.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__price-group`	Wrapper around the price and compare-at price.
`.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__subscription-upgrade-btn`	Button that applies the subscription upgrade.
`.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.

Express payments module


CSS Selector	Description
`.upcart-public-express-payments__container`	Container for express payment buttons.

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.

Cart Features Reference

CSS Reference

Styling Recipes

Functionality Recipes

Custom Templates

Upcart Public API

Upcart CSS selector library (V2)

Overview

NOTE

How to Use Upcart CSS Selectors

What to Know Before Adding CSS

CSS Customization Checklist:

Important guidelines for V2 selectors

CSS Selectors

General Components

Header module

Announcements module

Recommendation and Upsell modules

Notes module

Discount code module

Trust badges module

Tiered rewards module

Cart items module

Add-ons module

Express payments module

Cart summary module

Helpful resources to get started:

​Overview

​NOTE

​

​How to Use Upcart CSS Selectors

​What to Know Before Adding CSS

​CSS Customization Checklist:

​Important guidelines for V2 selectors

​

​CSS Selectors

​General Components

​

​Header module

​Announcements module

​Recommendation and Upsell modules

​Notes module

​Discount code module

​Trust badges module

​Tiered rewards module

​Cart items module

​Add-ons module

​Express payments module

​Cart summary module

​Helpful resources to get started:

​

​

Overview

NOTE

How to Use Upcart CSS Selectors

What to Know Before Adding CSS

CSS Customization Checklist:

Important guidelines for V2 selectors

CSS Selectors

General Components

Header module

Announcements module

Recommendation and Upsell modules

Notes module

Discount code module

Trust badges module

Tiered rewards module

Cart items module

Add-ons module

Express payments module

Cart summary module

Helpful resources to get started: