Can you change the cart icon in Shopify using an image URL or CSS code?

chrisjames11
Excursionist
58 0 8

Hi 

 

Pls could u provide the solution to changing cart icon by using an image url or css code. (attached examples below)

 

Theme: warehouse

URL: tennisgiant.com 

 

Wanted result:

chrisjames11_0-1659738460967.png

 

 

 

current:

chrisjames11_1-1659738460778.png

 

 Cheers

Reply 1 (1)

oscprofessional
Shopify Partner
15830 2369 3071

@chrisjames11 
Hello,

 

<svg class="icon icon--cart" viewBox="0 0 21.5 30" role="presentation">
<style type="text/css">
 .st0{fill:#FFFFFF;}
</style>
<g transform="translate(0 1)" stroke-width="0" stroke="none" fill="currentColor" fill-rule="evenodd">
<path class="st0" d="M11.4,8.9c2,0,4.5,0,6.5,0c1,0,1.7-0.7,1.7-1.7c0-1.2,0-2.5,0-3.7c0-0.4-0.1-0.8-0.2-1.2C19,1,17.7,0,16.6,0
 c0,0.1,0,0.2,0,0.4c0,1.1,0,2.1,0,3.2c0,1.1-0.6,1.6-1.7,1.6c-1,0-2.5,0-3.5,0C11.4,5.2,11.4,8.2,11.4,8.9z"></path>
<path class="st0" d="M6.5,5.2C5.7,5.2,5.2,4.8,5.1,4C5,3.7,5,3.5,5,3.2C5,2.1,5,1.1,5,0C4.9,0,4.8,0,4.7,0C3.2,0.3,1.9,1.7,1.9,3.3
 c0,1.3,0,2.6,0,3.8c0,1,0.7,1.7,1.7,1.7c2,0,4.5,0,6.5,0c0-0.7,0-3.7,0-3.7C9,5.2,7.5,5.2,6.5,5.2z"></path>
<path class="st0" d="M11.4,2.9v1.7c1.7,0,3.3,0,3.8,0c0.2,0,0.4-0.2,0.5-0.3C15.9,4,16,3.7,16,3.4c0-0.7,0-1.5,0-2.3
 c0-0.4,0-0.7,0-1.1C12.5,0,9,0,5.6,0c0,0.2,0,0.5,0,0.7c0,1,0,1.9,0,2.9c0,0.5,0.3,1,0.7,1c0.5,0,2.1,0,3.9,0V2.9H11.4z"></path>
<path class="st0" d="M0.6,13.6c-0.1,0.3-0.1,0.7-0.1,1.1c-0.1,1.4-0.2,2.8-0.2,4.2c-0.1,1.8-0.2,3.7-0.2,5.5c0,0.9,0.5,1.4,1.4,1.4
 c0.2,0,0.3,0,0.5,0c0-4.3,0-8.6,0-13C1.3,12.7,0.8,13,0.6,13.6z"></path>
<path class="st0" d="M21.5,23.5c-0.1-1.9-0.2-3.8-0.3-5.7c-0.1-1.3-0.1-2.6-0.2-3.9c-0.1-0.8-0.6-1.2-1.4-1.1c0,4.3,0,8.6,0,13
 c0.2,0,0.4,0,0.6,0c0.8,0,1.3-0.5,1.3-1.3C21.5,24.1,21.5,23.8,21.5,23.5z"></path>
<path class="st0" d="M19,9.7c0-0.1,0-0.2,0-0.3c-0.6,0-1.1,0.1-1.7,0.1c-1.8,0-5.9,0-5.9,0v10h-1.3v-10c0,0-4.1,0-5.9,0
 c-0.5,0-1.1-0.1-1.6-0.1c0,0.1,0,0.2,0,0.4c0,5.7,0,11.3,0,17c0,1,0.4,1.7,1.3,2.2c1.1,0.7,2.4,0.9,3.7,0.9c2.2,0,4.4,0,6.6,0
 c1.3,0,2.6-0.3,3.7-1.1c0.7-0.5,1.1-1.2,1.1-2.1C19,21.1,19,15.4,19,9.7z M6.4,17.8c0.4,0,0.9,0,1.3,0c0,2.5,0,5,0,7.6
 c-0.4,0-0.8,0-1.3,0C6.4,22.8,6.4,20.3,6.4,17.8z M7.5,27.2c-0.2,0.2-0.5,0.2-0.8,0c-0.3-0.2-0.4-0.5-0.3-1.3c0.4,0,0.8,0,1.3,0
 C7.7,26.4,7.8,26.9,7.5,27.2z M13.8,17.8c0.4,0,0.8,0,1.3,0c0,2.5,0,5,0,7.6c-0.4,0-0.8,0-1.3,0C13.8,22.8,13.8,20.3,13.8,17.8z
  M14.9,27.2c-0.2,0.2-0.5,0.2-0.8,0c-0.5-0.3-0.3-0.8-0.3-1.2c0.5,0,0.9,0,1.3,0C15.1,26.4,15.3,26.9,14.9,27.2z M11.4,20.1
 c0,0.5,0.2,1.1-0.6,1.4c-0.9-0.3-0.7-0.9-0.7-1.4H11.4z"></path>
 </g>
</svg>

 

Go to your Online Store-> Theme->Edit code->Assets and search cart icon SVG file and replace this code.
This information is useful so please like and accept solution

Like THis

oscprofessional_0-1659773359387.png

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing