Advanced: How to add a custom cart icon and bubble for your desktop and mobile navigation

In this article, we'll demonstrate how to add a custom image into Pipeline. We'll use a shopping cart icon in your navigation as an example. 

Result for desktop:

Option 1


Option 2

Before:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

How-to for Desktop:

Step 1

Upload a custom image to your Assets folder. Ideally you'll want to use a transparent .PNG or .SVG file. 

For this demonstration, I'm going to use the following .SVG cart icon. You can download this to your computer if you'd like to use the same image:

https://cdn.shopify.com/s/files/1/2018/8867/t/78/assets/shopping-bag.svg

Right-click on the image and use the Save As option to save to your deskotp:

Next, add the shopping-bag.svg file to your Assets folder:

https://shopify.com/admin/themes/current

In the left folders under Assets, choose Add a new asset:

Browse to the file on your computer and Upload asset:

Use the Upload asset button to complete. Once the code is displayed in the right code side, click inside the code area and press Command-S (Mac) or Control-S (Windows) to save the file. 

Step 2

Open the following file:

snippets/nav-contents.liquid

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows) search for the following code:

{{ 'layout.cart.title' | t }}

Replace that entire line with one of the options:

Option 1 - Shopping bag:

<img class="shopping-bag"src="{{ 'shopping-bag.svg' | asset_url }}"/>

Option 2 - Standard cart:

<img class="nav-cart"src="{{ 'cart.svg' | asset_url }}"/>

Example before:

Example after for Option 1:

Save the changes.

Step 3

Still in your Code Editor, open from the assets folder, style.scss.liquid. If you're using Pipeline 4 or higher, open theme.scss.liquid:

assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

Add the following code the very bottom of the file on a new line:

/* -- code for desktop navigation cart -- */ 
img.nav-cart {width:20px; position:relative; top: 4px;}
img.shopping-bag{width:14px; position:relative; top:2px;}
/* - end - */

Save the changes.

Notes:

This is where you can tweak or adjust the position of your cart image. If you need to line-up slightly differently, adjust the top value to less or more.


Advanced step: Add a bubble to cart icon

To add a cart bubble to your custom cart icon, you can follow these steps. Be sure you've made a duplicate of your theme before continuing - Very important.

Result with Option 1:

Result with Option 2:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Step 1

Open snippets/nav-contents

snippets/nav-contents.liquid

Find the line right after your custom cart image:

That line of code looks like this:

<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}">(<span class="money">{{ cart.total_price | money }}</span>)</span>

Replace that entire line of code with the following:

<span class="cartCost {% if cart.item_count < 1 %} hidden-count {% endif %}"><span class="desktop-bubble">{{ cart.item_count }}</span></span>

Example after with shopping bag cart:

Save the changes.

Step 2

Open assets/ ajaxify.js.liquid. Use this link if Pipeline is published (version 2.x and higher only):

assets/ajaxify.js.liquid

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows), search for:

$cartCostSelector.find('span.money')

Once you've found the right line:

Add this line of code below that line:

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

Insert it like this:

Save the file.

Step 3

Add the following style code to the very bottom of this file starting with a new line:

assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

Use this code for:

/* -- code for custom cart desktop bubble 1/2 -- */
.desktop-bubble {
    background: $colorPrimary;
    border-radius: 9px 9px;
    font-family: Arial, Baskerville, monospace;
    padding: 1px 4px;
    color: #ffffff;
    font-weight: 600;
    position: relative;
    font-size:0.9em;
    left: -10px;
    top: -9px;
}
/* - end - */

Save your changes.


Advanced step: Add the custom cart icon to your mobile navigation

Adding the same icon to your mobile navigation is done differently. You'll be adding code to allow the bubble indicator for mobile and changing the background image in your style.scss.liquid file.

Mobile Option 1:

Mobile Option 2:

How to:

Always make a duplicate of your theme before adding any code. This will save you if anything goes wrong or if you decide not to use the added code in the future. We can not support or be responsible of any code changes that you make to your theme. For that reason, save yourself and make a duplicate first.

Make a duplicate before any code changes:

Step 1

In this file:

snippets/nav-contents.liquid

Replace the first 5 lines of code:

Old code:

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

With this new code:

<div class="mobile-wrapper">
  <div class="header-cart__wrapper">
    <a href="/cart" class="CartToggle header-cart">
    <span class="header-cart__bubble cartCount"><span class="bubble-mobile">{{ cart.item_count }}</span></span></a>
  </div>

Example after:

Step 2

Add the following code from one of the options to the very bottom of this file starting with a new line:

assets/style.scss.liquid

Pipeline 4 or higher, use this link instead:

assets/theme.scss.liquid

Use this code for Option 1 shopping bag cart icon for mobile:

/* -- code to style shopping bag cart icon for mobile -- */

a.header-cart, a.header-cart:hover, a.header-cart:focus {
  text-decoration:none;
}
/* -- mobile cart image -- */
.nav--mobile .header-cart {
  left: 0;
  background: url(//cdn.shopify.com/s/files/1/2018/8867/t/78/assets/shopping-bag.svg) no-repeat left 0 center;
}

.header-cart__bubble.cartCount 
{
  background: $colorPrimary;
  border-radius: 9px 9px;
  font-family: Arial, Baskerville, monospace;
  padding: 1px 5px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 9999;
  font-size: 0.9em;
  left: 15px;
  top: -5px;
}
/* - end - */

Use this code fro Option 2 standard cart icon for mobile:

/* -- code to style standard cart icon for mobile -- */
a.header-cart, a.header-cart:hover, a.header-cart:focus {
  text-decoration:none;
}
.header-cart__bubble.cartCount 
{
  background: $colorPrimary;
  border-radius: 9px 9px;
  font-family: Arial, Baskerville, monospace;
  padding: 1px 5px;
  color: #ffffff;
  font-weight: 600;
  position: relative;
  z-index: 9999;
  font-size: 0.9em;
  left: 15px;
  top: -10px;
}
/* - end - */

Save the file.

Step 3

Always show the cart bubble on mobile. This is important to maintain the position of our logo image.

Open assets/ajaxify.js.liquid

assets/ajaxify.js.liquid

In the code area, use the Find feature (Command-F on Mac, Control-F in Windows), search for:

if (cart.item_count === 0) {

Example:

We are going to comment out 2 lines:

By adding the double backslashes "//" in front of the line, the code won't be executed. 

Save the changes.

This will always show the cart bubble which is important so that the logo is consistent in the right position:


When using your own custom cart image

In the last section background: url(//cdn.shopify.com/s/files/1/2018/8867/t/12/assets/cart-icon-pipeline.svg), use the address of your cart image that you uploaded. The code in this example is the same cart image from the desktop cart.

To get the URL of your image, search for it in your Assets folder (in the Code Editor):

When you find the image, select it. On the right-pane Right-Click on the image and choose "Copy Image Address" or similar (depending on your browser, I'm using Chrome here):

When you do this, you'll have a long URL like this:

https://cdn.shopify.com/s/files/1/2018/8867/t/12/assets/cart-icon-pipeline.svg?9758318710259430245

You can remove the starting "https:" and the trailing number starting with "?9758318710259430245"

Turn it to:

//cdn.shopify.com/s/files/1/2018/8867/t/12/assets/cart-icon-pipeline.svg

For background-size, this is optional but might be required if you're using a different cart icon than the example one. You can set the size of the image here (width, height):

background-size: 25px 25px;

Need help with code changes?

We're not able to make any code customizations but we can recommend shophelper.io and heycarson -- they both specialize in small code changes and have really competitive flat-rate pricing. 

Still need help? Contact Us Contact Us