Change cart icon

Store Design
,
1

Hello,

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

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

URL: https://excitarestudios.com/

2

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

PageFlyTheodor_0-1700408373682.png
PageFlyTheodor_0-1700408373682.png400×194 15.1 KB

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

3

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

4

@JoaquinExcitare

Add the following SVG code

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!

5

Hi @JoaquinExcitare

Go to Online Store → Theme → Edit code.

websensepro_0-1735906975019.png
websensepro_0-1735906975019.png1357×603 132 KB

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:

websensepro_1-1735907152736.png
websensepro_1-1735907152736.png591×543 22.7 KB

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!