Cart: Custom shopping bag cart icon in top-bar

In this tutorial, we will add a shopping bag icon in the top bar area replacing the account login icon:

With item in cart:

Mobile:

Mobile with items:

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:

Next, open the Code Editor:

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

1

Add SVG to your Assets folder

Download the following shopping bag cart icon and add to your assets folder.

https://www.dropbox.com/s/m32dodbm4vlm4vu/bag-cart-black.svg?dl=0

Use the download feature in Dropbox or right-click over the image to save it to your computer:

Open your Code Editor. If Pipeline is published, use this link:

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

In the Assets folder, choose Add a new asset:

(1) Use the Choose File option, find the saved .SVG file on your computer and (2) Upload asset to complete:

2

Modify the header.liquid file

Open the sections/header.liquid file. If Pipeline is published, use this link:

https://shopify.com/admin/themes/current?key=sections/header.liquid

Replace the following line (usually line number 9):

Replace with:

<a href="/cart" class="CartToggle header-cart">
<img class="bag-cart"src="{{ 'bag-cart-black.svg' | asset_url }}"/>
<span class="header-cart__bubble cartCount {% if cart.item_count < 1 %} hidden-count {% endif %}"><span class="bubble-mobile">{{ cart.item_count }}</span></span></a>

Example:

Be sure the new lines of code live within the original <div class="header-account-link"> and </div> section. 

Save the file.

3

Add styles

/* -- code to move custom cart into top-bar area -- */
.bag-cart {
    margin-top: -10px;
}

.header-cart__wrapper {
    display: none;
}

.header-cart__bubble.cartCount {
    font-family: Arial, Baskerville, monospace;
    padding: 1px 5px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.9em;  
    border-radius: 6px;
    width: 6px;
    height: 6px;
    position: relative;
    top: -1.5rem;
    left: -0.5rem;
    z-index: 9999;
    background: #6bf;
}

a.header-cart:hover, a.header-cart:focus {
  text-decoration:none;
}

.cart-text-link {
    display: none !important;
}
/* - end - */

To change the background color of the bubble, use any valid hex color code:

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

Where to add styles code: 

Open your Code Editor. 

From your list of themes, find the Actions link for the theme you'd like to edit. Then select Edit code. Example draft theme:

Example if you're working from your main live/published theme:

Quick link if the theme is live/published:
Open Code Editor

Next, in the Code Editor find your theme's CSS file, this will vary depending on which version of Pipeline you're running:
Which version of Pipeline am I using?

Once you know your version, find the right file in the left Assets folder:

Pipeline 4 - If you're working with a draft theme, open this file:

You'll be opening this file:

assets/theme.scss.liquid

Quick link if the theme is live/published:
assets/theme.scss.liquid

Earlier versions of Pipeline - If your theme is older than Pipeline 4 open this file for draft themes:

You'll be opening this file for earlier versions of Pipeline:

assets/style.scss.liquid

Quick link if the theme is live/published and an earlier version of Pipeline:
assets/style.scss.liquid

Add the code to the very bottom of the file on a new line. Make a couple blank lines before pasting the code snippet. 

Save the file after adding your code.


Notes

Keep in mind that the Show account link in header checkbox must be checked for the cart to appear. This setting is found in the Header section settings in the Theme Editor. 


Option to move to the right

Placing the cart on the right side next to the search bar is not as clean but can be done with these changes. Add this additional style code after you've done all of the above.

/* -- code to move custom sshopping bag cart icon to right side -- */
.header-search__wrapper{ right: 40px + ($gutter / 2) !important; 
  @include at-query ($min, $small) { right: 40px + $gutter !important; } 
} 
.header-account-link{ float: right; }
.bag-cart {
    margin-top: -12px;
}
/* - end - */

Result:

When items added to cart:

If you look carefully, the search position changes when an item is added. You also lose space for your announcement bar message when you move the cart icon to the right. I've included the code if you want the option. My recommendation is to keep the shopping bag cart on the left. 

Still need help? Contact Us Contact Us