Skip to main content

How to Find the Cart Drawer Class in Shopify

Shopify themes vary in design, so the cart drawer structure may differ across themes. This guide will help you identify the class or ID of the cart drawer using your browser's developer tools.

Steps to Locate the Cart Drawer Class or ID​

  1. Click on the Cart Icon
    VenCorner - Cart Drawer
  2. Inspect the Cart Drawer
    • Right-click on the cart drawer and select "Inspect" from the menu.
      VenCorner - Cart Drawer

Once inspected, you will find the cart drawer class as cart-drawer. Alternatively, you may see an ID CartDrawer or the tag name cart-drawer.

Use these selectors accordingly:

  • For class: .cart-drawer
  • For ID: #CartDrawer
  • For tag name: cart-drawer

Understanding Target Position​

The target position determines where the Free Shipping Block appears in the Cart Drawer. Shopify provides four placement options:

  • beforebegin – Inserts the element outside and before the target element.
  • afterbegin – Inserts the element inside the target element, before its first child.
  • beforeend – Inserts the element inside the target element, after its last child.
  • afterend – Inserts the element outside and after the target element.

VenCorner - Target Position

Example of Target Position Usage​

Here’s how different target positions affect the display of the Free Shipping Block in the cart drawer:

VenCorner - Target Position

We hope this tutorial is helpful! If you have any questions, feel free to contact us at [email protected] or reach out via live chat support. We're happy to assist you! 🚀