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

    • [Version 2] How to set up Sticky Button & Cart Drawer?

      SLIDE CART SETTINGS 1. Visibility Enable "Slide Cart" on desktop: Tick on this option to show the Slide Cart on desktop version. Enable "Slide Cart" on mobile: Tick on this option to show the Slide Cart on mobile version. Auto open "Slide Cart" when ...

    • 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 ...

    • Sticky Cart Version 1.0 vs Version 2.0 - What Makes Version 2.0 Different?

      What’s new in Sticky Cart 2.0? New Interface Be designed based on the Shopify Interface that helps to create a consistent user experience for merchants Up to 15 new features Updated more advanced features to help sellers create high converting stores ...

    • [Version 2] How to set up Sticky Add to cart?

      GENERAL SETTINGS Only show sticky add to cart when "Add to cart" button disappear: Enable this option so that the Sticky Add to cart only displays whenever the Add-to-cart button of your theme disappear. Only show sticky add to cart when user scroll ...