How to find your theme's cart icon CSS selector

Mini Cart's Dropdown cart attaches to your theme's cart icon. Most themes are detected automatically. If yours isn't, tell Mini Cart which element is the cart icon by giving it a CSS selector. It takes about two minutes.

Not sure you need this? If Mini Cart couldn't find your cart icon, it still works: the cart opens as a sidebar from the sticky button. You only need a selector if you want the Dropdown layout. You can also choose the Sidebar layout in the app settings and skip this page.

Step 1: Inspect the cart icon

Open your online store in a desktop browser (Chrome, Edge, Firefox or Safari).
Disable Theme Inspector if it's still enabled. It can intercept the right-click so the browser's Inspect option never reaches the cart icon.
Right-click on the cart icon in your header and choose Inspect (Safari: enable the Develop menu first, then Inspect Element).
The browser's developer tools open with that element highlighted. Look for the closest element around the icon that is clickable. It is usually an <a> link or a <button>. If you highlighted an inner <svg> or <span>, move up one or two lines to the link or button around it.

Step 2: Turn it into a selector

Read the highlighted line, for example <a href="/cart" id="cart-icon-bubble" class="header__icon">, and pick the simplest option that identifies only the cart icon:

If the element has	Write	Example
an id	`#` + the id	`#cart-icon-bubble`
a class	`.` + the class	`.header-actions__cart-icon`
several classes	join them with no spaces	`.header__icon.header__icon--cart`
an attribute	`tag[attribute="value"]`	`button[aria-label="Cart"]`

Prefer an id. Avoid classes that look generated (random letters and numbers), because they can change when your theme updates.

Step 3: Check that it matches

In the same developer tools, open the Console tab, paste the line below with your selector, and press Enter:

document.querySelectorAll('#cart-icon-bubble').length

1: perfect, that is your selector.
0: nothing matches. Re-check the spelling, the # or ., and that you copied the id or class exactly.
2 or more: it matches other elements too (for example a mobile and a desktop icon). Make it more specific, for example header #cart-icon-bubble.

Step 4: Enter it in Mini Cart

In the theme editor (recommended, you see the result right away):

In your Shopify admin, go to Online Store → Themes → Customize.
Open App embeds in the left sidebar and expand Minicart.
Paste your selector into Cart icon CSS selector and click Save.

Or in the app: open Mini Cart, go to General Setting, fill in CSS selector of your theme's cart icon and save. If both are filled in, the theme editor value is used.

Reload your store. Clicking the cart icon should now open the Mini Cart dropdown.

Still not working?

Make sure the Mini Cart app embed is switched on and the app is enabled in its settings.
Check that Cart Layout in the app is set to Dropdown Cart.
Some themes show a different cart icon on mobile and desktop. Use the one for the device you are testing, or the sticky cart button.
Theme updates can rename classes. Check the selector again after you update or change your theme.
If you get stuck, send us a support request from inside the Mini Cart app and include the line you copied in Step 1. We will help you find the selector.

Selectors for popular free themes

These themes from the Shopify theme store were checked, and Mini Cart finds their cart icon automatically. You only need the selector below if you changed the theme's header or something else is going wrong.

Theme	Cart icon selector
Dawn, Refresh, Craft, Sense, Studio, Taste, Ride, Colorblock, Crave, Origin, Spotlight, Trade	`#cart-icon-bubble`
Horizon, Fabric	`.header-actions__cart-icon` or `button[aria-label="Cart"]`

Checked on 2026-11-13. Themes change over time, so if one of these stops working, use the steps above to find the current selector.

Check our legacy tutorial here, about updating the cart counter in your theme.