How to add a cart bubble to your navigation

This customization will add a cart icon with cart bubble to your desktop navigation plus a number of cart items value in the bubble for both desktop and mobile.

Result - Desktop:

Result - Mobile:

How to:

Step 1

Copy all of the code in from this file (open link to view code):

https://gist.githubusercontent.com/whistlerbrad/e1c15702e2685dee6b913ef9aed2e1ab/raw/1a3fedc0dd726837e1850487c12907f67c69ded2/nav-contents-liquid-custom-bubble-icon.liquid

and replace all the code in your nav-contents.liquid file:

https://myshopify.com/admin/themes/current/?key=snippets/nav-contents.liquid

Step 2

Copy all of the code in from this file (open link to view code):

https://gist.githubusercontent.com/whistlerbrad/9b7613fdb321e5c8f888448e2728ecbf/raw/b775e018bf3a3bd4dc5b5c4539073f933571d7ef/ajaxify.js-bubble.liquid

and replace all the code in your ajaxify.js.liquid file (Pipeline 2x and higher only):

https://myshopify.com/admin/themes/current?key=assets/ajaxify.js.liquid

Step 3

Add bubble style to your style.scss.liquid file:
Add a couple blank lines at the bottom of this file and paste the following code:

https://myshopify.com/admin/themes/current?key=assets/style.scss.liquid&line=9999

/* -- code for custom cart bubble -- */
.add-to-cart__wrapper .btn--clear { 
  background-color: #111;
  border-color: #111; 
  color: #ffffff; 
  font-weight:700;
}

.bubble {
	background: #100f0f;
    border-radius: 9px 9px;
    font-family: Arial, Baskerville, monospace;
    padding: 1px 4px;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    left: -0.75rem;
    top: -0.75rem;
  	font-size:0.9em;
}


.bubble-mobile {
    background: #100f0f;
    border-radius: 9px 9px;
    font-family: Arial, Baskerville, monospace;
    padding: 1px 5px;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    top: -0.5em;
    left: -0.25em;
    z-index: 9999;
    font-size: 0.9em;
}
/* - end - */

Notes:

background: # 100f0f; is the colour of bubble (black in this example). This can be any hex colour of your choice. More color options here:

http://www.colorhexa.com/web-safe-colors

Save your files and reload your site. That's it.  


Optional method - manual customization

If you already have a customized nav-contents.liquid file and don't want to replace the entire code as explained above, you can manually add this code:

https://myshopify.com/admin/themes/current/?key=snippets/nav-contents.liquid

Step 1

Replace this div (4 lines):

With:

  <div class="header-cart__wrapper">
    <a href="/cart" class="CartToggle header-cart">
    <span class="header-cart__bubble cartCount {% if cart.item_count < 1 %} hidden-count {% endif %}"><span class="bubble-mobile">{{ cart.item_count }}</span></span></a>
  </div>

Open this file (Pipeline 2.x and higher only):

https://myshopify.com/admin/themes/current?key=assets/ajaxify.js.liquid&line=377

Add this line of code:

      $cartCostSelector.find('span.bubble').html(cart.item_count);

Insert it like this:

Save the file.

Step 2

And at the bottom of the file, replace this list item (6 lines):

With:

    <li class="cart-text-link">
      <a href="/cart" class="CartToggle">
        <img style="width:20px;"src="{{ 'cart.svg' | asset_url }}"/>
        <span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}"><span class="bubble">{{ cart.item_count }}</span></span>
      </a>
    </li>

Undo - Removing the bubble cart

If you need to undo or remove this change, use the Older versions drop-down option and rollback to before you replaced the above code. 

Still need help? Contact Us Contact Us