Change cart icon

[JoaquinExcitare]

Hello,

We want to change our shopify cart image to this SVG:

<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="44,18 54,18 54,63 10,63 10,18 20,18 "></polygon> <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M22,24V11c0-5.523,4.477-10,10-10s10,4.477,10,10v13 "></path> </g></svg>

When we change the logo in the theme coding it shows it way too big. Can somebody help?

URL: https://excitarestudios.com/

[dmwwebartisan]

@JoaquinExcitare 

To edit the cart icon in the Dawn theme, follow these steps:

1. Go to Admin>Online Store
2. On the Dawn theme click Actions>Edit Code
3. Find the icon-cart.liquid and icon-cart-empty.liquid files in the Snippets folder
4. Replace the code in those files with your custom icon.

’ll be so happy if my suggestion can help to solve your problem. If you have any further questions.

[JoaquinExcitare]

We tried this but the image appears to big, what do we need to change?

[dmwwebartisan · Accepted solution]

@JoaquinExcitare 

Add the following SVG code

<svg version="1.0" id="Layer_1" class="icon icon-cart-empty" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <polygon fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" points="44,18 54,18 54,63 10,63 10,18 20,18 "></polygon> <path fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M22,24V11c0-5.523,4.477-10,10-10s10,4.477,10,10v13 "></path> </g></svg>

Add the following CSS code to your assets/ base.css bottom of the file.

.header__icon .svg-wrapper {
    width: 22px !important;
    height: 22px !important;
}

Thanks!

[websensepro]

Hi @JoaquinExcitare 

 Go to Online Store -> Theme -> Edit code.

After pasting the custom SVG code, paste this code, which will control the height and width of the icon.

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

.header__icon--cart svg {
    height: 26px !important;
    width: 26px !important;
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!