Change size of custom cart icon

Store Design
, , , ,
1

I have used some coding to change my cart icon to a custom SVG file. I uploaded the file to my shopify content and used the following coding in both icon-cart.liquid and icon-cart-empty.liquid:

How do I change the size? It is a bit small on desktop view. It is okay on mobile. I would like the desktop cart icon to be the same size as the mobile one.

My web page is https://thetinystudiobyabbylocke.com/

I have tried so many different things and I think I have messed up the coding somewhere along the lines…

2

Hi @AbbyLocke1990 ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

HDLShin_0-1715395819018.png
HDLShin_0-1715395819018.png1902×899 133 KB

Step 2: Search file base.css or theme.css

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 767px) {
  a#cart-icon-bubble {
     width: 100px;
     height: 80px;
  }
}

Final Result:

HDLShin_1-1715395878102.png
HDLShin_1-1715395878102.png1904×885 169 KB

Hope this can help you

Kind regards,
HDL-Shin

3

Hi AbbyLocke1990,

You can edit the code where you added the img tag and replace it with


![Artboard_3studiofont.svg?v=1715394320|167x206](upload://b7AyU1ZXwbQNDl45DjLxAlrhPE5.svg)

adjust width and height will be automatically align accordingly, 100px is for desktop while 30px is for mobile.

Hope to have helped you :slightly_smiling_face:

4

Hello,

I am San from MS Web Designer.

Here is the solution:

Go to Themes > Edit code > Theme.liquid > at the bottom place this code before

Do let me know in case of any concerns.

Regards,

San