Integrate with theme's Cart using CSS selector

Integrate with theme's Cart using CSS selector


Usually, "Add to cart" button on Quick View is separate with your theme's cart.
To integrate with your cart, you need to find the CSS selector of your cart and paste to Quick View > Customize > Extras. Then it'll be possible to update the cart count of your theme when customer clicks on "Add to cart" on Quick view popup.



Cart Count is the number showing up above cart icon to show the number of items in cart.




Watch this tutorial video or Follow the steps below to find the CSS selector of your cart:




Step 1: Make the cart count appear

When there's no item in cart, your cart can show "0" number or show nothing.


First, you need to go to a product page → add product to cart → the cart count number will appear.




Step 2: Find CSS selector of the Cart Count

  1. Right click on THE NUMBER of the cart count → Inspect. 


  1. The developer tool will appear and auto detect the HTML tags of your cart count (usually starting with <span>)


  1. Right click on the <span>  (or what highlighted) → Copy → Copy selector


You've successfully copied the CSS selector of your cart count.


Step 3: Paste to Quick View

  1. Head back to Quick View → Customize → Extras → paste to CSS Selector of your cart

Save. Done! You've successfully integrate Quick View with your default Cart.

    • Related Articles

    • How to find the CSS selector of your theme's cart icon? (Sticky Cart version 2)

      This option is only available in Sticky Cart version 2 To integrate the cart drawer of Sticky Cart app with your theme's cart icon, you need to add the CSS selector of your theme's cart icon into our app settings. Here are the steps to find the CSS ...

    • Cart Countdown

      Note: Cart Countdown only works with themes which have AJAX cart (stay on current page after adding to cart). This app does not work if theme automatically redirects to cart page after adding products to cart. 1. Countdown settings Countdown Time To ...

    • Custom Cart

      Normally, Shopify does not allow users to change the product quantity and variant when they're on the Checkout page. So customers have to turn back to the Cart page just to adjust it, which wastes too much time and may cause them to feel too ...

    • How to set up Sticky Button & Cart Drawer? (version2)

      SLIDE CART SETTINGS Show option value of variant: Show short form of product variant. For example: blue/small. Show custom properties: Recommend to enable this option if you're selling product with extra options. Enable note box: Display note box on ...

    • Sticky Cart Button

      Enable on desktop: allow your sticky button to appear on desktop version.  Enable on mobile: allow your sticky button to appear on mobile version. "Enable on mobile"  works on screen width that is below 992 pixels SETTINGS  Button action Set the ...