How to find specific CSS classes in my online store?

Topic summary

A user requests help identifying specific CSS classes for various cart elements in their Shopify store, including cart subtotal, form outer, line items, product pricing, and volume messaging for upsells.

Provided Solutions:

A responder investigates and provides CSS selectors for most requested elements:

  • Cart subtotal: .cart.form .cart__summary p
  • Cart form outer: .cart.form.cart--with-items
  • Cart line rows: Separate selectors provided for cart drawer (.cart-drawer__content #cart-items tr.cart-item) and cart page (.cart.form #cart-items tr.cart-item)
  • Product line total & summary display: Different selectors given for drawer vs. page contexts

Limitations:

  • Unit price element cannot be targeted deeply enough with CSS alone; recommendation is to edit the Liquid template file and add a custom class wrapper
  • Volume message element for upsells could not be located; responder requests clarification

Screenshots accompany each solution. The responder acknowledges potential errors and offers continued support.

Status: A third user enters requesting similar help for collection banner CSS in Dawn template, indicating ongoing discussion.

Summarized with AI on October 30. AI used: claude-sonnet-4-5-20250929.

Can you tell me the following CLASSE from my store, please? :

  • Cart subtotal class

  • Cart form outer class

  • Cart line row outer in class for cart drawer and cart page

  • Cart product unit price class

  • Cart product line total class

  • Cart display the summery on line item

  • Display volume message on cart line item for the upsell

Website : Créateur cadeaux & accessoires | Draeger Paris

Thank you

Thank you in advance

Hi @stg_herve ,

After a while of investigation, I can make a preliminary conclusion about the classes of the elements you mentioned (in the form of CSS selector) as follows:

- Cart subtotal class:

.cart.form .cart__summary p

- Cart form outer class:

.cart.form.cart--with-items

- Cart line row outer in class for cart drawer and cart page:

  • Cart drawer:
.cart-drawer__content #cart-items tr.cart-item

  • Cart page:
.cart.form #cart-items tr.cart-item

  • Cart product unit price class: In my opinion, the CSS selector cannot go deep enough into the unit price element. If you want to change the CSS of this element, you can go to the liquid file, wrap a separate class into this unit price element, and Edit css based on the newly added class

- Cart product line total class:

  • Cart drawer:
.cart-drawer__content #cart-items .cart-item__total.price .price__current 

  • Cart page :
.cart.form #cart-items .cart-item__total.price .price__current 

- Cart displays the summery on line item:

  • Cart drawer:
.cart-drawer__content #cart-drawer-form tr.cart-item .cart-item__details

  • Cart page :
.cart.form #cart-items tr.cart-item .cart-item__details

  • Display volume message on cart line item for the upsell:

I don’t see the volume message for the upsell element as you mentioned. I don’t know if I’m misunderstanding what you mean. If you don’t mind, please clarify or circle for me the element you want to specify.

The above is the result after I surveyed your storefront, it will inevitably contain errors and omissions. So if you encounter any problems, you can continue to communicate with me so I can continue to improve my answers.

Good luck @stg_herve !

hi bss, can you please identify for me the CSS CLASS NAME for the COLLECTION BANNER in Shopufy Dawn Template on the Product Page