Learn how to customize your Shopify store with a unique cart icon. This easy-to-follow tutorial shows you step-by-step how to replace the default cart icon with your own, giving your online shop a personalized touch.
Step 1: Update Code
Update code in icon-cart-empty.svg and icon-cart.svg.
We can leverage a reputable SVG icon library like svgrepo.com to find a suitable shopping cart icon. Once you’ve identified the desired icon, download it. Opening the downloaded file in a code editor will reveal the SVG code. You can then copy and paste this code into both icon-cart-empty.svg and icon-cart.svg files, replacing the existing code.
Step 2: Add CSS Class
Add custom CSS class custom-cart-icon to SVG code so the SVG Code should like following for both files:
<?xml version="1.0" encoding="utf-8"?>
<svg class="custom-cart-icon" fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" id="cart-alt-1" data-name="Flat Line" xmlns="http://www.w3.org/2000/svg" class="icon flat-line"><polygon id="secondary" points="21 6 18.2 13 10 13 7.2 6 21 6" style="fill: rgb(44, 169, 188); stroke-width: 2;"></polygon><path id="primary-upstroke" d="M11,20.5h.1m5.9,0h.1" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5;"></path><path id="primary" d="M3,3H5.32a1,1,0,0,1,.93.63L10,13,8.72,15.55A1,1,0,0,0,9.62,17H19" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></path><polyline id="primary-2" data-name="primary" points="7.2 6 20.8 6 21 6 18.2 13 10 13" style="fill: none; stroke: rgb(0, 0, 0); stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;"></polyline></svg>Step 3: Add CSS Code
Add the following code in base.css file:
.custom-cart-icon {
width: 4rem !important;
height: 4rem !important;
}Note: You can increase/decrease size of the cart icon by changing the value of rem in the code
