How to add a custom cart icon 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:

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://www.dropbox.com/s/0bxbprozqqga6d7/cart-icon-pipeline.svg?dl=0

Add to your Assets folder using your Theme Editor:

Browse to the file on your computer and Upload asset:

Step 2

Open the following file:

http://myshopify.com/admin/themes/current?key=snippets/nav-contents.liquid&line=50

On line 50 for Pipeline 2, and Pipeline 3. Or line 45 on Pipeline 1 (old code):

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

Replace with entire line with (new code):

<img style="width:20px;"src="{{ 'cart-icon-pipeline.svg' | asset_url }}"/>

Notes: 

  • In this example, I used cart-icon-pipeline.svg as the filename - This is referencing the file uploaded in Step 1 to the assets folder. If you used a different filename, then use the correct filename in that section. 
  • I've also added an inline style - style="width: 20px;" This can be a custom size depending on the image you use. You can adjust this size to match the style you'd like to present.
  • asset_url is the liquid code that's referencing your assets folder.

Step 3

Save your file and test to see that your cart image is loading on the desktop navigation. 

This is a good example of how to add an image that's been uploaded to your assets folder and then referencing that image in the theme. 


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

Result for Mobile:

Step 1

In this file:

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

Replace Line 4

Old code:

<span class="header-cart__bubble cartCount{% if cart.item_count < 1 %} hidden-count{% endif %}"></span>

With this new code:

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

Step 2

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

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

.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;
}


.nav--mobile .header-cart {
    left: 0;
    background: url(//cdn.shopify.com/s/files/1/2018/8867/t/12/assets/cart-icon-pipeline.svg) no-repeat left 0 center;
    background-size: 25px 25px;
}

Notes:

The first .bubble code in the css is optional, it's the same code used if you want a desktop bubble from a different article.

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;

Still need help? Contact Us Contact Us